Question

If there’s anyone who can help me understand this one, I will be impressed. It’s #28 from John Resig’s advanced JavaScript.

Here’s a function for looping, and, if you look at the tutorial, it seems to run 3 times producing the 6 Pass below.

Can you please explain in plain language in as much detail as possible what is happening in this program, explaining along the way:

1. fn.call(array, array[i], i) Why are there these 3 parameters to the function and how do they all work. Does the function first deal with array, then array[i], and then i? What’s happening when all that is going on?

2. Also, in the function, I understand that i++ goes up every time that it goes through the array.length, but what triggers num++ to increase it’s value, and in what way is value == num++

3. In function(value, i), what is value? Is value alternately 0,1,2 of the loop array? If so, how do those loop array numbers get passed as a parameter in function(value, i)

4. this instanceof Array what is this trying to show? How?.

Code:

function loop(array, fn){ 
  for ( var i = 0; i < array.length; i++ ) 
    fn.call( array, array[i], i ); 
} 
var num = 0; 
loop([0, 1, 2], function(value, i){ 
  assert(value == num++, "Make sure the contents are as we expect it."); 
  assert(this instanceof Array, "The context should be the full array."); 
});

PASS Make sure the contents are as we expect it.
PASS The context should be the full array.
PASS Make sure the contents are as we expect it.

PASS The context should be the full array.
PASS Make sure the contents are as we expect it.

PASS The context should be the full array.

Answer 1

The function is an anonymous function, that is, a function without a name. The full second argument to loop is

function(value, i) {
  assert(value == num++, "Make sure the contents are as we expect it.");
  assert(this instanceOf Array, "The context should be the full array.");
}

which is a complete anonymous function which takes three arguments: this (the object for which it is a method), the current value, and the loop counter.

loop iterates over the array, and uses fn.call to invoke the anonymous function, passing it three arguments; here, the array object must be explicit, because call can’t know what context the function reference it’s being invoked on should be invoked in (that is, what to make this in the call).

The anonymous function, as invoked by loop, receives the array as this. The second ASSERT verifies this. It also expects that the array’s value is [0, 1, 2] and verifies this by incrementing num on each call and comparing that to the passed array element.

So, following the execution chain:

1. num is declared and initialized to 0.
2. loop([0, 1, 2], function ...) is invoked.
3. loop invokes fn, the anonymous function, with the array (as this), its first element, and i which indicates the element offset. (i is never actually used.)
4. The anonymous function ASSERTs that it was passed the expected first element, 0, by comparing against num and incrementing num afterward.
5. The anonymous function ASSERTs that its this is an Array.
6. loop invokes fn as in #3, but with the second array element.
7. The anonymous function again performs its ASSERTs, this time comparing the passed second array element, which is expected to be 1, against num (which, because of the post-increment in step 4, is 1).
8. loop invokes fn as before with the third array element.
9. The anonymous function does its ASSERTs again, this time comparing the expected array element 2 against num whose value is now 2.