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