You sure have seen many codes written in JavaScript using functions, new keyword, objects, assigning object to others, calling a function with new keyword, and adding property to functions. Wow, It is weired language comparing to others.

Let's recheck all these and discuss about them.

Here we will talk about these:

• How to define a function
• How to define a class
• How to create an object
• How to extend objects
• How to extend objects dynamically
• What are properties

How to define a function

You can define a function in two ways:

function newFunction(param){
    //do some stuff in function
    return param;
} 
   

var newFunction = function(param){
    //do some stuff in function
    return param;
} 
   

These two are the same. And same as any other languages you can call them:

newFunction('pass parameters'); 
   

How to define a class

If you use new keyword when you are calling the function, it will cause javascript to instantiate an object from that function.

var result = newFunction(3);
var instance = new newFunction(2);
alert(result); //yields 3
alert(instance); //yields object 
   

var newFunction = function(param){
    //do some stuff in function
    this.param = param // this is object property
    return param;
}
var instance = new newFunction(2);
alert(instance.param); //yields 2 
   

• First such as ordinary function
• Using new keyword to act as constructor of a class

How to create an object

You can create object by instantiating using new keyword when calling a function or you can

var newObject = new Object();
var newObject = []; 
   

newObject.size = 5;
var otherObject = newObject;
alert(newObject.size); //yields 5
alert(otherObject.size); //yields 5
otherObject.color = 'red'; 
alert(newObject.color); //yields 'red'
alert(otherObject.color); //yields 'red' 
   

It is the same when you are creating the object by using new keyword.

var instance = new newFunction(2);
alert(instance.param); //yields 2
var instance2 = instance;
alert(instance2.param); //yields 2 
   

But when we use new keyword each instance will be act separately. As it is shown below if you extend one instance, it will not be applied to the other one.

var instance = new newFunction(2);
var instance2 = new newFunction(2);
instance.extra = 'hi'
alert(instance.extra); //yields 'hi'
alert(instance2.extra); //yields undefined 
   

How to extend objects

You can extend objects in two way:

1. Extending just an object
   You can extend object the way described above. Simply by adding the property you want to that object
   

   var newObject = [];//create the object
   newObject.size = 5; 
      

   var%20newObject%20%3D%20%5B%5D%3B%2F%2Fcreate%20the%20object%0AnewObject.size%20%3D%205%3B
2. Extending family of objects
   You can extend family of objects by extending their prototype property of the constructor. Each object constructor in javascript has a property called prototype.If you extend this property with your own properties.All instances of that will inherit these new properties.
   

   newFunction.prototype.extra2 = 'bye'
   alert(instance.extra2); //yields 'bye'
   alert(instance2.extra2); //yields 'bye' 
      

   newFunction.prototype.extra2%20%3D%20%27bye%27%0Aalert%28instance.extra2%29%3B%20%2F%2Fyields%20%27bye%27%0Aalert%28instance2.extra2%29%3B%20%2F%2Fyields%20%27bye%27
   As you see we extendthe constructor of instance and instance2 so now both has the new property

The best part about extending object is you can extend them when ever you want. So it means you can also extend built-in Objects such as Array, Date and ... .

How to extend objects dynamically

You can add properties in two format:

newFunction.prototype.extra2 = 'bye';
newFunction.prototype['extra2'] = 'bye 2'; 
   

The second format is helpful when you want to extend them dynamically during the runtime. Such as:

var newFunction = function(param){
    //do some stuff in function
    this.param = param
    return param;
}
var instance = new newFunction(2);
//this will be loaded from server at runtime
var jsonDataFromServer = {
                            referer:'otherObject',
                            newFunctionality: function(){alert(this.referer);}
                            }
//
for( var i in jsonDataFromServer)
    newFunction.prototype[i] = jsonDataFromServer[i];
//later you can call
instance.newFunctionality(); //yield 'something' 
   

What are properties

Properties are extending our objects with attributes and functionalities. such as:

// Attributes
//extend prototype so all objects of this family will be affected
newFunction.prototype.color = 'red';
//extend just an object (instance)
instance.priority = 'important'
//
// Functionalities
function newFunctionality(i){
    //do some stuff
    alert(i);
}
newFunction.prototype.myMethod = newFunctionality
//or you can write it this way
newFunction.prototype.myMethod = function(i){
    //do some stuff
    alert(i);
}
// you can extend objects too
instance.extraMethod = function(){
    //do some stuff
} 
   

As I mentioned before you can extend built-in objects such as Array() of javascript with extra functionalities.

This article originally published at my personal website www.arashkarimzadeh.com. You can read the latest version here.

Tags: JavaScript