If I Iterate Over an Objects Properties using JQuery $.each() is there an index?

Question

a = {b:'bb',c:'cc',d:'dd'};
$.each(a, function(index){
 // here 'index' is a string variable containing the property name, ie 'b', 'c' or 'd'.
}

I want the integer index of the property - is this possible without using an independent count variable?

Answer 1

You could do this:

Object.keys( a ).forEach(function ( name, index ) {
    var value = a[name];

    name // the property name
    value // the value of that property
    index // the counter
});

This is ES5 API, so you'll need es5-shim for IE8.

Answer 2

No, it's an object. When you add a new property to a JS object what position is that property supposed to be at? What if you delete a property in the middle and then add it again? What if you merge another object over the original when the merging object had like-named properties in a completely different order in its source code?

You could rig a count and it might work in a lot of cases but there's no guarantee you'd get things in the order you might expect. When order matters, you use an array. When it doesn't and you want to conveniently access things by name you use an object literal. Or you wrap an array in an object that maintains a map to array indeces when they're sorted by writing array sort methods that also sort the key/name map array.

Also, learn for/in loops. There's no reason to use jQuery to iterate a non-jQuery object. At best it will just be marginally slower.

Edit:

Well if you want a count baked in and not an index you can rely on for future reference then I'd just bake my own object type if I had to deal with IE8 since we generally try not to touch the Object constructor prototype (although for normalization to future spec I guess it's might be okay if you can do it without breaking things like for/in loops used on arrays which normally wouldn't iterate the prototype methods).

function IterableCounterObj(objLiteral){ //or perhaps something less painfully named
    this.each = function(iteratorFunc){
        var cnt = 0;
        for(var x in objLiteral){
            cnt++;
            iteratorFunc(x,objLiteral[x],cnt);
        }
    }
}

var a = new IterableCounterObj({b:'bb',c:'cc',d:'dd'});
a.each(function(name,value,count){ console.log(count); });

//too much? Here's the jQuery approach to cruft

var $i = function(objLiteral){
    return new IterableCounterObj(objLiteral);
}

$i({b:'bb',c:'cc',d:'dd'}).each(function(name,value,count){ console.log(count); });