A JavaScript object is a collection of key-value pairs known as properties. Objects are commonly used for storing, manipulating, and sending data over the network.

There are multiple ways available to create an object in JavaScript. You can use:

  • Object Literal
  • Object Constructor
  • Constructor Function
  • Object.create() Method
  • Object.assign() Method
  • ES6 Classes

1 — Object Literal

The simplest and most popular way to create objects in JavaScript is by using the object literal syntax. All you need to do is put all your key-value pairs separated by a colon(:) inside curly braces as shown below:

const fruits = {
    mango: '🥭️',
    apple: '🍎',
    lemon: '🍋',
    cherry: '🍒'
};

2 — Object Constructor

The second way to create an object in JavaScript is by using the in-built Object() constructor. You can use the new keyword to initialize an instance of Object:

const fruits = new Object();

Now to add properties to the above object, you have to use the dot (.) notation as shown below:

const fruits = new Object();

fruits.mango = '🥭️';
fruits.apple = '🍎';
fruits.lemon = '🍋';
fruits.cherry = '🍒';

3 — Constructor Function

The new keyword can also be used with a user-defined constructor function to create an object. A constructor function is nothing but a simple JavaScript function that, when called with a new keyword, acts as a constructor and returns an object.

Here is an example:

function User(name, age) {
    this.name = name;
    this.age = age;
};

const user = new User('John Doe', 45);

In the above User function, the this keyword refers to the object being created, so the name and age become the properties of the newly created object.

This approach is better than the in-built Object constructor initialization. It allows us to quickly create multiple objects of the same type without manually adding properties to each object.

4 — Object.create() Method

The Object.create() method allows us to create a new object, using an existing object as the prototype of the newly created object. This method is especially useful when you want to create a new object from an already existing object.

The Object.create() method takes up to two parameters. The first mandatory parameter is the object that serves as a prototype for the newly created object. The second parameter is an optional object which contains the properties to be added to the new object.

Let us say you have the following existing object:

const Vehicle = {
    maker: 'BMW',
    color: 'Black'
};

To create a new object by using the Vehicle's prototype, you can do the following:

const vehicle = Object.create(Vehicle);

console.log(vehicle.maker); // Tesla
console.log(vehicle.color); // Red

You can also specify additional properties for the new object as a second parameter to Object.create() with attribute options like configurable, enumerable, writable and value as shown below:


const vehicle = Object.create(Vehicle, {
    type: {
        value: 'Electric',
        writable: true,
        configurable: true,
        enumerable: false
    }
});

console.log(vehicle.maker); // Tesla
console.log(vehicle.color); // Red
console.log(vehicle.type); // Electric

Take a look at this MDN article to learn more about the Object.create() method.

5 — Object.assign() Method

The fifth way to create an object in JavaScript is by using the Object.assign() method. This method takes one or more source objects as input and copies all enumerable own properties to the target object.

You can pass in any number of objects to Object.assign() as parameters. The first parameter is the target object. The rest of the parameters are source objects containing properties that you want to apply to the target object.

Let us assume that you have the following two objects:

const car = {
    maker: 'Model X',
    color: 'Black'
};

const maker = {
    name: 'Tesla'
};

Now you want to combine both car and maker objects to create a vehicle object. Just use Object.assign() to merge both existing objects to create a new object as shown below:

const vehicle = Object.assign({}, maker, car);

console.log(vehicle);

// { name: 'Tesla', maker: 'Model X', color: 'Black' }

6 — ES6 Classes

ES6 (ECMAScript 2015) introduced, for the first time, the concept of classes in JavaScript. You can use the class keyword to define a new class in JavaScript instead of a function constructor, and then use the new keyword to create an instance of it.

Let us look at the following example:

class User {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    sayHi() {
        return `Hi ${this.name} 👋`;
    }
}

const user = new User('Atta', 30);

console.log(user.sayHi()); // Hi Atta 👋
console.log(user.age); // 30

Conclusion

That's all folks for creating objects in JavaScript. We learnt about 6 distinct ways to create an object including object literal syntax, Object constructor, constructor functions, Object.create(), Object.assign(), and ES6 classes.

All these methods are useful in different scenarios. The method commonly used by the JavaScript developers to define an object is object literal. It is a simple and fastest way to define an object with all required key-value pairs in JavaScript.

✌️ Like this article? Follow @attacomsian on Twitter. You can also follow me on LinkedIn and DEV. Subscribe to RSS Feed.

👋 If you enjoy reading my articles and want to support me to continue creating free tutorials, ☕ Buy me a coffee (cost $5).