AlgoDaily - Higher Order Functions in Javascript

Home > Frontend Engineering and Javascript > Javascript Fundamentals > Higher Order Functions in Javascript

A function is a chunk of code intended to reduce code repetition and enhance code quality. JavaScript, a function-based programming language, leverages higher-order functions to integrate the concept of abstraction.

Today, we will discuss the concept of higher-order functions in JavaScript and how to use them effectively. However, let's first comprehend the notion of functional programming to understand the underlying concepts of higher-order functions.

Functional programming:

JavaScript can be used in many different paradigms. For example, functional programming is one of the many programming paradigms that it supports.

Functional programming enables us to deal with pure mathematical functions. In addition, it permits programmers to structure and build code with the help of functions. JavaScript may implement higher-order functions because functions are treated as first-class citizens in functional programming.

Functions as first-class citizens:

JavaScript considers functions first-class citizens, allowing them to work equally to other data types, including strings, objects, arrays, etc.

The following operations can be performed when functions are considered as first-class citizens:

They are assigned to a variable.
Incorporate them as object characteristics.
Use arrays to store them.
Use them as function arguments or function returns.

Higher-order functions are only conceivable since functions in functional programming are treated as first-class citizens.

Now that we've discussed the fundamental principle of JavaScript that allows us to develop higher-order functions, let's dive into higher-order functions in JavaScript.

Higher-order functions:

Higher-order functions accept functions as input and return a function as an output. Examples of Higher-Order functions include a map, filter, and reduce, all of which may be used with the Array.prototype.

Let's examine several instances of each circumstance to better comprehend it.

Are you sure you're getting this? Click the correct answer from the options.

What are higher-order function in JavaScript?

Click the option that best answers the question.

A form of object-oriented programming code used to make dynamic content for web browsers
Higher-order functions accept functions as input and return a function as an output
Higher-order functions generates a shallow duplicate of a piece of an array
None of the above

The function that accepts other functions as a parameter:

Let's look into an example that illustrates how a function accepts other functions as a parameter:

xxxxxxxxxx
 
const names= ['John', 'Tina','Kale','Max']
​
function useFunction(arr,function_as_argument){
    for(let i=0; i<arr.length; i++){
    function_as_argument(arr[i]);
    }
}                                
function function_as_argument(name){
  console.log("Hello " + name );
}
​
useFunction(names,function_as_argument);

The output for the above code is

JAVASCRIPT

1Hello John
2Hello Tina
3Hello Kale
4Hello Max

In the preceding code, our useFunction() accepts function function_as_argument() as a parameter that manipulates array items based on the function function_as_argument().

Functions Returning other Functions:

Let's look into an example that illustrates how functions return other functions:

xxxxxxxxxx
 
const names= ['John', 'Tina','Kale','Max']
​
function returnFunction(arr) {
    return function secondFunction(y) { 
        console.log("First argument is an array: "+ arr);
        console.log("Argument passed to second Function is "+ y ); 
    };
}
 
const myFunc = returnFunction(names); 
myFunc("a string.");
returnFunction(names)("a string.");

The output for the above code is

JAVASCRIPT

1First argument is an array: John,Tina,Kale,Max
2Argument passed to second Function is a string.
3First argument is an array: John,Tina,Kale,Max
4Argument passed to second Function is a string.

The returnFunction() function in the preceding code is a higher-order function since it outputs the function secondFunction(), which requires an additional parameter y.

Functions that Accept other Functions as Parameters and Return the Functions:

Consider the following program that updates an array and prints it out along with an input passed to the inner function.

xxxxxxxxxx
 
const names= ['John', 'Tina','Kale','Max']
function useReturnFunc(arr,fn) {
    for(let i = 0; i < arr.length; i++) {
            arr[i]= fn(arr[i]) ;
    }
    return function secondFunction(y) {
        console.log("First argument is an array: "+ arr);
        console.log("Argument passed to secondFunction is "+ y ); 
    };
} 
function argFn (name){
  return("Hello " + name );
}
useReturnFunc(names,argFn)("a string.");

The output for the above code is:

JAVASCRIPT

1First argument is an array: Hello John,Hello Tina,Hello Kale,Hello Max
2Argument passed to secondFunction is a string.

A higher-order function, useReturnFunc(), takes the function fn() as an input argument and returns another function, secondFunction().

Functions of higher order that abstract over actions:

