creating a JS object: use literal notation or set variables?

Question

Which is faster and/or more performant, or does it really not matter and is up to preference?

Option 1: using object literal notation:

var Company = {
    colors : ['#000000', '#ffffff'],
    answers : ['A','B','C','D'],
};

Option 2: not sure what this is called but I've seen it especially with classes and prototypes

var Company = {};
Company.colors = ['#000000', '#ffffff'];
Company.answers = ['A','B','C','D'];

or does it really not matter and is up to preference : No, it doesn't nowadays — Yang, Dec 05 '14 at 14:06
*"Which is faster and/or more performant"* - YAIPQ (Yet Another Idle Performance Question). Have you measured? Why not? Does it matter? Explain where and why it matters, exactly. Because if you don't this question is completely useless. — Tomalak, Dec 05 '14 at 14:09
It depends on the browser which is faster. There is also a third option (instantiating). — , Dec 05 '14 at 14:23
Option 1 is probably slightly faster, you could use constructor functions and prototype to create instances as well: http://stackoverflow.com/questions/16063394/prototypical-inheritance-writing-up/16063711#16063711 — HMR, Dec 06 '14 at 00:03

score 0 · Accepted Answer · answered Dec 05 '14 at 14:29

It depends entirely on the browser and how it currently try to optimize and run the code. For example, using renatoargh's test, Chrome is faster with option 2, Firefox with option 1.

There is also a third option, function object which can be instantiated:

function Company(colors, answers) {
    this.colors = colors;
    this.answers = answers;
}

var company = new Company(['#000000', '#ffffff'], ['A','B','C','D']);

This is the slowest option in FF while in Chrome it is second fastest (updated test).

In conclusion, you cannot determine which technique is fastest as it all depends. Use what suits your pattern best.

creating a JS object: use literal notation or set variables?

1 Answers1