Last Updated: August 09, 2023
·
235K
· fr0gs

Different ways of creating an Object in javascript

Using the Object() constructor:

var d = new Object();

This is the simplest way to create an empty object. I believe it is now discouraged.

Using Object.create() method:

var a = Object.create(null);

This method creates a new object extending the prototype object passed as a parameter.

Using the bracket's syntactig sugar:

var b = {};

This is equivalent to Object.create(null) method, using a null prototype as an argument.

Using a function constructor

var Obj = function(name) {
  this.name = name
}
var c = new Obj("hello"); 

What the new operator does is call a function and setting this of the function to a fresh new Object, and binding the prototype of that new Object to the function's prototype. As is:

function f {};

new f(a, b, c);

Would be equivalent to: 

// Create a new instance using f's prototype.
var newInstance = Object.create(f.prototype)
var result;

// Call the function
result = f.call(newInstance, a, b, c),

// If the result is a non-null object, use it, otherwise use the new instance.
result && typeof result === 'object' ? result : newInstance

Using the function constructor + prototype:

function myObj(){};
myObj.prototype.name = "hello";
var k = new myObj();

Using ES6 class syntax:

class myObject  {
  constructor(name) {
    this.name = name;
  }
}
var e = new myObject("hello");

Singleton pattern:

var l = new function(){
  this.name = "hello";
}

Related protips:

javascript foreach

3 Responses
Add your response

Good to practice.

over 1 year ago ·

var a = Object.create(null); is not the same as var a = {};
var a = Object.create(null); sets the prototype of a as null where as
var a = {}; sets the prototype of a as the Object object

over 1 year ago ·

This is the best written object creation method I've found. Thank you.

over 1 year ago ·

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.

Security insights from Cside