6

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;
}
Improve this question
1
  • 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. Commented Jun 22, 2011 at 4:27

6 Answers 6

Reset to default
13 
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Thanks @alex. Looks like someone disagrees with you. :o)
@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.
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).
@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).
@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.
|
1

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);
}
Improve this answer

3 Comments

yes but the outer function takes no arguments at all. How is it possible for the inner function to take arguments?
@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.
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
1

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.

Improve this answer

Comments

0

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
}
Improve this answer

1 Comment

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.
0

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];
Improve this answer

Comments

0

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...

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.