Thursday, August 14, 2014

Object Oriented Programming & JavaScript

You may also like to see:

JavaScript is an excellent programming language. It is a race cars with so many gears, you just need to know how to handle it. JavaScript supports Object Oriented programming, it will not force it while compiling by throwing errors. But if you know how to write OOP code with JavaScript you can get all the aspects of OOP in JavaScript and believe me its amazing.


JavaScript supports object oriented programming because it supports properties, methods, inheritance through prototyping which are building blocks of OOP. Many developers avoid JavaScript because they are used to off writing OOP code with C#, Java or any other OOP programming languages and they don't know that JavaScript supports OOP and once you start writing code with JavaScript, It gives you encapsulated, re-usable and well managed object oriented code.

JavaScript Object Oriented Programming

Namespace


If you are C# or Java developer you must be familiar with Namespace. Namespace is a logical group of classes containing similar functionality under a unique name.In JavaScript Namespace is an object(namespace) which contains other objects, functions (classes). There is no difference in Namespace object and class object used in JavaScript unlike C# or other OOP languages.

Here is an example of namespace
// global namespace
var OOPJS = OOPJS || {};
Here in above code it is checking if namespace(object) of OOPJS is already existed within applications then use the same object but if it is not created then it create an empty object and initialize our object(namespace). Now this namespace is ready to contain the classes(function) and properties.

You can write your namespace helping function or common variables, functions across the namespace within this namespace.
// Create container called OOPJS.Helpers for common methods

var OOPJS = {};
OOPJS.Helpers = {

    //common variables
    global_variable: "Object Oriented Programming",

    //common methods
    myNamespace: function () {
        return "OOPJS";
    }
}
console.log(OOPJS.Helpers.global_variable);
console.log(OOPJS.Helpers.myNamespace());


See here demo.

Core Classes/Objects

JavaScript has many object (classes) available for use, like in C# there is Math object which contains static function abs(), round() etc, same concepts available in JavaScript. There are objects like Math, Object, Array, Number, Date, JSON, String and others.

See here a math object random() function which generate a random value.
console.log(Math.random());


Like Math there is object Object available which contains  prototype, create() [ECMAScript 5 and above] and many others. Since specified built-in objects have the object referred to by Object.prototype in their prototype chain by default therefore all the properties and functions of Object is inherited to that object. Note all these methods and properties also inherited to namespace too since it is also an object.

So if you want to add a function to all the objects, you can add it to Object using prototype property.

Custom Classes/Objects

The Class
JavaScript contains no separate class declaration like C#, Java or other programming languages. In JavaScript class is a function which contains methods and properties.

Here is a class declaration:
function Person() { } 
//or 
var Student = function(){ }
Class Instance
To create an instance of class we use new keyword with the class name, which instantiate a new fresh instance of class.


Here we declare a class and then created two instance of the class.
function Student() { }
var student1 = new Student();
var student2 = new Student();

In next article we will see classes in details with different access modifiers and other aspects of Object Oriented Programming in JavaScript. Please comment your valuable feedback and suggestion for improvement of this post.

Here is Next Part of this series:

8 comments:

  1. I would avoid using the term "class" when talking about JavaScript. There is no concept of a class in JavaScript (at least not yet), and while the ability to use a function as a constructor is loosely similar to how classes are instantiated in languages that use class-based inheritance the prototypal inheritance that JavaScript uses is vastly different.

    ReplyDelete
    Replies
    1. Here I used class word just to map the concepts to JavaScript, So reader can easily compare the JS with the language they already familiar with. Yes you are correct that there is no class concept. but we can achieve the similar behavior using functions.

      Delete
    2. Drawing comparisons to classical OOP languages is a dangerous practice as it misleads new JavaScript learners into believing that there are more similarities to classical OOP than there actually are. Instead of trying to draw comparisons to classical OOP languages we should instead be highlighting the differences in an approachable way.

      Delete
  2. I would avoid using the term OO when talking about Javascript. Javascript is OO only in the sense that a puddle of vomit on the sidewalk is OO, i.e. is composed of various chunks in various states of decomposition.

    ReplyDelete
    Replies
    1. read the first paragraph! http://en.wikipedia.org/wiki/Object-oriented_programming and as crockford says:

      "Is JavaScript object-oriented? It has objects which can contain data and methods that act upon that data. Objects can contain other objects. It does not have classes, but it does have constructors which do what classes do, including acting as containers for class variables and methods. It does not have class-oriented inheritance, but it does have prototype-oriented inheritance." http://javascript.crockford.com/javascript.html

      Delete
  3. Can OOP concept applied to Javascripts as well? OOP concepts from programming language JAVA is i'm talking about.

    Regards,
    Creately

    ReplyDelete
    Replies
    1. Ofcourse you can map the concepts and achieve the same concepts of OOP in javascript, Please read complete series of above article for more details.

      Delete

Life insurance policy, bank loans, software, microsoft, facebook,mortgage,policy,