CODEWITHSUNDEEP
jquery
thanks_in_advance
thanks_in_advance

Reputation: 2743

jQuery.each() -- how does jQuery know whether argument is index, key, value or object?

Say something like this:

$.each(json_object_or_array, function(arg1, arg2) {

      //do something
});

I've seen cases where arg1 , arg2 are i or index or key or val or value or obj or even random names that are implicitly referring to one of these. For example, I've seen function(key, val) also presented as function(name, val). How does jQuery know that name here is referring to key?

How does jQuery know what we're referring to?

Upvotes: 0

Views: 73

Answers (3)

Amadan
Amadan

Reputation: 198388

Not by knowing English. What variable names you use is completely arbitrary - the parameter names are only pertinent within the function. The index (or i, or key) is the first argument; the value (or obj, or val) is the second.

EDIT: If you are asking how jQuery.each knows whether it should iterate as if the collection was an array or as if it was an object - it tries to detect it from the collection itself. Sometimes it missed, especially in older versions of jQuery.

var weird = {
  length: 2,
  width: 7,
  breadth: 8
};

$.each(weird, function(k, v) {
  console.log(k, v);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

Here, it thinks we are dealing with an array because it has length, so it starts counting indices. Newer jQuery will do it correctly, and display the object's attributes:

var weird = {
  length: 2,
  width: 7,
  breadth: 8
};

$.each(weird, function(k, v) {
  console.log(k, v);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 3

Jai
Jai

Reputation: 74738

Although answer is been chosen but i want to explain my thoughts:

The below snippet is taken from jQuery library here you can see what it does internally. You can see the if conditions are there where it checks for the object to be an Array or Object.

It internally creates a loop if passed element is an Array like object then use standard for loop for iterations: 

for(;;){}

if object then use for....in loop: 

for(var key in object){}

so this snippet shows the usage: 

// args is for internal usage only
each: function( obj, callback, args ) {
    var value,
        i = 0,
        length = obj.length,
        isArray = isArraylike( obj ); // <---this checks the passed obj is [] || {}

    if ( args ) {
        if ( isArray ) { // <----------------------if [] then use standard for loop
            for ( ; i < length; i++ ) {
                value = callback.apply( obj[ i ], args );

                if ( value === false ) {
                    break;
                }
            }
        } else { // <------------------------------if {} then use for..in loop 
            for ( i in obj ) {
                value = callback.apply( obj[ i ], args );

                if ( value === false ) {
                    break;
                }
            }
        }

    ........
},

here is the isArrayLike() method: 

function isArraylike( obj ) {

    // Support: iOS 8.2 (not reproducible in simulator)
    // `in` check used to prevent JIT error (gh-2145)
    // hasOwn isn't used here due to false negatives
    // regarding Nodelist length in IE
    var length = "length" in obj && obj.length,
        type = jQuery.type( obj );

    if ( type === "function" || jQuery.isWindow( obj ) ) {
        return false;
    }

    if ( obj.nodeType === 1 && length ) {
        return true;
    }

    return type === "array" || length === 0 ||
        typeof length === "number" && length > 0 && ( length - 1 ) in obj;
}

Upvotes: 1

Parth Trivedi
Parth Trivedi

Reputation: 3832

$.each is a generic iterator function.

If it is Array then it will be index value , If it will be object then it has key value. Based on $.each(object/Array).

You can check type based on 

jQuery.type( new Array() ) === "array" or  


jQuery.type( new Object() ) === "object"

jQuery internally check type and basied on that whole thing works.

Upvotes: 2

Related Questions