Function Values and How Are They Executed (How They Work)?

Question

I'm going through Eloquent JavaScript book and am on chapter 5 (Higher-Order Functions) currently. I'm doing good so far and have understood material clearly, but I've come to realize that I don't understand what function values are exactly and how they work. I do understand what functions are and am quite comfortable with the syntax of creating them using the function keyword as you would do in C for example.

Assume the following code from the book:

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

var numbers = [1, 2, 3, 4, 5],
    sum = 0;

forEach(numbers, function(number) {
    sum += number;
});

console.log(sum);

How does the forEach function, when called, determine what is the number? How does it extract number from the numbers array. I do understand that action argument in the definition of forEach function "hooks" the action to the element which is currently pointed by the for loop, but I interpret the code as follows:

function(number) {sum += number;}action(array[i])

which doesn't make much sense.

If you could shed light on this issue I'd be more than thankful and also explain what the function value is exactly? How does it differ from function and/or function return value?

Thank you.

In other words `(function(number) {sum += number;})(array[i]);` is what should replace `action(array[i]);` and then if you apply a reduction one gets `sum += array[i];` — Dan D., Feb 26 '15 at 21:06

score 0 · Answer 1 · edited May 23 '17 at 12:08

I don't understand what function values are exactly and how they work

A function (in JavaScript) is an object that can be called. A function call is nothing special, it is just any expression (like a variable evaluation) followed by a pair of parenthesis with arguments in between.

You could write

var addToSum = function(number) {
    sum += number;
};
forEach(numbers, addToSum);

or

function addToSum(number) {
    sum += number;
}
forEach(numbers, addToSum);

and it means basically the same: You have a function object, a variable addToSum that refers to it, and it is passed to the forEach call.

How does the forEach function, when called, determine what is the number?

It doesn't know anything about the numbers. All the forEach function sees are an array value (referred to by the parameter name array) and a function value (referred to by the parameter name action). Then it loops over that array, and calls the action function with each of the elements. Only inside the called function this array element is know as number.

I interpret the code as follows: function(number) {sum += number;}action(array[i]) which doesn't make much sense.

If you expand the variable to its value, the variable name disappears:

(function(number) {sum += number;})(array[i]);

which does actually make sense - as I've written above, a function call is just an expression followed by parenthesis. And that expression needs to evaluate to a callable object, which this function expression does.

You might also rewrite it as

function action(number) { sum += number; }
action(array[i]);

if that make more sense to you.

score 0 · Accepted Answer · answered Feb 26 '15 at 20:46

From what I've understood, I think that you are being confused by the JavaScript callback function.

In javascript, a function like this:

Look at your code:

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

forEach(numbers, function(number) {
  ...

For each item of the array (first argument, accessed via array[i]) you are calling action with that value, action(array[i]).

In forEach(numbers, function(number) {, you have passed action (the second argument) as a function with one input. This is the function being called by forEach with each array element. With each pass of the for loop within forEach, this function is called with the new value.

I think trying this with other examples (just start your js console now and begin messing around) will help you to learn this concept.

If I made a function

function run(callback){
  callback();
}

and called it like so:

run(function(){
  console.log('foo bar baz');
});

I'd expect to see "foo bar baz" printed to the console.

If I now make a new function, and call it,

function withTheAnswer(callback){
    callback(42);
}

withTheAnswer(function(theAnswer){
  alert('The answer is ' + theAnswer);
});

I'd expect 42 to be alerted.

Honestly, as you start to learn more about JS, you'll see this used a lot, and therefore fully understand it.

Erik Lucio · Answer 3 · 2015-02-26T21:01:29.997

0

action attribute is a function. This function doesn`t called until you put: 'action([a number])'. Then inside the for loop for each element of array attribute is called the function action with corresponding number. As @theonlygusti says this function are called callbacks.

edited Feb 26 '15 at 21:01

answered Feb 26 '15 at 20:55

Erik Lucio

948
7
8

Function Values and How Are They Executed (How They Work)?

3 Answers3