In javascript, when to use object literal and when to use array?

Question

Here's a sample. My concern is both seem to do the job. which of them to prefer?

var fooArr = [{ "bar": {"blah": 9 } }];
for(var i in fooArr) {
 var value = fooArr[i].bar.blah;
console.log(value); //checking in firebug console
}
var fooObj = { "bar": {"blah": 9 } };
for(var i in fooObj) {
 var value = fooObj[i].blah;
console.log(value); //checking in firebug console
}

Also, the following seems to be not valid, Any way of avoiding array notation.

var fooObj1 = {
 { "bar": { "blah": 9 } },
 { "bar": { "blah": 4 } },
 { "bar": { "blah":12} }
};

So I had to modify the above code to something like below which works. Is it too too bad to be too much sticky with Object literals

var fooObj1 = {
 1:{ "bar": { "blah": 9 } },
 2:{ "bar": { "blah": 4 } },
 3:{ "bar": { "blah":12} }
};

Thanks again and in advance to those who help me with the query.

• Abhijit: I've linked this to an existing question that partly answers my query. "...JavaScript object simply do not have a length property, only Arrays do. If you want to know the number of properties that are defined on a object, you have to iterate over them and count them..." stackoverflow.com/questions/4690520/…
• Erik Reppen: Why are you avoiding array notation? It looks like you want a list of objects. An object is just a bunch of name/value pairs. In the 2nd example you have 3 sets of objects with no names to refer to them by.

Answer 1

The sample doesn't really compare objects and arrays. You're just adding a needless layer by putting an object in the first element of an array.

Use an object when you have to refer to something by name.

var obj = {}

//3 ways of doing the same thing:

var obj.newName = 'bob';
var obj['newName'] = 'bob';
var name = 'newName';
var obj[name] = 'bob';

The 2nd style isn't really necessary and might actually be a touch slower to access than the 1st but it helps you understand how the 3rd can be useful. Or you could have done the following outright:

var obj = { newName:'bob' }

If you want a bunch of names in an object, it would get a bit silly:

var obj = { newName:'bob', anotherNewName:'sue', yetAnotherNewName:'billy' }
obj.newName === 'bob'
obj.anotherNewName === 'sue'
//etc...

That's what arrays are for.

var listOfNewNames = ['bob','sue','billy']
listOfNewNames[0] === 'bob'
listOfNewNames[1] === 'sue'
//etc...

Of course, nothing prevents you from assigning an array to an object property:

obj { listOfNewNames:['bob','sue','billy'] }
obj.listOfNewNames[0] === 'bob'

Or, as demonstrated above, multiple objects in an array:

var listOfMonsters = [
 { monsterName:'Grarrr',eats:'people' },
 { monsterName:'Wadsworth',eats:'other monsters'}
];
listOfMonsters[1].monsterName === 'Wadsworth'

Objects are typically more about keeping groups of related values and methods together for ease of reference. Arrays are just a list of stuff that all can typically be assumed to apply to or derive from the same thing.

Answer 2

A for .. in loop iterates over enumerables. You might want to read up on it.

If you have an array of objects I would suggest a traditional for loop:

var fooObjs = [ {bar: "blah"}, {bar: "blah2"} ];
for (var i = 0, j = fooObj.length; i < j; i++) {
 console.log(fooObjs[i].bar);
}

If you have an object with multiple properties, then you could use the for .. in loop:

var fooObj = { bar: "blah", baz: "blah2" };
for (var i in fooObj) {
 if (fooObj.hasOwnProperty(i)) { // So you don't log prototype properties
 console.log(fooObj[i]);
 }
}

Answer 3

Use an array when you know you'll have more than one objects. A one item array isn't needed when only one object will be used.

As you can see, the syntax is also a bit more complex (you have [...] and bar when using arrays -> more characters are used), so don't use it if you don't need to.

Answer 4

Use array if you need lists and use objects if you need properties.

In the above case, I would prefer the latter one.

Aside from that, never use for in on an array (it is extremely slow and defeats the purpose) and always use hasOwnProperty when iterating over an object's properties.

• Abhijit: aha, performance aspect of "for in" was great to know. Thanks.

Answer 5

You use an array when you need to use more than one item. Example:

var fooArr = [{ bar: { blah: 9 } },{ bar: { blah: 4 } },{ bar: { blah: 12 } }];
for(var i in fooArr) {
 var value = fooArr[i].bar.blah;
 console.log(value); // will log "9", "4" and "12"
}

In the second example you only have a single object, so you don't need the the loop at all to access the property:

var fooObj = { bar: { blah: 9 } };
var value = fooObj.bar.blah;
console.log(value);