Passing functions as parameters in JavaScript

Functions, like numbers, strings, and arrays, can be passed as parameters to other functions.

Let's take a closer look at a practical example. Let's say we have the function test that takes two parameters:

test(parameter1, parameter2);

Let's pass an anonymous function that returns 1 to the first parameter of the test function, and an anonymous function that returns 2 to the second parameter:

test( function() {return 1;}, function() {return 2;} );

The code above is not working yet because we haven't created the function itself. Let's do it:

function test(func1, func2) { }

When defining the function, we specified two parameters - func1 and func2. These parameters don't know anything about what will be transmitted in them. We can, for example, pass numbers:

test(1, 2); // call the function function test(func1, func2) { console.log(func1); // shows 1 console.log(func2); // shows 2 }

ALso we can pass the functions:

test( function() {return 1;}, // first parameter function() {return 2;} // second parameter ); function test(func1, func2) { console.log(func1); // shows 'function() {return 1;}' console.log(func2); // shows 'function() {return 2;}' }

As you can see, the source code of the functions is now printed to the console. Let's make it output their results. To do this, we write parentheses to the functions:

test( function() {return 1;}, function() {return 2;} ); function test(func1, func2) { console.log( func1() ); // shows 1 console.log( func2() ); // shows 2 }

Let's print the sum of the results of the first and second function to the console:

test( function() {return 1;}, function() {return 2;} ); function test(func1, func2) { console.log( func1() + func2() ); // shows 3 }

Make the function test that takes 3 functions as parameters. Pass in the first parameter a function that returns 1, the second - a function that returns 2, the third - a function that returns 3. Print the sum of the results of the functions to the console.

Named functions

Functions that are passed as parameters do not have to be anonymous.

Let's make them like a Function Declaration. Let's name the first function get1, and the second - get2:

function get1() { return 1; } function get2() { return 2; }

Let's pass the names of the functions get1 and get2 to the parameters of the function test (that is, their source code, not the result):

function get1() { return 1; } function get2() { return 2; } test(get1, get2); // shows 3 function test(func1, func2) { console.log( func1() + func2() ); }

Let's change it to Function Expression:

let get1 = function() { return 1; } let get2 = function() { return 2; } test(get1, get2); // shows 3 function test(func1, func2) { console.log( func1() + func2() ); }

Make the function test that takes 3 functions as parameters and returns the sum of the results of the passed functions.

Make 3 functions, declaring them as a Function Declaration and naming them func1, func2 and func3. Let the first function return 1, the second return 2, and the third return 3. Pass these functions as a parameters to the test function from the previous task.

Modify the previous task so that the functions are declared as Function Expressions with the same names.

Parameters of passed functions

Suppose we have the function test that takes another function as a parameter and print the result of this passed function to the console:

function test(func) { console.log( func() ); }

Let the passed function func take a number as a parameter and do something with it. Let's give it, for example, the number 3:

function test(func) { console.log( func(3) ); }

Let's now call the test function, passing an anonymous function as a parameter to it. This anonymous function will take a number as a parameter and return the square of that number.

As a result of all this, our construction will display the square of the number 3, that is, 9:

// Shows 9: test( function(num) { return num * num; } ); function test(func) { console.log(func(3)); }

Let's make the code more elegant:

// Shows 9: test(function(num) { return num * num; }); function test(func) { console.log(func(3)); }

Copy my function test code. Invoke this function, passing to it an anonymous function as a parameter, which will take a number as a parameter and return its cube.

Modify your code so that the passed function is not anonymous, but is defined as a Function Declaration with the name func.

Change the passed function to a Function Expression with the same name func.

Let the passed function now take two parameters and return their sum. When calling the passed function inside test, pass the number 2 and the number 3 to the passed function. Print the result with alert.

Pass a number as a parameter

Now let's not store the number that the passed function does something with inside test, but pass it as the first parameter:

function test(num, func) { // the first parameter is a number console.log(func(num)); }

Let's use our function:

function test(num, func) { console.log(func(num)); } // Shows 4: test(2, function(num) { return num * num; });

For the convenience of our construction: we have one function test that takes a number as a parameter. But what will happen to the number is not hardcoded in the test function.

We can, for example, use the second parameter of the function test to pass a squaring function, or we can, for example, cube function:

function test(num, func) { console.log(func(num)); } // Find the square of a number: test(2, function(num) { return num * num; // returns a square }); // Find the cube of a number: test(2, function(num) { return num * num * num; // returns a cube });

Let the function test take a number as the first parameter, and functions as the second and third parameters that also take numbers.

Let the function test return the sum of the results of the passed functions:

function test(num, func1, func2) { return func1(num) + func2(num); }

Invoke the function test, passing the number 3 as the first parameter, the function that squares the number as the second parameter, and the function that raises the number to the cube as the third parameter. Output the result to the console.

Application

Let's make a function that will take an array as a parameter, and a function as the second parameter. The passed function will need to be applied to each element of the array:

function test(arr, func) { // returns the modified array }

An implementation:

function test(arr, func) { // Loop starts: for (let i = 0; i < arr.length; i++) { arr[i] = func(arr[i]); // apply the function to each element } return arr; // returns modified array }

Let's apply our function to some array:

function test(arr, func) { for (let i = 0; i < arr.length; i++) { arr[i] = func(arr[i]); } return arr; } // Let's convert an array of numbers into an array of their squares: let result = test( [1, 2, 3], function(num) {return num * num;} ); console.log(result); // shows [1, 4, 9]

Let's make our function call more elegant (it's more common way):

function test(arr, func) { for (let i = 0; i < arr.length; i++) { arr[i] = func(arr[i]); } return arr; } // Let's make the code more elegant: let result = test([1, 2, 3], function(num) { return num * num; }); console.log(result); // shows [1, 4, 9]

Without looking into my code, implement the same function test on your own.

Call the function test you created, passing it an array of numbers as a parameter. Make the function return an array with the cubes of these numbers.

enru