JavaScript Object

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

Object in JavaScript:

Object is a non-primitive data type in JavaScript. It is like any other variable, the only difference is that an object holds multiple values in terms of properties and methods. Properties can hold values of primitive data types and methods are functions.

JavaScript object and JSON objects are different.

 

In other programming languages like Java or C#, you need a class to create an object of it. In JavaScript, an object is a standalone entity because there is no class in JavaScript. However, you can achieve class like functionality using functions. We will learn how to treat a function as a class in the advance JavaScript section.

Let's learn how to create an object in JavaScript.

In JavaScript, an object can be created in two ways:

  1. Object literal
  2. Object constructor

Object Literal:

The object literal is a simple way of creating an object using { } brackets. You can include key-value pair in { }, where key would be property or method name and value will be value of property of any data type or a function. Use comma (,) to separate multiple key-value pairs.

Syntax:

var  = { key1: value1, key2: value2,... keyN: valueN};

The following example creates an object using object literal syntax.

Example: Create object using object literal syntax

You must specify key-value pair in object for properties or methods. Only property or method name without value is not valid. The following syntax is invalid.

Example: Wrong object literal syntax

var person = { firstName };

var person = { firstName: };

Access object properties & methods:

You can get or set values of an object's properties using dot notation or bracket. However, you can call an object's method only using dot notation.

Example: Access object

var person = { 
                firstName: "James", 
                lastName: "Bond", 
                age: 25, 
                getFullName: function () { 
                    return this.firstName + ' ' + this.lastName 
                    } 
            };

person.firstName; // returns James
person.lastName; // returns Bond

person["firstName"];// returns James
person["lastName"];// returns Bond

person.getFullName();

Note :An object's methods can be called using () operator e.g. person.getFullName(). Without (), it will return function definition.

Object Constructor:

The second way to create an object is with Object Constructor using new keyword. You can attach properties and methods using dot notation. Optionally, you can also create properties using [ ] brackets and specifying property name as string.

Example: Object constructor

var person = new Object();

// Attach properties and methods to person object     
person.firstName = "James";
person["lastName"] = "Bond"; 
person.age = 25;
person.getFullName = function () {
        return this.firstName + ' ' + this.lastName;
    };

// access properties & methods 
person.firstName; // James
person.lastName; // Bond
person.getFullName(); // James Bond

Undefined property or method:

JavaScript will return 'undefined' if you try to access properties or call methods that do not exist.

If you are not sure whether an object has a particular property or not, then use hasOwnProperty() method before accessing properties.

Example: hasOwnProperty()

var person = new Object();
    
person.firstName; // returns undefined

if(person.hasOwnProperty("firstName")){
           person.firstName;
    }

Access Object keys.

Use for..in loop to get the list of all properties and methods of an object.

Example: Object keys

var person = new Object();
    
person.firstName = "James";
person["lastName"] = "Bond";
person.age = 25;
person.getFullName = function () {
        return this.firstName + ' ' + this.lastName;
    };

for(var key in person){
        alert(key);
    };

Pass by reference:

Object in JavaScript passes by reference from one function to another.

Example: Object passes by reference

function changeFirstName(per)
{
    per.firstName = "Steve";
}

var person = { firstName : "Bill" };

changeFirstName(person)    

person.firstName; // returns Steve

If, two objects point to the same object then the change made in one object will reflect in another object.

Example: Object reference

var person = { firstName : "John" };

var anotherPerson = person;  

anotherPerson.firstName = "Bill";

person.firstName; //returns Bill

Nested objects:

You can assign another object as a property of an object.

Example: Nested objects

var person = {
    firstName: "James",
    lastName: "Bond",
    age: 25,
    address: {
        id: 1,
        country:"UK"
    }
};

person.address.country; // returns "UK"

Points to Remember :

  1. JavaScript object is a standalone entity that holds multiple values in terms of properties and methods.
  2. Object property stores a literal value and method represents function.
  3. An object can be created using object literal or object constructor syntax.
  4. Object literal:
    
                var person = { 
                    firstName: "James", 
                    lastName: "Bond", 
                    age: 25, 
                    getFullName: function () { 
                        return this.firstName + ' ' + this.lastName 
                        } 
                };
                                        
  5. Object constructor:
    
                var person = new Object();
                        
                person.firstName = "James";
                person["lastName"] = "Bond"; 
                person.age = 25;
                person.getFullName = function () {
                        return this.firstName + ' ' + this.lastName;
                    };
                        
  6. Object properties and methods can be accessed using dot notation or [ ] bracket.
  7. An object is passed by reference from one function to another.
  8. An object can include another object as a property.