Explain different ways to create an object in JavaScript

There are three ways to create an object in JavaScript.

a.   Using Object Initializers

b.   Using a constructor function

c.   Using Object.create() method

d.   Using Object() function

Using Object Initializers

Object is created by defining list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}).

Syntax

var obj = {

  "property_1" : value_1,

  "property_2" : value_2,

  // ...,

  "property n" : value_n };

Example

var employee = {

  "firstName" : "Krishna",

  "lastName" : "Majety",

  "age" : 29,

  "address" : {

    "city" : "Bangalore",

    "area" : "Marthalli"

  }

}

HelloWorld.js

var employee = {
  "firstName" : "Krishna",
  "lastName" : "Majety",
  "age" : 29,
  "address" : {
    "city" : "Bangalore",
    "area" : "Marthalli"
  }
}

console.log("firstName : " + employee.firstName);
console.log("lastName : " + employee.lastName);
console.log("age : " + employee.age);
console.log("city : " + employee.address.city);
console.log("area : " + employee.address.area);

Output

firstName : Krishna

lastName : Majety

age : 29

city : Bangalore

area : Marthalli

Using Constructor function

Create a function for the object, that specifies the properties, methods of the object. As per convention, constructor function name should start with capital letter.

Example

function Address(city, area){

  this.city = city;

  this.area = area;

}

In the above example ‘Address’ is a constructor function.

How to define an object using the constructor function?

Using ‘new’ keyword, you can define an object.

Example

var address = new Address("Bangalore", "Marthalli");

HelloWorld.js

function Employee(firstName, lastName, age, address){
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
  this.address = address;
}

function Address(city, area){
  this.city = city;
  this.area = area;
}

var address = new Address("Bangalore", "Marthalli");

var employee = new Employee("Krishna", "Majety", 29, address);


console.log("firstName : " + employee.firstName);
console.log("lastName : " + employee.lastName);
console.log("age : " + employee.age);
console.log("city : " + employee.address.city);
console.log("area : " + employee.address.area);

Output

firstName : Krishna

lastName : Majety

age : 29

city : Bangalore

area : Marthalli

Using Object.create method

You can also create object using Object.create method.

Syntax

Object.create(proto[, propertiesObject])

proto: It is the prototype of the newly created object.

propertiesObject: It is optional. It Specify property descriptors to be added to the newly-created object, with the corresponding property names.

HelloWorld.js

var employee = {
  "firstName" : "Krishna",
  "lastName" : "Majety",
  "age" : 29,
  "address" : {
    "city" : "Bangalore",
    "area" : "Marthalli"
  }
}

function print_employee(employee){
  console.log("firstName : " + employee.firstName);
  console.log("lastName : " + employee.lastName);
  console.log("age : " + employee.age);
  console.log("city : " + employee.address.city);
  console.log("area : " + employee.address.area);  
}

var emp1 = Object.create(employee);

print_employee(emp1);

You can customize the existing properties of the object using create method and propertiesObject argument.

For example,

var emp1 = Object.create(employee, {firstName: {

    writable: true,

    configurable: true,

    value: 'Mahesh'

  }});

I set the value to firstName as Mahesh and make it as writeable and configurable.

HelloWorld.js

var employee = {
  "firstName" : "Krishna",
  "lastName" : "Majety",
  "age" : 29,
  "address" : {
    "city" : "Bangalore",
    "area" : "Marthalli"
  }
}

function print_employee(emp){
  console.log("firstName : " + emp.firstName);
  console.log("lastName : " + emp.lastName);
  console.log("age : " + emp.age);
  
  console.log("city : " + emp.address.city);
  console.log("area : " + emp.address.area);  
}

var emp1 = Object.create(employee, {firstName: {
    writable: true,
    configurable: true,
    value: 'Mahesh'
  }});

print_employee(emp1);

Output

firstName : Mahesh

lastName : Majety

age : 29

city : Bangalore

area : Marthalli

Using Object() function

HelloWorld.js

var emp = new Object();

emp.firstName = "Krishna";
emp.lastName = "Gurram";

console.log("firstName : " + emp.firstName);
console.log("lastName : "  + emp.lastName);

Output

firstName : Krishna

lastName : Gurram

Previous                                                 Next                                                 Home