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
// Data set of students
var Students = [
{ rollNo: 21, name: 'Alpha' },
{ rollNo: 22, name: 'Beta' },
{ rollNo: 23, name: 'Gamma' },
{ rollNo: 24, name: 'Delta' },
{ rollNo: 25, name: 'Omega'}
];
// Use forEach() function
var StudentRollNo = [];
Students.forEach(function (Student) {
StudentRollNo.push(Student.rollNo);
});
// Display rollNo data
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
// Data set of students
var Students = [
{ rollNo: 21, name: 'Alpha' },
{ rollNo: 22, name: 'Beta' },
{ rollNo: 23, name: 'Gamma' },
{ rollNo: 24, name: 'Delta' },
{ rollNo: 25, name: 'Omega'}
];
// Use map() function
var StudentRollNo = Students.map(function (Student) {
return Student.rollNo
});
// Display rollNo data
console.log(StudentRollNo);
- Output:
The implementation of above code using arrow functions.
javascript
// Data set of students
var Students = [
{ rollNo: 21, name: 'Alpha' },
{ rollNo: 22, name: 'Beta' },
{ rollNo: 23, name: 'Gamma' },
{ rollNo: 24, name: 'Delta' },
{ rollNo: 25, name: 'Omega'}
];
// Use map() function with arrow functions
const StudentRollNo =
Students.map(Student => Student.rollNo);
// Display Roll no data
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
// Data set of students
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}
];
// Using reduce() function
var totalPrizes = Students.reduce(function (accumulator, Student) {
return accumulator + Student.prizesWon;
}, 0);
// Display total number of prizes won by all
console.log(totalPrizes);
Output:
5
The implementation of above code using arrow functions.
javascript
// Data set of students
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}
];
// Using reduce() function with arrow functions
const totalPrizes = Students.reduce(
(accumulator, Student) => accumulator + Student.prizesWon, 0);
// Display total number of prizes won by all
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
// Data set of students
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}
];
// Using find() function
var achievers = Students.find(function (Student) {
return Student.prizesWon == 4;
});
// Display only first Student who won four prizes
console.log(achievers);
Output:
The implementation of above code using arrow functions.
javascript
// Data set of students
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}
];
// Using find() function with arrow functions
var achievers = Students.find(
(Student) => Student.prizesWon == 4);
// Display only first Student who won four prizes
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
// Data set of students
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}
];
// Using filter() function
var achievers = Students.filter(function (Student) {
return Student.prizesWon == 4;
});
// Display Students who won four prizes
console.log(achievers);
Output:
The implementation of above code using arrow functions.
javascript
// Data set of students
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}
];
// Using filter() function with arrow functions
var achievers = Students.filter(
(Student) => Student.prizesWon == 4);
// Display Students who won four prizes
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.JavaScriptfunction fun()
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
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 functi
3 min read
All about Functions and Scopes in JavaScript
In this article, we will cover all the basic concepts of JS functions, callbacks, scopes, closures in-depth which would help you to - understand different types of function declarations.make better use of functions.understand how different scopes and scope chain works in JS.learn about closures and
10 min read