Different ways(7 ways) of creating an Object in JavaScript

In this article, we will learn different ways to create objects in JavaScript like object literal, using the new keyword, Object.create() method, constructor function, ES6 Class and Singleton Pattern.

1. Object Literal Way

The Simplest and easiest way to create an object is using Object Literal “{}”. Just define properties and values inside curly braces as follows.

let person = { name : “Hello” }

where name is the property of person object and Hello is the value of the name property.

Properties of an Object can be accessed by a dot notation or by bracket notation as follows.

console.log(person.name) // Output: Hello
       or
console.log(person[‘name’]) // Output: Hello

2. new Object() Way

Another simplest way to create an Object is by using new Object().

let person = new Object({name : “Hello” });

Creating objects using new Object() and object literal does the same thing. For simplicity, readability and execution speed, use object literal way.

3. Object.create() Way

Basic syntax of the Object.create() is as follows.

Object.create(PrototypeObject, PropertiesObject)

The object.create method accepts two arguments.

1. Prototype Object: Newly created objects prototype object. It has to be an object or null.
2. Properties Object: Properties of the new object. This argument is optional

let person = Object.create(null);
person.name = "Sachin";

console.log(person); // { name : "Sachin" }

4. Constructor Function Way

The constructor is just a function and constructor function allows to create multiple objects of the same function with the help of new keyword as shown below.

function Vehicle(name, type) {
   this.name = name;
   this.type= type;
}

let vehicle1 = new Vehicle(’Ford’, 'Car’);
let vehicle2 = new Vehicle(’KTM’, 'Bike’);

console.log(vehicle1.name);    //Output: Ford
console.log(vehicle2.name);    //Output: KTM

Using the function constructor with prototype:

function Vehicle() {
}
Vehicle.prototype.name = "Ford";Vehicle.prototype.type = "Car";

let vehicle1 = new Vehicle();

console.log(vehicle1.name);    //Output: Ford

5. ES6 Classes Way

Es6 supports Classes concept. By using classes we can create a new object as shown below.

class Vehicle {
  constructor(name, maker) {
    this.name = name;
    this.maker =  maker;
  }
}

let vehicle1 = new Vehicle(’Ford’, 'Car’);
let vehicle2 = new Vehicle(’KTM’, 'Bike’);

console.log(vehicle1.name);    //Output: Ford
console.log(vehicle2.name);    //Output: KTM

6. Factory Function Way

We can also create an Object using the factory function way as shown below.

function person(name, age) {
   return { name, age };
}

let person1 = person(‘Bunny’, 24);
console.log(person1.name); // Output: Bunny
console.log(person1.age); // Output: 24

7. Singleton Pattern

The word Singleton itself says that a singleton object Ensure a class has only one instance and provide a global point of access to it.

let person = new function() {
   this.name = "Bunny";
}

console.log(person.name); // Output: Bunny

Summary

We have learned about different possible ways to create a new object in JavaScript.