How to Create Objects in JavaScript?

5 different examples

Ferenc Almasi • 🔄 2021 September 18 • 📖 2 min read

There are numerous ways to create objects in JavaScript, here are five different ones:

Using object literals

// Using object literals
const obj = {
    key: 'value'
};

literals.js

Copied to clipboard!

Using the object literal syntax is the simplest way to go. Define your properties using key-value pairs inside the curly braces.

Using the new keyword

// Using the new keyword
function Obj(props) {
  this.props = props;
};

const obj = new Obj('👋');

// Using the built-in Object
const obj = new Object();

new.js

Copied to clipboard!

You can also use the new keyword on a constructor function. Anything you pass to the function wil be available inside it as this.props. You can also use the new keyword, with the built-in global Object. This will create an empty object for you.

Using Object.create

// Using Object.create()
function newObject(props) {
  this.props = props;
};

const proto = { a: 1 };

const obj = Object.create(newObject);
const obj = Object.create(proto);

// Create object without a prototype
const obj = Object.create(null);

create.js

Copied to clipboard!

Object.create is a built-in method that you can use to create objects, with the prototype being the parameter you pass to the function. If you want to get rid of the prototype, you can pass null to Object.create. This way, your object won't have a constructor, and other inherited methods such as hasOwnProperty or toString.

Using Object.assign

// Using Object.assign()
const obj  = { ... };
const copy = Object.assign({}, obj);

// Pass multiple objects
const copy = Object.assign({}, obj1, obj2, ...);

// Pass to an existing object
const copy = Object.assign(existingObject, obj1, obj2);

assign.js

Copied to clipboard!

Using Object.assign is another way of using a built-in method. This, however, copies the values of an existing object into another one. This means you can also use it to merge objects together. The method can take as many objects as you need to merge, the first parameter will be the object that is returned.

Note that if you pass an existing object to Object.assign, you also pass the reference, meaning if you modify something in the copy, the original object will also be changed.

Using classes

// Using classes
class CreateObject {
    constructor(props) {
        ...
    }
}

const obj = new CreateObject(props);

class.js

Copied to clipboard!

Lastly, you can also use classes, introduced in ES6. This is equivalent to creating objects in class-based languages. This option also makes use of the new keyword.