In addition to implementing abstraction on values, higher-order functions can also implement abstraction on actions. The following code uses examples to illustrate how it can implement abstraction over actions.

xxxxxxxxxx
 
const intArr = [3,10,25,1,7]
function filterArr(arr) {
    const newArray = [];
    return function greaterThan(m){
        for(let i=0; i<arr.length; i++){
            if(arr[i] > m){
            newArray.push(arr[i]);
            }
        }
        console.log("Elements that are greater than m = "+ m + " are: "+ newArray);
    }
}
filterArr(intArr)(9);

Let's test your knowledge. Click the correct answer from the options.

What would be the output for the following code?

JAVASCRIPT

1const intArr = [3,10,25,1,7]
2function filterArr(arr) {
3    const newArray = [];
4    return function greaterThan(m){
5        for(let i=0; i<arr.length; i++){
6            if(arr[i] > m){
7            newArray.push(arr[i]);
8            }
9        }
10        console.log("Elements that are greater than m = "+ m + " are: "+ newArray);
11    }
12}
13filterArr(intArr)(9);

A. Elements that are greater than m = 9 are: 10,25

B. Elements that are greater than m = 10 are: 11,26

C. Elements that are greater than m = 9 are: 9,25

D. None of the above.

Click the option that best answers the question.

In the preceding example, the higher-order function filterArr() generates and returns the second function greaterThan(), that filters the element of an array larger than the input m.

Use the higher-order function to change a function:

Let's look at the example that uses the higher-order function to change a function.

xxxxxxxxxx
 
const intArr = [3,10,25,1,7]
function changeFn(f) {
    return function getArr(arr) {
    let result = f(...arr);
    console.log("Called with", arr, ", returned", result);
    return result;
    };
}
changeFn(Math.min)(intArr);

The output for the above code is:

JAVASCRIPT

1Called with [ 3, 10, 25, 1, 7 ] , returned 1

The changeFn(), which is the higher-order function, accepts a function as an argument and passes all of the required arguments to it using the getArr() return function.

Use the higher-order function to provide a new control flow:

Let's look into an example that uses the higher-order function to provide a new control flow:

xxxxxxxxxx
 
const intArr = [3,10,25,2,7]
function customForEach(arr,fn){
    for(let i=0; i<arr.length; i++){
        fn(arr[i] % 2 == 0, () => {
            console.log(arr[i], "is even");
        });
    }
}
function unless(test, then) {
  if (test) then();
}
  
customForEach(intArr,unless);

Are you sure you're getting this? Click the correct answer from the options.

What would be the output of the following code?

JAVASCRIPT

1const intArr = [3,10,25,2,7]
2function customForEach(arr,fn){
3    for(let i=0; i<arr.length; i++){
4        fn(arr[i] % 2 == 0, () => {
5            console.log(arr[i], "is even");
6        });
7    }
8}
9function unless(test, then) {
10  if (test) then();
11}
12  
13customForEach(intArr,unless);

A. 10 is even 2 is even

B. 12 is even 10 is even

C. 7 is odd 3 is odd

