How to Create Objects In JavaScript

In JavaScript, almost “everything” is an object.

  • Booleans can be objects (if defined with the new keyword)
  • Numbers can be objects (if defined with the new keyword)
  • Strings can be objects (if defined with the new keyword)
  • Dates are always objects
  • Maths are always objects
  • Regular expressions are always objects
  • Arrays are always objects
  • Functions are always objects
  • Objects are always objects

All JavaScript values, except primitives, are objects.

In this post I give 7 ways to create object in javascript.


1. Object literal syntax

This is the easiest way in JavaScript to create an object. It uses notation to initialise an object.

const person = {
	firstName: “John”,
	lastName: “Doe”
}

2. Object constructor

Object Constructor uses new keyword to create an object from Object class.

const person1 = new Object ();
const person2 new Object ();

//Adding the properties on person1 object
person1.firstName = “John”;
person1.lastName = “doe”;

//Adding the properties on person2 object
person2.firstName = “Jane";
person2.lastName = “doe";

3. Constructor Function

Constructor function uses new keyword to create an object from a function similar like object constructor.

Creating an object using the constructor function takes less efforts. Because adding properties manually is really painful when creating multiple objects using an object constructor.

function Person(firstName, lastName) {
		this.firstName = firstName;
		this.lastName = lastName;
}

const person1 = new Person('John', 'Doe'); 
const person2 = new Person(' Jane', 'Doe');

4. Es6 classes

ECMAScript 2015 (ES6) is a modern way of creating an object using new keyword instead of constructor function.

class Person {
	constructor(firstName, lastName) {
		this.firstName = firstName;
		this.lastName = lastName;
	}
} 

const person1 = new Person('John', 'Doe'); 
const person2 = new Person(' Jane', 'Doe');

5. Object.create()

Object.create() is a prototype method that creates a new object using the prototype of the existing object provided as a first parameter.

const person1 = {
	name: “John Doe”

const person2 = Object.create(person1); 
console.log(person2); 	// { name: 'John Doe’ }

6. Object.assign()

Object.assign() is another prototype method of Object that is used to create a new object.

It copies one or more source objects into the target object. This method is really helpful for cloning or merging objects.

const person1 = { firstName: “John” };
const person2 = { lastName : “Doe" };
const target = Object.assign({}, person1, person2);

console.log(target);		// { firstName: “John”, lastName : “Doe" }
console.log(person1) ;		// { firstName: “John” }
console.log(person2);		// { lastName : “Doe” }

7. Object spread {…}

The object spread operator is the new way of cloning or merging the objects introduced in ECMAScript 2018.

Since most of the browsers are yet to implement ES2018, we can use this feature with compilers like Babel.js.

const source = { firstName: "John" };
const target = { …source };

console.log(target);		// { firstName: “John” }
console.log(source);		// { lastName : “John” }

Leave a Reply

Your email address will not be published.

Recent post

Redux to a Next JS App
Redux to a Next JS App
  • July 16, 2021
How to Create Objects In JavaScript
How to Create Objects In JavaScript?
  • June 29, 2021
HTML forms
HTML Forms
  • June 23, 2021
Need a successful project?

Lets Work Together

Estimate Project
  • right image
  • Left Image