What are the various ways to create objects in JavaScript?

TL;DR

Creating objects in JavaScript offers several methods:

• Object literals ({}): Simplest and most popular approach. Define key-value pairs within curly braces.
• Object() constructor: Use new Object() with dot notation to add properties.
• Object.create(): Create new objects using existing objects as prototypes, inheriting properties and methods.
• Constructor functions: Define blueprints for objects using functions, creating instances with new.
• ES2015 classes: Structured syntax similar to other languages, using class and constructor keywords.

Objects in JavaScript

Creating objects in JavaScript involves several methods. Here are the various ways to create objects in JavaScript:

Object literals ({})

This is the simplest and most popular way to create objects in JavaScript. It involves defining a collection of key-value pairs within curly braces ({}). It can be used when you need to create a single object with a fixed set of properties.

const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 50,
  eyeColor: 'blue',
};

Object() constructor

This method involves using the new keyword with the built-in Object constructor to create an object. You can then add properties to the object using dot notation. It can be used when you need to create an object from a primitive value or to create an empty object.

const person = new Object();
person.firstName = 'John';
person.lastName = 'Doe';

Object.create() Method

This method allows you to create a new object using an existing object as a prototype. The new object inherits properties and methods from the prototype object. It can be used when you need to create a new object with a specific prototype.

// Object.create() Method
const personPrototype = {
  greet() {
    console.log(
      `Hello, my name is ${this.name} and I'm ${this.age} years old.`,
    );
  },
};

const person = Object.create(personPrototype);
person.name = 'John';
person.age = 30;

person.greet(); // Output: Hello, my name is John and I'm 30 years old.

An object without a prototype can be created by doing Object.create(null).

ES2015 classes

Classes provide a more structured and familiar syntax (similar to other programming languages) for creating objects. They define a blueprint and use methods to interact with the object's properties. It can be used when you need to create complex objects with inheritance and encapsulation.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet = function () {
    console.log(
      `Hello, my name is ${this.name} and I'm ${this.age} years old.`,
    );
  };
}

const person1 = new Person('John', 30);
const person2 = new Person('Alice', 25);

person1.greet(); // Output: Hello, my name is John and I'm 30 years old.
person2.greet(); // Output: Hello, my name is Alice and I'm 25 years old.

Constructor functions

Constructor functions are used to create reusable blueprints for objects. They define the properties and behaviors shared by all objects of that type. You use the new keyword to create instances of the object. It can be used when you need to create multiple objects with similar properties and methods.

However, now that ES2015 classes are readily supported in modern browsers, there's little reason to use constructor functions to create objects.

// Constructor function
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function () {
    console.log(
      `Hello, my name is ${this.name} and I'm ${this.age} years old.`,
    );
  };
}

const person1 = new Person('John', 30);
const person2 = new Person('Alice', 25);

person1.greet(); // Output: Hello, my name is John and I'm 30 years old.
person2.greet(); // Output: Hello, my name is Alice and I'm 25 years old.

Further reading

• Object() constructor | MDN
• new keyword | MDN
• Object.create() | MDN