Create Objects in JavaScript

In this tutorial, we will see how to Create Objects in JavaScript. Objects provide a way to group several values into a single value. The object internally uses a collection of key-value pairs to store values. JavaScript has several ways by which you can create an object. Let us explore that in detail.

How to Create Objects in JavaScript

There are several different ways to create new objects in Javascript

  1. Using Object Literal
  2. Using a new keyword with a constructor function
  3. Object.create method
  4. Object.assign() method
  5. Using ES6 Class Statement

Using Object Literal

An object literal in JavaScript allows us to create plain JavaScript objects. It consists of a list of key-value pairs, each separated by a comma and wrapped inside curly braces.

To create a object using object literal syntax

  1. Enclose everything in a curly bracket
  2. Use colon as a separator between a property name (key) and its value
  3. Use a comma as a separator between each key-value pair
  4. Comma at the end of the last key-value pair is ok.

You can read more about Object Literal in JavaScript.

Using a new keyword & Constructor function

JavaScript object Constructor function allows us to create multiple similar objects easily. We invoke the constructor function using the new operator

The constructor function is a regular JavaScript function that contains a recipe to create a new object. When we invoke it using the new operator it creates a new instance of the object and returns it.

Built-in Constructor Function

JavaScript provides some built-in constructor functions. One of them is the Object constructor function. The return value of the Object() constructor a new object. Once we create a new create new object, we assign properties and methods to it.

If you pass an object as the first argument to it, It will return it as it is.

Apart from JavaScript also have several built-in constructor functions like Function, boolean, Number, BigInt, Math, Date, etc. You can refer to the Complete list of built-in objects in JavaScript.

Creating an new Array

User-Defined Constructor functions

Apart from the built-in constructor functions, we can define our own constructor function. To Create constructor function

  1. Create a Regular JavaScript Function
  2. Assign all the properties & methods to the object pointed by this
  3. Invoke it with new keyword

You can refer to Constructor Function & New Operator in JavaScript

Object.create method

The Object.create() is useful, when you want to create a new object and also want to set an existing object as its Prototype. We pass the Prototype as the first argument to the Object.create() method.

The following code creates a new object alex and sets person as its prototype.

The Second argument to object.create is a property descriptors.

Object.assign() method

Use Object.assign() method to create a clone of another object (Source). But remember that it only copies its own properties which are enumerable from the Source object

The Object.assign() also allows copying from more than one source. Properties in the target object are overwritten by properties in the sources if they have the same key. Later sources’ properties overwrite earlier ones.

The following example, creates a new object from Object.assign

Creating a new object from Multiple Sources.

Target is an existing object.

Using Class Statement

Classes in JavaScript were introduced with ES6. They are nothing but Syntactic sugar for the new and constructor function.

The following example shows you how to create a class in JavaScript. We can then use the new keyword to objects from the class.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top