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.

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.

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);