I read on Javascript: The Good Parts...

Since JavaScript’s arrays are really objects, the for in statement can be used to iterate over all of the properties of an array. Unfortunately, for in makes no guarantee about the order of the properties...

As far as I know the "each" functions are based in for in, then does each function form JQuery and Underscore libraries guarantee order when they iterate over an Array? I'm trying to avoid the annoying standard for.

Thank you in advance.

I read on Javascript: The Good Parts...

Since JavaScript’s arrays are really objects, the for in statement can be used to iterate over all of the properties of an array. Unfortunately, for in makes no guarantee about the order of the properties...

As far as I know the "each" functions are based in for in, then does each function form JQuery and Underscore libraries guarantee order when they iterate over an Array? I'm trying to avoid the annoying standard for.

Thank you in advance.

• javascript
• jquery
• each
• underscore.js

• 1 Make sure you're clear on what an Array is and what an Object is in JavaScript ... – Pointy Commented May 24, 2012 at 15:06

2 Answers 2

When iterating through an array, order is always guaranteed. It's when you iterate through (non-array) objects is when there's no guarantee. Arrays are still objects by the way.

each is no more than a for in for objects, and for for array-like. the framework determines the right loop for the job and the same logic applies: Arrays iterations are orderly while object iteration isn't.

Underscore's source:

var each = _.each = _.forEach = function (obj, iterator, context) {
        if (obj == null) return;
        if (nativeForEach && obj.forEach === nativeForEach) {
            obj.forEach(iterator, context);
        } else if (obj.length === +obj.length) {
            for (var i = 0, l = obj.length; i < l; i++) {
                if (i in obj && iterator.call(context, obj[i], i, obj) === breaker) return;
            }
        } else {
            for (var key in obj) {
                if (_.has(obj, key)) {
                    if (iterator.call(context, obj[key], key, obj) === breaker) return;
                }
            }
        }
    };

jQuery's source:

each: function (object, callback, args) {
    var name, i = 0,
        length = object.length,
        isObj = length === undefined || jQuery.isFunction(object);
    if (args) {
        if (isObj) {
            for (name in object) {
                if (callback.apply(object[name], args) === false) {
                    break;
                }
            }
        } else {
            for (; i < length;) {
                if (callback.apply(object[i++], args) === false) {
                    break;
                }
            }
        }
        // A special, fast, case for the most common use of each
    } else {
        if (isObj) {
            for (name in object) {
                if (callback.call(object[name], name, object[name]) === false) {
                    break;
                }
            }
        } else {
            for (; i < length;) {
                if (callback.call(object[i], i, object[i++]) === false) {
                    break;
                }
            }
        }
    }
    return object;
}

There are two ways you can loop over an array: a numeric loop over the indexed elements of an array, or a for in loop over the object properties of an array.

var a = ['a','b'];
a[3] = 'e';
a[2] = 'd';
a.foo = function() { };
for(key in a)
    console.log(key);

This returns 0 1 3 2 foo, since that is the order the properties were defined (but there's no promise that your browser even needs to exhibit that behavior, either).

So far, numerical loops look superior, but they can't handle spare arrays, i.e., arrays with gaps. The ES5 Array.forEach omits unspecified values, while jQuery's $.each uses a numeric loop based on the length property.

var a = [1,2];
a[1000000] = 4;
a[9000] = 3;
a.foo = function() {};

// outputs 0, 1, 9000, 1000000 -- note they are in order
a.forEach(function(elem, index){ console.log(index); })

// outputs 0, 1, 9000, 1000000 -- same as above
_.each(a, function(elem, index){ console.log(index); }) 

// outputs a million values and locks up  your browser for a while
$.each(a, function(index){ console.log(index); })

So, both forEach and $.each return your values in index order, but forEach and Underscore seem superior for sparse arrays, since they ignore indexes that have not had a value assigned to them.