Javascript Object Oriented Design - Javascript Objects

• « Previous
• Next »

Objects in JavaScript are dynamic. We can add and remove properties whenever we need to.

Defining Properties

There are two basic ways to create objects:

• Use the Object constructor
• Use an object literal.

For example:

var book1 = { 
    name : "Javascript" 
}; //from w ww  .  j  a v a  2s  . co m

var book2 = new Object(); 
book2.name = "Javascript"; 

book1.website = "java2s.com"; 
book2.website = "java2s.com"; 

book1.name = "CSS"; 
book2.name = "HTML"; 

console.log(book1.name);
console.log(book1.website);
console.log(book2.name);
console.log(book2.website);

The code above generates the following result.

Note

Both book1 and book2 are objects with a name property. Then, both objects are assigned a website property.

We can add the properties after the definition of the object or later.

Objects are open for modification unless you specify otherwise.

When a property is first added to an object, JavaScript uses an internal method called [[Put]] on the object.

The [[Put]] method creates a storage in the object to store the property.

[[Put]] creates of a property on the object.

The property is called an own property.

The new added property (an own property) indicates that the specific instance of the object has that property.

The property (an own property) is stored directly on the instance.

When a new value is assigned to an existing property, a separate operation called [[Set]] is called.

[[Set]] operation replaces the current value of the property with the new one.

detecting Properties

To check whether a property exists in the object use the in operator.

The in operator looks for a property with a given name in a specific object and returns true if it finds it.

The following code shows how to use in to check for some properties in the book1 object:

var book1 = { 
    name : "Javascript" 
}; /*from   w w w . jav  a2s  .c o  m*/

var book2 = new Object(); 
book2.name = "Javascript"; 

book1.website = "java2s.com"; 
book2.website = "java2s.com"; 

book1.name = "CSS"; 
book2.name = "HTML"; 

console.log("name" in book1);     // true 
console.log("age" in book1);      // true 
console.log("title" in book1);    // false 

The code above generates the following result.

We can check for the existence of a method in the same way.

The following adds a new function, writeLine(), to book1 and uses in to confirm the function's presence.

var book1 = { 
    name : "Javascript", 
    writeLine : function() { 
        console.log(this.name); 
    } 
}; 

console.log("writeLine" in book1);  // true 

The code above generates the following result.

Own property vs buildin property

The following shows how to distinguish between own properties and buildin properties.

The in operator checks for both own properties and prototype properties.

hasOwnProperty() method present on all objects returns true only if the given property exists and is an own property.

The following code compares the results of using in versus hasOwnProperty() on different properties in book1:

var book1 = { 
    name : "Javascript", 
    writeLine : function() { /* www  .j  a  v  a 2s. co m*/
        console.log(this.name); 
    } 
}; 

console.log("name" in book1);                     
console.log(book1.hasOwnProperty("name"));      

console.log("toString" in book1);               
console.log(book1.hasOwnProperty("toString"));  

The code above generates the following result.

Removing Properties

Properties can be removed.

Setting a property to null doesn't remove the property completely from the object.

Such an operation calls [[Set]] with a value of null, which only replaces the value of the property.

The delete operator completely removes a property from an object.

The delete operator works on a single object property and calls an internal operation named [[Delete]].

When the delete operator is successful, it returns true.

The following code shows how to use the delete operator.

     
var book1 = { 
    name : "Javascript" 
}; //from  w  ww  . j  a  va2 s. co  m

console.log("name" in book1);     

delete book1.name;                

console.log("name" in book1);     
console.log(book1.name);     

The code above generates the following result.

Enumeration

By default, all properties added to an object are enumerable.

We can iterate over the properties using a for-in loop.

Enumerable properties have the [[Enumerable]] attributes set to true.

The following loop outputs the property names and values of an object:

var property; 
/*  w  w w  .jav  a  2  s. c  om*/
var book1 = { 
    name : "Javascript" 
}; 

var property; 

for (property in book1) { 
    console.log("Name: " + property); 
    console.log("Value: " + book1[property]); 
} 

The code above generates the following result.

Object.keys() methods retrieve an array of enumerable property names, as shown here:

var book1 = { 
    name : "Javascript" 
}; //ww w  .  j a  v  a2  s  .  co m

var properties = Object.keys(book1); 

var i, len; 

for (i=0, len=properties.length; i < len; i++){ 
    console.log("Name: " + properties[i]); 
    console.log("Value: " + book1[properties[i]]); 
} 

The code above generates the following result.

The for-in loop enumerates prototype properties, while Object.keys() returns only own (instance) properties.

Not all properties are enumerable.

Most of the native methods on objects have their [[Enumerable]] attribute set to false.

We can check whether a property is enumerable by using the propertyIsEnumerable() method, which is present on every object:

var book1 = { 
    name : "Javascript" 
}; //from www  . j  a v a2  s. c o  m

console.log("name" in book1);                          
console.log(book1.propertyIsEnumerable("name"));       

var properties = Object.keys(book1); 

console.log("length" in properties);                   
console.log(properties.propertyIsEnumerable("length"));

The code above generates the following result.

• Next »
• « Previous