Higher-Order Arrow Functions in JavaScript
Last Updated :
23 Jan, 2023
Prerequisite: Arrow Functions
A Higher-Order function is a function that receives a function as an argument otherwise returns the function as output. The higher-Order Arrow function implies using arrow functions (in ES6) along with Higher-Order functions.
Needs of Higher Order Arrow Function:
- In a general way, the programmer instructs on how to perform the function rather than what is needed which increases the length of the code and makes it error-prone.
- Whereas in the Higher Order Arrow Functions implementation, the code is much short, concise, succinct, easy to debug, and focuses on what is required rather than how to achieve it.
- We can directly work with the current value instead of accessing it individually using its index (i.e arr[0]).
- There is no need to create a predefined array and push back the changes.
- The mutation of objects can be avoided and maintenance of for loop is not required.
Why avoid forEach()? The forEach() function does not return any value so results need to be pushed in a predefined array whereas this is not the case in the map() function.
javascript
var Students = [
{ rollNo: 21, name: 'Alpha' },
{ rollNo: 22, name: 'Beta' },
{ rollNo: 23, name: 'Gamma' },
{ rollNo: 24, name: 'Delta' },
{ rollNo: 25, name: 'Omega'}
];
var StudentRollNo = [];
Students.forEach(function (Student) {
StudentRollNo.push(Student.rollNo);
});
console.log(StudentRollNo);
|
Output:
The Higher-Order functions are:
JavaScript map() Function: It works on a given array like changing/transforming the whole array and then simply returning it. It does not break the flow for a few conditions. The map() function takes two arguments. The first is a callback which gives the current value of the iteration, the index of the iteration, original array from which the map was called. The other argument is not mandatory which is the value to use as this in the callback. One drawback of using the map() function is that its performance is good only with small data sets.
javascript
var Students = [
{ rollNo: 21, name: 'Alpha' },
{ rollNo: 22, name: 'Beta' },
{ rollNo: 23, name: 'Gamma' },
{ rollNo: 24, name: 'Delta' },
{ rollNo: 25, name: 'Omega'}
];
var StudentRollNo = Students.map(function (Student) {
return Student.rollNo
});
console.log(StudentRollNo);
|
- Output:
The implementation of above code using arrow functions.
javascript
var Students = [
{ rollNo: 21, name: 'Alpha' },
{ rollNo: 22, name: 'Beta' },
{ rollNo: 23, name: 'Gamma' },
{ rollNo: 24, name: 'Delta' },
{ rollNo: 25, name: 'Omega'}
];
const StudentRollNo =
Students.map(Student => Student.rollNo);
console.log(StudentRollNo);
|
Output:
Note: For more information refer to: Maps in JavaScript
JavaScript reduce() Function: It is similar to the map() function in terms of a callback for every element of the array. But the difference is that it reduces passes the result of this callback from the original array to another. The result is termed as an accumulator which can be of anything integer, character, string, object, map, etc and should be passed while invoking. The callback now gets the accumulator, current value, index of iteration, and whole array. In simple words, the accumulator accumulates all the return values. Its value is the collection of previously returned accumulations.
javascript
var Students = [
{ rollNo: 21, name: 'Alpha', prizesWon: 1 },
{ rollNo: 22, name: 'Beta', prizesWon: 3 },
{ rollNo: 23, name: 'Gamma', prizesWon: 0 },
{ rollNo: 24, name: 'Delta', prizesWon: 0 },
{ rollNo: 25, name: 'Omega', prizesWon: 1}
];
var totalPrizes = Students.reduce(function (accumulator, Student) {
return accumulator + Student.prizesWon;
}, 0);
console.log(totalPrizes);
|
Output:
5
The implementation of above code using arrow functions.
javascript
var Students = [
{ rollNo: 21, name: 'Alpha', prizesWon: 1 },
{ rollNo: 22, name: 'Beta', prizesWon: 3 },
{ rollNo: 23, name: 'Gamma', prizesWon: 0 },
{ rollNo: 24, name: 'Delta', prizesWon: 0 },
{ rollNo: 25, name: 'Omega', prizesWon: 1}
];
const totalPrizes = Students.reduce(
(accumulator, Student) => accumulator + Student.prizesWon, 0);
console.log(totalPrizes);
|
Output:
5
JavaScript find() Function: It also works on an array and returns the first array element which satisfies the condition given in the function. It is similar to map() function. Its performance is not much efficient in case of large data sets although it works fine with small data sets.
javascript
var Students = [
{ rollNo: 21, name: 'Alpha', prizesWon: 4 },
{ rollNo: 22, name: 'Beta', prizesWon: 3 },
{ rollNo: 23, name: 'Gamma', prizesWon: 0 },
{ rollNo: 24, name: 'Delta', prizesWon: 4 },
{ rollNo: 25, name: 'Omega', prizesWon: 1}
];
var achievers = Students.find(function (Student) {
return Student.prizesWon == 4;
});
console.log(achievers);
|
Output:
The implementation of above code using arrow functions.
javascript
var Students = [
{ rollNo: 21, name: 'Alpha', prizesWon: 4 },
{ rollNo: 22, name: 'Beta', prizesWon: 3 },
{ rollNo: 23, name: 'Gamma', prizesWon: 0 },
{ rollNo: 24, name: 'Delta', prizesWon: 4 },
{ rollNo: 25, name: 'Omega', prizesWon: 1}
];
var achievers = Students.find(
(Student) => Student.prizesWon == 4);
console.log(achievers);
|
Output:
JavaScript filter() Function: The filter() function works on an array and returns an array for filtered items implying the length of the array is reduced. It also receives the similar arguments as map but the difference lies in the callback as it needs to return either true or false. If the value returned is true then the element remains in the array otherwise the element is filtered out.
javascript
var Students = [
{ rollNo: 21, name: 'Alpha', prizesWon: 4 },
{ rollNo: 22, name: 'Beta', prizesWon: 3 },
{ rollNo: 23, name: 'Gamma', prizesWon: 0 },
{ rollNo: 24, name: 'Delta', prizesWon: 4 },
{ rollNo: 25, name: 'Omega', prizesWon: 1}
];
var achievers = Students.filter(function (Student) {
return Student.prizesWon == 4;
});
console.log(achievers);
|
Output:
The implementation of above code using arrow functions.
javascript
var Students = [
{ rollNo: 21, name: 'Alpha', prizesWon: 4 },
{ rollNo: 22, name: 'Beta', prizesWon: 3 },
{ rollNo: 23, name: 'Gamma', prizesWon: 0 },
{ rollNo: 24, name: 'Delta', prizesWon: 4 },
{ rollNo: 25, name: 'Omega', prizesWon: 1}
];
var achievers = Students.filter(
(Student) => Student.prizesWon == 4);
console.log(achievers);
|
Output:
Similar Reads
JavaScript Higher Order Functions
A higher-order function is a function that does one of the following: Takes another function as an argument.Returns another function as its result.Higher-order functions help make your code more reusable and modular by allowing you to work with functions like any other value. [GFGTABS] JavaScript fu
7 min read
Arrow functions in JavaScript
An arrow function is a shorter syntax for writing functions in JavaScript. Introduced in ES6, arrow functions allow for a more concise and readable code, especially in cases of small functions. Unlike regular functions, arrow functions don't have their own this, but instead, inherit it from the surr
5 min read
Array of functions in JavaScript
Given an array containing functions and the task is to access its element in different ways using JavaScript. Approach: Declare an array of functions.The array of functions works with indexes like an array function. Example 1: In this example, the function call is initiated from the element of the a
2 min read
Difference between First-Class and Higher-Order Functions in JavaScript
Understanding the difference between first-class and higher-order functions in JavaScript is important. These are big concepts in programming, especially in the kind of coding used for making websites. This article is all about explaining what they are, how they are used, and why they are so importa
3 min read
Variadic Functions in JavaScript
Variadic functions are functions that can accept any number of arguments. In variadic functions no predefined number of function arguments is present that's why a function can take any number of arguments. Syntax:function NameOfFun( x1, x2, x3, ... ){ // function body}Below are the approaches by usi
2 min read
Higher Order Functions and Currying
Introduction: Generally while programming, we use first class functions which means that the programming language treats functions as values – that you can assign a function into a variable, pass it around. These functions do not take other functions as parameters and never has any function as their
4 min read
Function Overloading in JavaScript
Function Overloading is a feature found in many object-oriented programming languages, where multiple functions can share the same name but differ in the number or type of parameters. While languages like C++ and Java natively support function overloading, JavaScript does not support this feature di
4 min read
JavaScript function caller Property
The function.caller property of the JavaScript function object returns the function that invoked the specified function. It returns null if the function "f" was invoked by the top-level code in JavaScript. For functions like strict functions, async functions, and generator functions this method retu
2 min read
What Do Multiple Arrow Functions Mean in JavaScript?
In JavaScript, arrow functions provide a concise syntax for writing function expressions. When you use multiple arrow functions in sequence, it typically signifies a series of nested functions, often used for currying or higher-order functions. These are the following methods to show the multiple ar
2 min read
What is Currying Function in JavaScript?
Currying is used in JavaScript to break down complex function calls into smaller, more manageable steps. It transforms a function with multiple arguments into a series of functions, each taking a single argument. It converts a function with multiple parameters into a sequence of functions.Each funct
3 min read