Methods to create Objects in JavaScript

Introduction

There are quite few ways to create an Object in JavaScript.

1. Object literals
2. Object() constructor
3. Object.create()
4. Constructor function
5. ES6 Class

Object literals

Probably this is the fastest and easiest way to create an Object in JavaScript. This is also called as an object initializer is a comma-delimited list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}).

const newObject = {} // Simply create a new empty object

const newObject = { 
  someKey: "someValue", 
  anotherKey: "anotherValue" 
}

Object values can be either primitive data type or other object.

Object() constructor

You can create an object using the built-in Object constructor.
If passed value is null or undefined or no value passed then it creates and return an empty object.
If the value is already an object, it returns the same value.

// below options create and return an empty object
const ObjWithNoValue = new Object();
const ObjWithUndefined = new Object(undefined);
const ObjWithNull = new Object(null);

const newObject = { 
  someKey: "someValue", 
  anotherKey: "anotherValue" 
}

const sameObject = new Object(someObject);

sameObject['andAnotherKey'] = "one another value";

sameObject === newObject; // both objects are same. 

Object.create()

This method allows you to create a new object with a specific prototype. This approach enables the new object to inherit properties and methods from the prototype, facilitating inheritance-like behavior.

const person = {
  greet: function () {
    console.log(`Hello ${this.name || 'Guest'}`);
  }
}

const driver = Object.create(person);
driver.name = 'John';
driver.greet(); // Hello John

Constructor function

Before ES6, this was a common method to create multiple similar objects. Constructor is nothing but a function and with the help of a new keyword you can able to create an object.

It's a good practice that capitalize the first character of a function name when you construct the object with the "new" keyword.

function Person(name, location) {
  this.name = name;
  this.location = location;
  greet() {
    console.log(`Hello, I am ${this.name || 'Guest'} from ${this.location || 'Earth'}`);
  }
}

const alex = new Person('Alex');
alex.greet(); // Hello, I am Alex from Earth

const sam = new Person('Sam Anderson', 'Switzerland');
sam.greet(); // Hello, I am Sam Anderson from Switzerland

ES6 Class

A more modern approach helps to create object just like other OOP programming languages using class with constructor function to initialize properties and methods.

class Person {
  constructor(name, location) {
    this.name = name || 'Guest';
    this.location = location || 'Earth';
  }

  greet() {
    console.log(`Hello, I am ${this.name} from ${this.location}`);
  }
}

const santa = new Person('Santa');
santa.greet(); // Hello, I am Santa from Earth

References:

• MDN - JavaScript
• javascript.info