What is the difference between `new Object()` and object literal notation?

javascript object jslint
ectype picture ectype · Jan 4, 2011 · Viewed 141.1k times · Source

What is the difference between this constructor-based syntax for creating an object:

person = new Object()

...and this literal syntax:

person = {
    property1 : "Hello"
};

It appears that both do the same thing, although JSLint prefers you use object literal notation.

Which one is better and why?

Answer

Rémy DAVID picture Rémy DAVID · Aug 29, 2012

There is no difference for a simple object without methods as in your example. However, there is a big difference when you start adding methods to your object.

Literal way:

function Obj( prop ) { 
    return { 
        p : prop, 
        sayHello : function(){ alert(this.p); }, 
    }; 
}

Prototype way:

function Obj( prop ) { 
    this.p = prop; 
} 
Obj.prototype.sayHello = function(){alert(this.p);};

Both ways allow creation of instances of Obj like this:

var foo = new Obj( "hello" );

However, with the literal way, you carry a copy of the sayHello method within each instance of your objects. Whereas, with the prototype way, the method is defined in the object prototype and shared between all object instances. If you have a lot of objects or a lot of methods, the literal way can lead to quite big memory waste.

Related questions

JavaScript: JSLint throws "Read Only

My code: note: the Slider Object is declared but omitted in the snippet below for better readability "use strict"; /*global arrayContainer, SliderInstance, DomObjects */ arrayContainer = new Slider.constructArray(); SliderInstance = Object.beget(Slider); DomObjects = { animationContainer: document.getElementById('animationContainer'), buttonRight: document.getElementById('buttonRight'), …

Read More
Checking if a key exists in a JavaScript object?

How do I check if a particular key exists in a JavaScript object or array? If a key doesn't exist, and I try to access it, will it return false? Or throw an error?

Read More
What is the most efficient way to deep clone an object in JavaScript?

What is the most efficient way to clone a JavaScript object? I've seen obj = eval(uneval(o)); being used, but that's non-standard and only supported by Firefox. I've done things like obj = JSON.parse(JSON.stringify(o)); but question the …

Read More