Higher-Order Functions in JS

Introduction

In JavaScript, Higher-Order Functions are functions that can accept other functions as arguments and/or return functions as results. They enable powerful functional programming techniques by allowing functions to be treated as first-class citizens. Higher-order functions facilitate code reuse, abstraction, and composition, enabling developers to write more modular and flexible code. They form the foundation for popular operations like map, filter, and reduce.In this article, we will discuss this in detail.

Also Read About, Javascript hasOwnProperty

First-Class Functions

If functions in a programming language are handled like other variables, it is argued that the language has first-class functions. As a result, the functions can be assigned to other variables, supplied as arguments, or returned by another function.
Functions are treated as first-class citizens in JavaScript. This indicates that functions are just another sort of object and are merely a value.

Example of First Class Functions

The basic example of First Class Functions is given below where we directly passing the arguments and returning the result.

const Calculate = {
    addition:(a,b) => {
return `${a} + ${b} = ${a+b}`;
    },
    subtraction:(a, b) => {
        return `${a} - ${b} = ${a-b}`
    },
    multiplication:(a, b) => {
        return `${a} * ${b} = ${a*b}`
    },
    division:(a, b) => {
        if(b!=0) return `${a} / ${b} = ${a/b}`;
        return `Not divisible by Zero!!!`;
    }
 
}
console.log(Calculate.addition(100, 50));
console.log(Calculate.subtraction(100,30));
console.log(Calculate.multiplication(5,10));
console.log(Calculate.division(100,25));

You can also try this code with Online Javascript Compiler

Run Code

This is a simple code to perform basic operations on Numbers. The output of the above code is given below.

Output

100 + 50 = 150
100 - 30 = 70 
5 * 10 = 50 
100 / 25 = 4

You can also try this code with Online Javascript Compiler

Run Code

Next, let us look the Higher-Order functions in detail:

Higher-Order Functions in JavaScript

Functions in JavaScript can take primitive types (such as numbers or characters) and objects (such as arrays, plain objects, regular expressions, and so on) as arguments and return a primitive type or object.

Is it, nevertheless, feasible to utilize functions as values? Assigning functions to variables, using them as arguments, or even returning them? Yes, that is conceivable!

Now using our super Power of Higher-Order Functions, let us look at an example to be more clear on this topic.

Example of Higher-Order Functions

Now we are going to use the above concept to code the same program we did earlier in First-Class Functions. This will make our code easy and simple.

function Calculate(Operation , initialValue, numbers) {
  let total = initialValue;
  for (const number of numbers) {
    total = Operation(total, number);
  }
  return total;
}
function addition(n1, n2) {
  return n1 + n2;
}
function multiplication(n1, n2) {
  return n1 * n2;
}
console.log(Calculate(addition, 0, [1, 2, 4]));      
console.log(Calculate(multiplication, 1, [1, 2, 4]));

You can also try this code with Online Javascript Compiler

Run Code

In the above code we have created the functions addition and multiplication and then we have used these functions as arguments in Calculate function. Let us test it and look at the results.

Output

7
8

You can also try this code with Online Javascript Compiler

Run Code

Our code works fine and gives the desired output hence our concept works well.

The .reduce() Method

The reduce() method calls a user-supplied "reducer" callback function on each element of the array, sending in the result of the previous element's calculation. When the reducer is applied to all elements of the array, the outcome is a single value.

There is no "return value of the previous calculation" the first time the callback is executed. An starting value can be used in its stead if one is provided. Otherwise, the original value for the array element at index 0 is used, and iteration begins with the next element (index 1 instead of index 0).

Syntax:

.reduce((arguments) =>{
/*...............*/
})

You can also try this code with Online Javascript Compiler

Run Code

Example:

const arr = [10,20,30,40,50];
const ans = arr.reduce((accumulator, currentIndexValue) => {
               return accumulator + currentIndexValue;
});
console.log(ans);

You can also try this code with Online Javascript Compiler

Run Code

Output:

You can also try this code with Online Javascript Compiler

Run Code

The .map() Method

The.map() method applies a callback function to each element of an array. It returns a new array containing the callback function's return values.
The original array is not changed, and the returned array may have elements that are different from those in the original array.

Syntax:

.map((arguments) =>{
/*...............*/
})

You can also try this code with Online Javascript Compiler

Run Code

Example:

const names = [‘Ram’,’ Shyam’,’ Ghanshyam’];
const updatednames = names.map(members => {
         return ‘Mr.’+names ; 
})
console.log(updatednames);

You can also try this code with Online Javascript Compiler

Run Code

Output:

Mr.Ram, Mr.Shyam, Mr.Ghanshyam

You can also try this code with Online Javascript Compiler

Run Code

In the above example we have not changed the names but we have appended ‘Mr.’ in front of the names.

The .filter() Method

The .filter() method executed a callback function for all the elements of the array upon which it is called which satisfies the condition stated in the method.

Syntax:

.filter((arguments) =>{
/*...............*/
})

You can also try this code with Online Javascript Compiler

Run Code

Example:

const arr = [3,5,4,1,6,8];
const result = arr.filter( x => {
        return x%2==0;
});
console.log(result);

You can also try this code with Online Javascript Compiler

Run Code

Output:

4,6,8

You can also try this code with Online Javascript Compiler

Run Code

In the above function all the elements which are divisible by 2 have been filtered into the result.

The .forEach() Method

The .forEach() method performs a callback function on each entry in the array in the order specified.

Syntax:

.forEach((arguments) =>{
/*...............*/
})

You can also try this code with Online Javascript Compiler

Run Code

Example:

const arr = [12,14,16.18,20];
arr.forEach(x => {
          console.log(x);
});

You can also try this code with Online Javascript Compiler

Run Code

Output:

12,14,16,18,20

