Common Ways to Create Objects in JavaScript

In this article, we will look at effective ways to create objects in JavaScript. To follow along, it’s helpful to have a basic understanding of JavaScript concepts like functions, prototypes, and object-oriented programming principles, including objects, constructors, and classes.

Different Ways to Create Objects in JavaScript

JavaScript offers several methods to create objects. Here are some of the most common ones:

1. Object Constructor:

   The simplest way to create an empty object is by using the Object constructor. However, this method is not recommended for modern JavaScript.

   var object = new Object();

2. Object’s Create Method:

   The Object.create method creates a new object using a specified prototype.

   var object = Object.create(null);

3. Object Literal Syntax:

   The object literal syntax is a straightforward way to create an object using a set of name-value pairs enclosed in curly braces.

   var object = {
       name: "Scarlett",
       age: 34
   };

   You can use various data types for property values, including arrays, functions, and even nested objects. This is one of the easiest ways to create an object.

4. Function Constructor:

   You can define a function and use the new operator to create instances of that function.

   function Person(name) {
       this.name = name;
       this.age = 21;
   }
   
   var object = new Person("Scarlett");

5. Function Constructor with Prototype:

   This method is similar to the function constructor but utilizes prototypes for properties and methods.

   function Person() {}
   
   Person.prototype.name = "Scarlett";
   
   var object = new Person();

   This is similar to creating an instance using the Object.create method with a function prototype.

   function func() {}
   
   new func(x, y, z);

   Alternatively, you can create a new instance using the function prototype and call the function:

   var newInstance = Object.create(func.prototype);
   var result = func.call(newInstance, x, y, z);
   
   console.log(result && typeof result === 'object' ? result : newInstance);

6. ES6 Class Syntax:

   With ES6, you can use the class feature to create objects more intuitively.

   class Person {
       constructor(name) {
           this.name = name;
       }
   }
   
   var object = new Person("Scarlett");

7. Singleton Pattern:

   A Singleton is a design pattern that restricts the instantiation of a class to a single instance. This ensures that you don’t accidentally create multiple instances.

   var object = new (function () {
       this.name = "Scarlett";
   })();

We hope you learned something new from this article! If you found it helpful, please share it.

Happy coding! 😄

Related Articles

Deepen your understanding with these curated continuations.

View All Articles

Tutorial 5 min read

Convert array to an object in JavaScript

This article explains simplest and quickest way to convert array to an object in JavaScript. Using widely accepted spread operator `...` makes easy to do it.

Vishnu Jan 21, 2021

Tutorial 5 min read

How to Update an Array Element in JavaScript

Learn the simplest ways to update array elements in JavaScript. This guide explains how to use assignment operators and modern methods to modify array values.

Vishnu Nov 19, 2020

JavaScript 5 min read

Flatten an Array One Level Deep in Javascript

This article explains to flatten an array one level deep in javascript comparing with lodash _.flatten method.

Vishnu Nov 04, 2020