How argument is being passed in the function(which itself is an argument) in JavaScript

Question

I have a very basic question about JavaScript. Consider the following code:

var numbers = [4,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item,index,array) {
    alert(arguments.length);
    return (item > 1);
});

Now in the above code I am passing anonymous function as an argument of "every" function. How exactly my anonymous function is getting the exactly 3 arguments(item,index,array).

Answer 1

The anonymous function you're passing is simply provided as argument for every() method which calls it for a number of times. every() iterates through your list items and calls your anonymous function each time with three arguments: value, index and your entire array.

Here's an approximate source code of how the actual every() function works:

Array.prototype.every = function(callback) {
    for(i=0; i<this.length; i++) {
        callback(this[i], i, this);
    }
}

Answer 2

This isn't really a basic javascript question, but a library question, and how it "happens" depends on the implementation.

This here is a sample implementation of every in javascript:

function every(array, fn) {
    for(var i = 0; i < array.length; i++) {
        fn(array[i], i, array);
    }
}

You would call it like this:

every([1,2,3,4], function(item, index, array) {
    // do stuff
});

As you can see, it's the every function itself, that calls the fn (which is the function you pass in), and decides what arguments to pass.

Answer 3

Let's build a simple function with a callback argument:

function foo(callback)
{
    var callbackArgument = 'bar';
    callback(callbackArgument);
}

Let's use it:

foo(function(arg){
  console.log(arg);
}); // logs "bar" to the console!

Answer 4

How exactly my anonymous function is getting the exactly 3 arguments(item,index,array)?

Maybe it would be easier to understand with an alternative example You have:

var numbers = [4,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item,index,array) {
alert(arguments.length);
return (item > 1);
});

You could also write the same in the following manner:

var numbers = [4,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(item,index,array) {

function anonymous(firstVar,secondVar,thirdVar){

//do your anonymous stuff here
alert(thirdVar.length);
return (firstVar > 1);

}

//get the anonymous function processed data
var anonymousFunctionResults = anonymous(item,index,array);

//do your original stuff that you would have done with the results of anonymous function
anonymousFunctionResults...
}
});

Or in this way:

function anonymous(firstVar,secondVar,thirdVar){

//do your anonymous stuff here
alert(thirdVar.length);
return (firstVar > 1);

}

var numbers = [4,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(item,index,array, anonymous) {

//get the anonymous function processed data
var anonymousFunctionResults = anonymous(item,index,array);

//do your original stuff that you would have done with the results of anonymous function
anonymousFunctionResults...
}
});

Or in this way:

function anonymous(firstVar,secondVar,thirdVar){

//do your anonymous stuff here
alert(thirdVar.length);
return (firstVar > 1);

}

var numbers = [4,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(anonymous(item,index,array)) {

//get the anonymous function processed data 
//you can use the "firstParameter" variable already of course 
//this is just to make a point
var anonymousFunctionResults = firstParameter;

//do your original stuff that you would have done with the results of anonymous function
anonymousFunctionResults...
}
});

If I understood your question well :)