πŸŽ‰ We just launched a new HTML course! Get 3 courses with 33% off! πŸŽ‰
How to Create Objects in JavaScript?

How to Create Objects in JavaScript?

5 different examples
Ferenc Almasi β€’ πŸ”„ 2021 September 18 β€’ πŸ“– 2 min read
  • twitter
  • facebook
πŸ“’ JavaScript

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.

How you can create objects in JavaScript
If you would like to see more Webtips, follow @flowforfrank

50 JavaScript Interview Questions
Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScript

Resources:

Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Unlimited access to hundreds of tutorials
  • check Access to exclusive interactive lessons
  • check Remove ads to learn without distractions
Become a Pro

Recommended

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_~