Higher-Order Arrow Functions in JavaScript

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
// 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);
</script>

chevron_right


Output:

The Higher-Order functions are:

  1. 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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
    // 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);
    </script>

    chevron_right

    
    

    Output:

    The implementation of above code using arrow functions.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
    // 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);
    </script>

    chevron_right

    
    

    Output:

    Note: For more information refer to: Maps in JavaScript

  2. 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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
    // 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);
    </script>

    chevron_right

    
    

    Output:

    5

    The implementation of above code using arrow functions.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
    // 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);
    </script>

    chevron_right

    
    

    Output:

    5
  3. 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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
    // 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);
    </script>

    chevron_right

    
    

    Output:

    The implementation of above code using arrow functions.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
    // 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);
    </script>

    chevron_right

    
    

    Output:

  4. 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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
    // 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);
    </script>

    chevron_right

    
    

    Output:

    The implementation of above code using arrow functions.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
    // 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);
    </script>

    chevron_right

    
    

    Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.