You can also try this code with Online Javascript Compiler

Run Code

In the above example, console.log() method have been executed for each and every value present in the array arr.

You can also try on an online javascript compiler.

Benefits of Higher-Order Functions

By providing alternative operation functions, we may reuse the calculate() function to handle multiple operations: addition, multiplication, and more.
The higher-order functions favor the single-responsibility principle and help reduce code duplication.
The program is much easier to comprehend, and the programmer's aim is clearly communicated in the code.

Higher-Order Functions vs Callback Functions

Higher-Order Functions	Callback Functions
A function that takes one or more functions as arguments and/or returns a function as its result.	A function that is passed as an argument to another function and is invoked inside that function to perform a specific task.
Treats functions as first-class citizens, allowing them to be assigned to variables, passed as arguments, and returned from other functions.	Used to define the behavior or action to be performed when a certain event occurs or when a certain condition is met.
Enables functional programming techniques and provides a way to abstract and compose functions.	Allows for asynchronous programming, where the execution of code can continue without blocking while waiting for a long-running operation to complete.
Facilitates code reuse and helps in creating more modular and flexible code.	Commonly used in event handling, AJAX requests, timers, and other asynchronous operations.
Examples include map(), filter(), reduce(), forEach(), sort(), etc.	Examples include callback functions passed to addEventListener(), setTimeout(), setInterval(), fetch(), etc.
A broader concept that can work with Callback Functions.	A specific type of function that is passed as an argument to a Higher-Order Function.

Browser Compatibility

When it comes to browser compatibility, Higher-Order Functions in JavaScript are widely supported across modern web browsers. However, it's important to consider the compatibility of specific Higher-Order Functions and their features in different browser versions.

Here are some considerations regarding browser compatibility and Higher-Order Functions in JavaScript:

1. ECMAScript Support:

Higher-order functions are a core concept in JavaScript and have been supported since the early versions of ECMAScript (JavaScript's standardized specification).
Most modern browsers support ECMAScript 5 (ES5) and above, which includes the majority of Higher-Order Functions and their functionalities.
However, if you are targeting older browsers or need to support legacy systems, you may need to check the compatibility of specific Higher-Order Functions introduced in newer ECMAScript versions.

2. Built-in Higher-Order Functions:

JavaScript provides several built-in Higher-Order Functions, such as `map()`, `filter()`, `reduce()`, `forEach()`, `sort()`, etc.
These functions are widely supported in modern browsers, including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+.
However, some older browser versions may not support certain Higher-Order Functions or may have limited functionality.
It's important to consult the documentation or compatibility tables for the specific Higher-Order Functions you intend to use to ensure they are supported in your target browsers.

3. Polyfills and Transpilation:

If you need to support older browsers that lack native support for certain Higher-Order Functions, you can use polyfills or transpilation techniques.
Polyfills are code snippets that emulate the behavior of newer features in older browsers. They can be used to provide fallback implementations for Higher-Order Functions that are not natively supported.
Transpilation involves converting modern JavaScript code (e.g., ES6+) to a backward-compatible version (e.g., ES5) using tools like Babel. This allows you to use newer Higher-Order Functions and syntax while ensuring compatibility with older browsers.

4. Performance Considerations:

While Higher-Order Functions are generally well-optimized in modern browsers, their performance can vary depending on the browser version and the specific implementation.
Older browser versions may have less optimized JavaScript engines, which could impact the performance of Higher-Order Functions, especially when dealing with large datasets.
It's recommended to test the performance of your code that relies heavily on Higher-Order Functions in your target browsers to ensure acceptable performance.

5. Browser-Specific Issues:

Although Higher-Order Functions are standardized in JavaScript, there might be slight variations or bugs in specific browser implementations.
It's important to be aware of any known browser-specific issues related to Higher-Order Functions and to test your code thoroughly in the target browsers.
Consulting browser compatibility databases, such as Mozilla Developer Network (MDN) or Can I Use, can provide insights into any known issues or quirks.

Frequently Asked Questions

When is it OK to employ higher-order functions?

Higher-order functions are frequently used to abstract how to work with various data types. Filter(), for example, does not have to work with string arrays. Because you can pass in a function that knows how to deal with a different data type, it might just as readily filter numbers.

Is it possible to decrease a higher-order function?

Reduce is a built-in Higher-Order Function in JavaScript that is quite handy. Reduce is ideal for calculating an array's total. Reduce will take a collection of numbers in an array and return a single value, the sum of those integers.

What is the difference between a higher-order function and a callback?

A higher-order function is one that accepts another function as an input and/or returns another function to its callers. A callback function is one that is supplied to another function with the expectation that it will be called by the other function. A higher-order function is one that accepts another function as an input and/or returns another function to its callers. A callback function is one that is supplied to another function with the expectation that it will be called by the other function.

Is recursion a higher-order function?

It's not a "higher-order function" that you're referring to in your update. Instead of returning a function, it returns the result of a recursive call to itself.

Is it true that recursion is a higher-order function?

So, why does the order of JavaScript functions matter? When a program has several scopes and a number of functions, the order in which they are called matters a lot. Functions in the inner scope must be able to access functions in the outer scope for a JavaScript program to work properly.

Conclusion

To summarize the above blog we have learned about Higher-Order Functions in Javascript. Also, we have compared it to a normal First-Order Function. We have also mentioned the benefits we get upon using Higher-Order Functions.

Hope you learned something. But the knowledge never stops, So to learn more you can visit our website for more articles. Check out our articles on Debounce and Throttle, Implement Linear Search and Binary Search in an Array, and Explain Memoization in Javascript.

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enroll in our courses and refer to the mock test and problems available, Take a look at the interview experiences and interview bundle for placement preparations.

Do upvote our blog to help other ninjas grow.

Happy Learning Ninja :)