D. `None of the above.

Click the option that best answers the question.

The preceding example illustrates how well the higher-order function unless() is employed to generate a new control flow based on a user-specified test condition.

Use the higher-order function to provide a new control flow Extended

Built-in higher-order functions:

Numerous in-built JavaScript operations on arrays, DOM methods, strings, promise methods, and so on are higher-order functions that offer substantial abstraction. Here are some of the several built-in higher-order functions:

Array.prototype.map(): The map() method generates a new array by invoking the callback function given as a parameter for each input array element. The map() method takes each value returned by the callback function and uses these values to form a new array.
Array.prototype.reduce(): The reduction method applies the callback function to each element of the calling array, resulting in a single output value. The reduce method uses two arguments: the reducer function and the optional initialValue. A single value is returned after applying the reducer to each array element.
EventTarget.addEventListener(): When called on an EventTarget, the addEventListener() function adds the given listener to that target. An event-supporting object, such as an Element inside a document, a window, or another event-supporting object, can serve as the event target (like XMLHttpRequest).
Array.prototype.filter(): The filter() method generates a shallow duplicate of a piece of an array, filtered to include only the array elements that satisfy the provided function's test.
Array.prototype.forEach(): The forEach method in JavaScript is a function that loops over an array, calling a specified callback function at each iteration. The forEach method is fully browser and node supported, as forEach was incorporated in the ECMAScript 5 specification.

Try this exercise. Click the correct answer from the options.

What does Array.prototype.filter() do?

A. It loops over an array, calling a specified callback function at each iteration.

B. It generates a new array by invoking the callback function given as a parameter for each input array element.

C. It generates a shallow duplicate of a piece of an array, filtered to include only the array elements that satisfy the provided function's test.

D. None of the above.

Click the option that best answers the question.

Advantages of higher-order functions:

Higher-order functions are an effective method for abstracting and separating program actions.
Higher-order functions are simple to reuse.
Higher-order- functions simplify the code, making it simple for the programmer and other users to comprehend at a high level.
Higher-order functions reduce the effort required to write unambiguous, fully-functional code since they are simpler to debug.
The concept of higher-order functions permits functions to be composed.
Additionally, they help create compact and composing code as the complexity of programs increases.

Conclusion:

Today, we addressed the fundamental concept of functional programming and functions as first-class citizens. In addition, we covered in detail how Higher-order functions can be employed in many contexts. Higher-order functions in JavaScript are an advantageous feature. They improve the functionality of standard functions and allow code to be communicated via actions, boosting its reusability and abstraction. Depending on the requirements, we could either use the built-in higher-order functions supplied by JavaScript libraries or construct our own to write composed and complicated functions.

One Pager Cheat Sheet

JavaScript is a function-based programming language that enables developers to use higher-order functions for abstraction and reducing code repetition.
JavaScript supports functional programming, which allows us to utilise pure mathematical functions and treat functions as first-class citizens.
JavaScript allows functions to be used as first-class citizens, meaning they can be assigned to variables, used as object attributes, stored in arrays and utilized as function arguments or returns, which allows for the development and use of Higher-order functions.
Functions in JavaScript, which are considered as first-class citizens, allows us to use higher-order functions to compose new Array transformations through map, filter and reduce.
Higher Order Functions in Javascript enable us to use a function as a parameter to another function.
The useFunction() function accepts a function_as_argument() as a parameter, allowing it to manipulate array items.
Functions can return other functions, which allows us to create Higher Order Functions, as shown in the example logger() in Javascript.
The returnFunction() function is a higher-order function outputting the secondFunction() that requires an additional parameter y.
You can write functions that accept other functions as parameters, as well as return them as outputs.
The higher-order function, useReturnFunc(), returns a function, secondFunction(), which takes an argument as a string, when given a function, fn(), as an input.
Higher-order functions can be used to abstract over actions as well as values.
The output of the code is A due to the use of the higher-order function, filterArr, with a loop to push elements greater than m into a new array, which is then logged as Elements that are greater than m = 9 are: 10,25.
A higher-order function filterArr() generates and returns the greaterThan() function, which filters elements of an array larger than its input m.
Using a higher-order function to transform a function is an example of Functional Programming.
The changeFn() higher-order function accepts a function as an argument and passes all of the required arguments to it, returning 1 when called with [ 3, 10, 25, 1, 7 ].
Using a higher-order function can create a new control flow.
The provided code uses a custom forEach loop and an unless function to check if each element in the intArr array is even or odd, yielding 10 is even 2 is even as the output.
The unless() higher-order function enables users to create custom control flow based on a test condition.
JavaScript has numerous built-in higher-order functions, including map(), reduce(), addEventListener(), filter(), and forEach(), that offer substantial abstraction.
The Array.prototype.filter() method creates a filtered shallow duplicate of the array that contains only elements that pass a specific test.
Higher-order functions in JavaScript are powerful tools that allow for code to be communicated through actions and improved reusability, while providing the flexibility to use built-in or customized functions to handle complex tasks.

Functional programming:

Functions as first-class citizens:

Higher-order functions:

Are you sure you're getting this? Click the correct answer from the options.

Click the option that best answers the question.

The function that accepts other functions as a parameter:

Functions Returning other Functions:

Functions that Accept other Functions as Parameters and Return the Functions:

Functions of higher order that abstract over actions:

Let's test your knowledge. Click the correct answer from the options.

Click the option that best answers the question.

Use the higher-order function to change a function:

Use the higher-order function to provide a new control flow:

Are you sure you're getting this? Click the correct answer from the options.

Click the option that best answers the question.

Built-in higher-order functions:

Try this exercise. Click the correct answer from the options.

Click the option that best answers the question.

Advantages of higher-order functions:

Conclusion:

One Pager Cheat Sheet

Programming Categories

Popular Lessons