foreach function in javascript

Question

Ok my questions comes from an example from a book that i'm trying to understand.Keep in mind i just got into javascript.

So we have the object set and we define the function foreach. It takes another function as a parameter and invokes it for every item of an array "values" that belongs to set.

set.foreach = function(f,c) {
 for(var i = 0; i < this.values.length; i++) 
 f.call(c,this.values[i]);
};

So far so good..

But i can't understand the usage of the foreach function in the second snipet.In particular i don't understand the role of the variable v. It is not defined enywhere else in the book and i m having a really hard time to understand how this work.We define another function in set to take the values as an array

set.toArray = function() {
 var a = [];
 this.foreach(function(v) { a.push(v); }); //where did v came from???
 return a;
}

• vol7ron: I'm more surprised you didn't ask about the lack of the function names. Parameters are pretty basic, but if you're getting this far, you're doing well in learning JS.

Answer 1

set.foreach = function(f,c) {
 for(var i = 0; i < this.values.length; i++) 
 f.call(c,this.values[i]);
}; // ^-------------- being passed right here

The function you passed in is f, and f is invoked having the this value of its calling context set to c, and this.values[i] passed as the first argument.

 // ------v---------your function "f" in the forEach
this.foreach(function(v) { a.push(v); });
 // ------------^------references the first argument (after the "this" arg)
 // that was passed to "f"

---

Here's a simpler example:

This function accepts a function as a parameter. The only thing it does is call the function:

function my_func( fn ) {
 fn();
}
 // call my_func, which will call the function you give it
my_func( function() { alert( "hi" ); } );

Live Example: http://jsfiddle.net/6a54b/1/

...so passing the function to my_func will alert the string "hi". No surprise.

---

But what if my_func provided the value to be alerted?

function my_func( fn ) {
 fn( "message from my_func" ); // call the fn passed, giving it an argument
} // ^------------------------------------------------|
 // |
 // v------references the arg passed by my_func---|
my_func( function( arg ) { alert( arg ); } );

Live Example: http://jsfiddle.net/6a54b/

Now you can see that an argument is being passed to the function we're sending over, and we reference that argument with the arg parameter.

It alerts whatever my_func gave it.

---

We can even take it one step further, by passing a second argument to my_func that my_func will simply take and pass it to the function we pass in.

function my_func( fn, str ) {
 fn( str ); // call the fn passed, giving it
} // the string we passed in
 // v------the arg we passed here-----v
my_func( function( arg ) { alert( arg ); }, "I'm getting dizzy!" );

Live Example: http://jsfiddle.net/6a54b/2/

And you can see that both arguments are given to my_func, and my_func calls the function we passed in, passing it the string argument we gave it.

• user113716: Thanks @alex. Looks like someone disagrees with you. :o)
• user113716: @TAL: arg is the defined as the parameter to the function. Its value is assigned by the "message from my_func" string that my_func is passing to it.
• RobG: Patrick - "setting c to the this value in the calling context" is not correct. The call method sets the this value of the called function (i.e. f's this, not foreach's this). It is not c that is being set but f's this. No value is passed anyway to f's this resolves to the global object or null (depending on ES5 strict or other code).
• user113716: @TAL: You've got to realize that the function is an Object that can be passed around. When we pass the function object to my_func, it can invoke that function, and pass whatever arguments it wants to it. The function will then be executed with whatever arguments it was given (if any).
• user113716: @RobG: Yes, that's the calling context I was referring to. The context of f which is being invoked. I'll clarify. I could have said "having its calling context set" instead.

Answer 2

The variable vis an argument being passed to the function. It allows you to work with whatever the function receives. It is no different than namein the following example:

function sayHello(name) {
 console.log('Hello '+name);
}

• TAL: yes but the outer function takes no arguments at all. How is it possible for the inner function to take arguments?
• David Tang: @TAL The "inner" function is being given arguments by the foreach function - foreach is the function that calls it, and the only one that can give it arguments, not the "outer" (toArray) function.
• user578895: the outer function takes an argument, of sorts, the set itself which is referred to as this. so setA.foreach(...) is different than setB.foreach(...) because inside the foreach function, this will refer to setA or setB

Answer 3

f.call mean calling function f with arguments this.values[i]. this in foreach is set. about calling foreach from toArray, passing function with v, the values[i] in foreach become v in toArray.

Answer 4

v in this case is being passed in from the call statement f.call(c, this.values[i]). Specifically, it is this.values[i]

The above statement is equivalent to simply:

f(this.values[i])

where f is the function in your 2nd snippet (function(v){ a.push(v); });)

The reason it's typed as .call instead of just calling it is so that the this property can be set, so this in your 2nd function is the array itself, meaning you could type:

function(v){
 alert(this.length); // "this" == array
}

• RobG: That's a little confusing. In set.toArray, no value is passed to the c parameter of foreach, therefore when the function is called, c will be undefined so the function's this will be set to the global object (except in ES5 strict where it will be null). But that doesn't matter since this isn't used by the function. This is a really inefficient toArray function, I guess it's an example only.

Answer 5

v represents each item in the list as your foreach() function loops through them.

so if you have 10 items in your "set" the function will be called 10 times, providing each item in the set to the function as argument v

for example:

set = [1,2,3,4,5];
set.foreach = function(fn, context) {
 for(var i = 0; i < this.values.length; i++) {
 fn.call(context, this.values[i]);
 }
};
set_times_2 = [];
set.foreach(function(item) {
 set_times_2.push(item);
 set_times_2.push(item);
});
// this is true now:
set_times_2 == [1,1,2,2,3,3,4,4,5,5];

Answer 6

Lots of answers, here's one that specific to your question.

> this.foreach(function(v) { a.push(v); }); //where did v came from???

In the function expression passed to foreach, v is a formal parameter. Including an identifier as a formal parameter is more or less equivalent to declaring it in the function body with var. Maybe it's clearer if written as:

this.foreach( function (v) {
 a.push(v);
});

or not...