How to create an object in JavaScript?

Create object using Object Literal

An object literal is a comma-separated set of key-value pairs. We can create an object literal as shown below:

    const user = {
        firstname: 'Joe',
        lastname: 'Smith',
        emai: 'joe@example.com',
        age: 30,
    };
    console.log(user);

We can add a dynamic property to an object after creating the object. Here is how we can add a dynamic property:

    user.status = 'active';
    console.log(user);

We can also use Object.defineProperty to create properties in the object literal. The main advantage of using Object.defineProperty is that we can set values for object property descriptors or modify existing properties.

    const user = {
        firstname: 'Joe',
        lastname: 'Smith',
        emai: 'joe@example.com',
        age: 30,
    };

    Object.defineProperty(user, "status", {
        writable: true,
        enumerable: true,
        configurable: false,
        value: 'active'
    });
    console.log(user);

Create object using Object Constructor

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

Once the object is created, we can use dot(.) notation to add attributes to the object.

    const user = new Object();  // or const user = {}; 
    user.firstname= 'Joe';
    user.lastname= 'Smith';
    user.emai= 'joe@example.com';
    user.age= 30;
    console.log(user);

Create object using Constructor Function

We can create an object using the constructor function. If we call a function using a new operator, the function acts as a constructor and returns an object. Following is the code example:

    function User(firstname, email, ...info) {
        this.firstname = firstname;
        this.email = email;
        this.status = info[0];
    }

    userObj = new User('Joe', 'joe@example.com', 'active');
    console.log(userObj);

This way of creating an object using Constructor Function is called the Constructor Invocation Pattern.

We can use the instanceof operator to find types of the instance like below:

console.log(userObj instanceof User);

Create object using Object.create()

We can create new objects using the Object.create() method, which allows us to specify the prototype object and the properties. Following is the code example:

    const User = {
        firstname: 'Joe',
        lastname: 'Smith',
        email: 'joe@example.com',
    };
    const premiumUserObj = Object.create(User, {isPremium: {value: true}});
    console.log(premiumUserObj);

Create object using Object.assign()

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

We can pass any number of objects to Object.assign() method as parameters. Following is the code example of Object.assign() method.

    const User = {
        firstname: 'Joe',
        lastname: 'Smith',
        email: 'joe@example.com',
    };

    const Premium = {
        isPremium: true
    };

    const premiumUserObj = Object.assign({}, User, Premium);
    console.log(premiumUserObj);

Create object using ES6 Classes

In ES6 (ECMAScript 2015) we can use the class keyword to define a new class in JavaScript. Similar to other languages we can use the new keyword to create an instance of it.

Here is an example of class in JavaScript:

    class User {
        constructor(name, email, ...info) {
            this.name = name;
            this.email = email;
            this.status = info[0];
        }

        getUsername() {
            return this.name;
        }
    }

    const userObj = new User('Joe', 'joe@example.com', 'active');

    console.log(userObj.getUsername()); // Joe Smith
    console.log(userObj.status); // active