How to create an object in JavaScript

How to create an object in JavaScript

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 6 ways available to create an object in JavaScript. You can use:

1. Object Literal
2. Object Constructor
3. Constructor Function
4. Object.create() Method
5. Object.assign() Method
6. ES6 Classes

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: '🍒'
}

Object Constructor

The second way to create an object in JavaScript is 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 = '🍒'

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.

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 helpful 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.

Object.assign() Method

The Object.assign() method is another way to create an object in JavaScript.

It takes one or more source objects as input and copies all their enumerable own properties to the target object.

You can pass 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 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 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' }

ES6 Classes

ES6 (ECMAScript 2015) introduced 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.

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

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

const fruits = new Object()

const fruits = new Object()

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

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

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

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

const vehicle = Object.create(Vehicle)

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

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

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

const maker = {
    name: 'Tesla'
}

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

console.log(vehicle)

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

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

See recent articles by JS Nooby

FEATURED

How to Insert an element before another DOM element with JavaScript

Insert an element before another DOM element with JavaScript

FEATURED

How to trigger built-in and custom events using JavaScript

Triggering built-in and custom events using JavaScript

FEATURED

How to remove an event handler in JavaScript

How to remove an event handler in JavaScript

FEATURED

Introduction to Service Workers in JavaScript

Introduction to Service Workers in JavaScript

FEATURED

How to use object & array destructuring in JavaScript

How to use object & array destructuring in JavaScript

FEATURED

How to check if an object is an array in JavaScript

How to check if an object is an array in JavaScript