Stuck with High order functions, please help!

1

Hi ,

Could anybody , please help me understand the below code given as an example for Higher Order function?

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 ) ;

I need help in understanding

  1. How the anonymous function (function(number)) works here

  2. when the forEach function is called , will the action(array[i]) get replaced with the actual code in the anonymous function? like below

action(array[i]) will be replaced with —> sum = sum + numbers[i] --???

  1. where is the anonymous function getting called here ??

please help me with this i’m really confused with this example and really stuck .strong text

2

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

3

You’re passing that anonymous function to the forEach function. Now when you encounter action(array[i]), you’re actually calling that anonymous function.

4

The first thing you need to know is that in javascript objects are passed as reference. So you’re getting reference to your object in the function you pass it to. For example

var a = {
  p1 : 'P1'
};

function addProp(x){
  x.p2 = 'P2';
}

console.log(a); //{ p1: 'P1' }
addProp(a);
console.log(a); // { p1: 'P1', p2: 'P2' }

As you can see, whatever changes you make to x inside your addProp function are getting reflected in your original object a. This mechanism is called Pass by reference. Where actual pointer to the parameter is passed. (Easy to understand if you have background in C\C++).

Now, functions in javascript are also Objects so they get passed by reference.

In your forEach function, you pass action as a parameter, which in turn is a function.

  1. How the anonymous function (function(number)) works here

It works the same way as your normal function would work, for example, consider following code snippet

function foo(){
  console.log('I am foo');
}

var bar = function(){
  console.log('I am bar');
}

now to call these functions you do

foo();
bar();

Now in your code, the anonymous function is referred to as action. So if you had

function action(){
}

you would call it like action()

This is exactly what you’re doing in

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

The anonymous function (called as action here) is then called with arr[i] as a parameter. And it then modifies the global variable called sum.

  1. when the forEach function is called , will the action(array[i]) get
    replaced with the actual code in the anonymous function? like below

action(array[i]) will be replaced with —> sum = sum + numbers[i] --???

NO! As mentioned about objects are passed by reference. So the same function is reused in this case.
The replacing mechanism that you mentioned here has a difference name in computer science. It is called macro. A macro will be replaced by compiler/interpreter anywhere it is referenced. Function are not replaced in line. In C/C++ these things are defined using #define and in C++ there is a dedicated class of functions called inline functions that behave this way.

Javascript doesn’t support inline function. (Although, I am not sure about this, if anyone knows, correct me if I’m wrong about JS here)

  1. where is the anonymous function getting called here ??

At the same place it is defined.

Hope this helps.

2 Likes
5

Thanks Aditya, this definitely helps, if you could clear up one more question that would help me to understand this better. if we go back to the initial function declaration itself

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

now as per my understanding from your response instead of action(array[i] ) the function(number) will be executed , but please note that this anonymous function takes in the parameter number , any idea what will get passed in as the parameter ( meaning what will get passed in as number) when the anonymous function gets executed ?

6

any idea what will get passed in as the parameter ( meaning what will get passed in as number) when the anonymous function gets executed ?

It will be called as many times as there are elements in array. And with each call, each element in your array will be passed to the function as a parameter with the alias number.

To get clear understanding of something, it often helps to put console.logs wherever you get confused.
So if your add a console.log(number) in your anonymous function, you will see what gets passed to it.

var numbers = [1 , 2 , 3 , 4 , 5] , sum = 0;
forEach ( numbers , function ( number ) {
  console.log(number);
  sum += number ;
}) ;

You will get

1
2
3
4
5

Similarly, the argument number doesn’t necessarily have to be a of type Number. It can be anything
Take a look

var Arr = [1,2,3,4,{index:5}, 'test'];

forEach(Arr, function(element){
  console.log(element);
});

you will get

1
2
3
4
{ index: 5 }
test

EDIT:

You test it live here - DarkkhakiRepentantRainbowtrout - Replit

7

Thanks very much Adity,that explains. I need to work on couple of examples to get the concept thorough. thankyou very much for the help and your patience.