Thursday, February 21, 2013

Objects in JavaScript

In JavaScript all objects are equal by nature. This means that

  • There is no class difference in JavaScript objects.  They are just objects and there is no class birth mark with them.   In Java any object must belong to one class and it will always be so in its life cycle.  
  • JavaScript objects can change themselves dynamically.   

Conceptually JavaScript object is the container of properties which are the name-value pair.  The property value can be the primitive values, or other object(including the functions because they are also objects).  Physically object is the structure that hold these properties of the object.

Creation of Object


So how a JavaScript come into life? There are several ways to do so. One normal way is using constructor function. What is constructor function?  Constructor function is a normal function but it is invoked with the keyword new.    It is kind of magic.   When the function is invoked in such way three things will happen within the function: An object is created, this is resolved for this new created object and the new object is returned even you don't do so explicitly in the function. The below are two examples that use constructor functions to create a Car object.   One is with named function and another with anonymous function. The results are the same.
function Car(model, make, year) {
 this.make = make;
 this.model = model;
 this.year = year;
}
var myCar1 = new Car('Honda', 'Accord', 2010);

var Car = function (model, make, year) {
 this.make = make;
 this.model = model;
 this.year = year;
}

var myCar2 = new Car('Honda', 'Accord', 2010);

But when this function is invoked without the keyword new.   The magic of object creation will not happen. 

All objects in JavaScript are created with constructor function.  With an object you can check its constructor function using the below statement

myObj.constructor

It will return the constructor function used to create the object.  In above examples myCar1.constructor will return Car() function and myCar2 will return anonymous function.


Apart from using constructor function to create objects, JavaScript provides another way or shortcut to create the objects: Literal.   The below are two examples of using literal to create objects.

var myCarLiteral = { make:'Honda',
                     model: 'Accord',
                     year: 2013}; 
Actually these creation are the same as we use the constructor functions.  But if you check the constructor function of this object you will find that it is function Object().


Operators Used to Check the Type of Objects


There are two operators that can be used to check the type of the objects: typeof and instanceof.
typeof operator is used to return the type of object. It wil return the string that is the name of object type.  For all objects it will return object
 instanceof is used to decide if an object is created from one constructor function.  It will return a boolean value. 
 function Car(model, make, year) {
  this.make = make;
  this.model = model;
  this.year = year;
 }
 var myCar1 = new Car('Honda', 'Accord', 2010);

 var myCar3 = { make:'Honda',
       model: 'Accord',
       year: 2013};

 console.log(myCar1 instanceof Car);
 console.log(myCar3 instanceof Object);
 console.log(typeof Car);
 console.log(typeof myCar1);
 console.log(typeof myCar3);

The above log output will be: true, true, function, object, object.


Built-in Objects or Native Objects


The above examples arex custom-made constructor function.  Actually JavaScript provides many built-in constructor functions already.   These are: Object(),Number(),String(),Array(),Function(),Date(),RegExp(),Error(). In these the most interesting one is Object().   This is the root of all JavaScript objects.

Here we can use Obect() to create myCar object which we create using custom constructor function.

var myCar = new Object(); 
myCar.make = "Honda";
myCar.model = "Accord";
myCar.yaer = 2013;
Here this myCar object actually is the same as myCar using Car constructor function even the constructor functions they use are different.     But obviously the customer constructor function is more convenient in creating multiple instances sharing the same properties of Car.

1 comment:

  1. This is a great explanation of objects in JavaScript! If you're working on containerized applications, Golangci-Lint is a fantastic tool for managing your local Docker environments, making it easier to test and develop JavaScript apps in isolated containers.

    ReplyDelete