In JavaScript, which method of creating an object with properties is most efficient?

Question

I'm a little new to JavaScript. I've used it here and there on the client-side for a while, but now I am adventuring into server-side Javascript. This question is about Javascript objects, regarding their creation and the efficient definition of their properties.

I've seen (several times) that creating an object as var o = {}; is now preferred over var o = new Object(); for performance reasons. Are there differences in performance in how you add properties to an object?

For instance, is there any difference in performance between this situation:

var o = {
  thing1: "yardigooven",
  thing2: "goovenyardi",
};

and this situation?:

var o = {};
o.thing1 = "yardigooven";
o.thing2 = "goovenyardi";

I'm assuming the first case is preferred, but I want to make sure before I write all of my object definitions that way.

Thanks.

Answer 1

First of all, var o = {}; and var o = new Array(); aren't the same. The first initializes an object, the second an array. var o = {}; and var o = new Object(); are equivalent.

Now about the performance of using an object literal instead of adding the properties after. Which one is fastest? The answer is, we don't care, and you shouldn't either. If there is a difference in performance, it will be so small that it will never impact, even if you create 1 million objects at once, which is unlikely to ever happen.

This is called premature-optimization, and is the bane of many intermediate programmers. Don't worry about optimizing anything unless you start having performance problems. Then you use a profiler to detect where the bottleneck is and solve it. Just worry about making your app.

For completeness' sake, here is a test I ran on jsperf. In my browser, Chrome 15, the object literal initialization was 53% faster. Wow, 53%, that's huge right? Except if you put your mouse over the tooltip for the test that uses properties after initialization, you'll see it says something like

Ran 681,285 times in 0.077 seconds.

Your numbers may differ, but you'll be able to observe that the method considered slowest still goes pretty fast by any standards. I think it's safe to say that both are fast enough for any purpose. Just use the one you prefer.

Answer 2

Heed the advice of others about premature optimization - meaning don't focus on these sorts of implementation details which will likely vary greatly between different JavaScript interpreter implementations.

However, based on this JSPerf benchmark and a sample size of one (on Chrome/Mac OS X), the object literal form (o = {foo:'bar'}) is much faster than setting properties after construction (o={}; o.foo='bar').