Question

I’m working on a very, very, very simple library to provide some convenience functions for working with native JavaScript objects, ideally (eventually) in a jQuery-like manner.

I have a dead-simple function: crawlObject which I modified to use jQuery’s each() instead of a for(var key in obj) loop.

function crawlObject(thisObj, onSuccess, doRecursion) {
    var stopCrawling = false;
    if (isFunction(onSuccess) && ($.isPlainObject(thisObj) || isArray(thisObj))) {
        $.each(thisObj, function(childKey, value) {
            var childObj = thisObj[childKey];
            if (false === stopCrawling) {
                stopCrawling = isTrue(onSuccess(childObj, childKey, thisObj, value));
            }
            if (false === stopCrawling && doRecursion) {
                stopCrawling = isTrue(crawlObject(childObj, onSuccess, doRecursion));
            }
        });
    }
    return stopCrawling;
}

This has the advantage of crawling both Array objects and “plain” JS objects without additional logic.

But.

If I pass a “plain” JS object which happens to have a property name of ‘length’, each() implodes like a dysfunctional phoenix. This might happen if I am recursing on a large object defining DOM elements, which might include a length property intended to indicate a character display length in the UI. A value of 200 here is disastrous: suddenly each() is iterating 0-199 on the value of the prop.

Before I invest in any further refactoring, has anyone stumbled on a solution to this problem?

Answer 1

jQuery’s documentation for jQuery.each() clearly states that if the object has a .length property, then it iterates by numeric index from 0 to length-1 (like you would expect for an array or array-like object).

If you have an object with a .length property and the things you want to iterate are not numeric indexes from 0 to length-1, then jQuery.each() will not do what you want and you should not be using it.

Here’s the specific code for jQuery.each() from the jQuery source. You can see on the 2nd and 3rd lines of the function that if there’s an object.length, isObj will be false and it’s not going to treat is as an object later:

// args is for internal usage only
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;
},