Higher-Order Arrow Functions in JavaScript - GeeksforGeeks

11 Oct, 2019
Prerequisite: Arrow Functions
A Higher-Order function is a function that receives a function as an argument otherwise returns function as output. Higher-Order Arrow function implies using arrow functions (in ES6) along with Higher-Order functions.
Needs of Higher Order Arrow Function:
In general way, the programmer instructs on how to perform the function rather than what is needed which increases the length of code and making 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 current value instead of accessing it individually using its index (i.e arr[0]).
There is no need to create predefined array and push back the changes.
The mutation of objects can be avoided and maintenance of for loop is not required.
Why to 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 map() function.
<script>// Data set of studentsvar Students = [    { rollNo: 21, name: 'Alpha' },    { rollNo: 22, name: 'Beta' },    { rollNo: 23, name: 'Gamma' },    { rollNo: 24, name: 'Delta' },    { rollNo: 25, name: 'Omega'}];  // Use forEach() functionvar StudentRollNo = [];  Students.forEach(function (Student) {    StudentRollNo.push(Student.rollNo);});  // Display rollNo dataconsole.log(StudentRollNo);</script>
Output:
The Higher-Order functions are:
map() Function: It works on a given array like changing/transforming the whole array and then simply return it. It does not break the flow for few conditions. The map() function takes two arguments. The first is callback which gives the current value of the iteration, index of 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.<script>// Data set of studentsvar Students = [    { rollNo: 21, name: 'Alpha' },    { rollNo: 22, name: 'Beta' },    { rollNo: 23, name: 'Gamma' },    { rollNo: 24, name: 'Delta' },    { rollNo: 25, name: 'Omega'}];  // Use map() functionvar StudentRollNo = Students.map(function (Student) {    return Student.rollNo});  // Display rollNo dataconsole.log(StudentRollNo);</script>Output:The implementation of above code using arrow functions.<script>// Data set of studentsvar 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 functionsconst StudentRollNo =     Students.map(Student => Student.rollNo);   // Display Roll no dataconsole.log(StudentRollNo);</script>Output:Note: For more information refer to: Maps in JavaScriptreduce() Function: It is similar to map() function in terms of callback for every element of array. But the difference is that it reduce passes the result of this callback from original array to another. The result is termed as 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, whole array.In simple words, the accumulator accumulates all the return values. Its value is the collection of previously returned accumulations.<script>// Data set of studentsvar 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() functionvar totalPrizes = Students.reduce(function (accumulator, Student) {    return accumulator + Student.prizesWon;}, 0);  // Display total number of prizes won by allconsole.log(totalPrizes);</script>Output:5The implementation of above code using arrow functions.<script>// Data set of studentsvar 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 functionsconst totalPrizes = Students.reduce(    (accumulator, Student) => accumulator + Student.prizesWon, 0);  // Display total number of prizes won by allconsole.log(totalPrizes);</script>Output:5find() 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.<script>// Data set of studentsvar 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 prizesconsole.log(achievers);</script>Output:The implementation of above code using arrow functions.<script>// Data set of studentsvar 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 functionsvar achievers = Students.find(    (Student) => Student.prizesWon == 4);  // Display only first Student who won four prizesconsole.log(achievers);</script>Output: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.<script>// Data set of studentsvar 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 prizesconsole.log(achievers);</script>Output:The implementation of above code using arrow functions.<script>// Data set of studentsvar 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 functionsvar achievers = Students.filter(    (Student) => Student.prizesWon == 4);   // Display Students who won four prizesconsole.log(achievers);</script>Output:
map() Function: It works on a given array like changing/transforming the whole array and then simply return it. It does not break the flow for few conditions. The map() function takes two arguments. The first is callback which gives the current value of the iteration, index of 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.<script>// Data set of studentsvar Students = [    { rollNo: 21, name: 'Alpha' },    { rollNo: 22, name: 'Beta' },    { rollNo: 23, name: 'Gamma' },    { rollNo: 24, name: 'Delta' },    { rollNo: 25, name: 'Omega'}];  // Use map() functionvar StudentRollNo = Students.map(function (Student) {    return Student.rollNo});  // Display rollNo dataconsole.log(StudentRollNo);</script>Output:The implementation of above code using arrow functions.<script>// Data set of studentsvar 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 functionsconst StudentRollNo =     Students.map(Student => Student.rollNo);   // Display Roll no dataconsole.log(StudentRollNo);</script>Output:Note: For more information refer to: Maps in JavaScript
<script>// Data set of studentsvar Students = [    { rollNo: 21, name: 'Alpha' },    { rollNo: 22, name: 'Beta' },    { rollNo: 23, name: 'Gamma' },    { rollNo: 24, name: 'Delta' },    { rollNo: 25, name: 'Omega'}];  // Use map() functionvar StudentRollNo = Students.map(function (Student) {    return Student.rollNo});  // Display rollNo dataconsole.log(StudentRollNo);</script>
Output:
The implementation of above code using arrow functions.
<script>// Data set of studentsvar 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 functionsconst StudentRollNo =     Students.map(Student => Student.rollNo);   // Display Roll no dataconsole.log(StudentRollNo);</script>
Output:
Note: For more information refer to: Maps in JavaScript
reduce() Function: It is similar to map() function in terms of callback for every element of array. But the difference is that it reduce passes the result of this callback from original array to another. The result is termed as 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, whole array.In simple words, the accumulator accumulates all the return values. Its value is the collection of previously returned accumulations.<script>// Data set of studentsvar 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() functionvar totalPrizes = Students.reduce(function (accumulator, Student) {    return accumulator + Student.prizesWon;}, 0);  // Display total number of prizes won by allconsole.log(totalPrizes);</script>Output:5The implementation of above code using arrow functions.<script>// Data set of studentsvar 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 functionsconst totalPrizes = Students.reduce(    (accumulator, Student) => accumulator + Student.prizesWon, 0);  // Display total number of prizes won by allconsole.log(totalPrizes);</script>Output:5
<script>// Data set of studentsvar 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() functionvar totalPrizes = Students.reduce(function (accumulator, Student) {    return accumulator + Student.prizesWon;}, 0);  // Display total number of prizes won by allconsole.log(totalPrizes);</script>
Output:
5
The implementation of above code using arrow functions.
<script>// Data set of studentsvar 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 functionsconst totalPrizes = Students.reduce(    (accumulator, Student) => accumulator + Student.prizesWon, 0);  // Display total number of prizes won by allconsole.log(totalPrizes);</script>
Output:
5
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.<script>// Data set of studentsvar 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 prizesconsole.log(achievers);</script>Output:The implementation of above code using arrow functions.<script>// Data set of studentsvar 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 functionsvar achievers = Students.find(    (Student) => Student.prizesWon == 4);  // Display only first Student who won four prizesconsole.log(achievers);</script>Output:
<script>// Data set of studentsvar 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 prizesconsole.log(achievers);</script>
Output:
The implementation of above code using arrow functions.
<script>// Data set of studentsvar 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 functionsvar achievers = Students.find(    (Student) => Student.prizesWon == 4);  // Display only first Student who won four prizesconsole.log(achievers);</script>
Output:
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.<script>// Data set of studentsvar 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 prizesconsole.log(achievers);</script>Output:The implementation of above code using arrow functions.<script>// Data set of studentsvar 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 functionsvar achievers = Students.filter(    (Student) => Student.prizesWon == 4);   // Display Students who won four prizesconsole.log(achievers);</script>Output:
<script>// Data set of studentsvar 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 prizesconsole.log(achievers);</script>
Output:
The implementation of above code using arrow functions.
<script>// Data set of studentsvar 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 functionsvar achievers = Students.filter(    (Student) => Student.prizesWon == 4);   // Display Students who won four prizesconsole.log(achievers);</script>
Output:
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab using JavaScript ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?