What is a Higher Order Function ?

A higher order function is a function that takes one or more functions as arguments, or returns a function as its result or both.

How to use Higher Order Functions ?

You can use higher order functions in some of ways :

• When you work with arrays, you can use the map(), reduce(), filter(), find(), sort() and forEach() functions to manipulate with data of arrays.

Now let’s understand each one of these in details.

How to use map() function ?

The map() function takes an array of values and applies a specific action ( operation ) to each value in the array.

It does not effect on the original array.

It is often used to transform an array of data into a new array with a different structure.

Example 1

Suppose we have an array contains on a set of numbers, and we want to add 10 to every number in our array.

const arr = [1, 2, 3, 4, 5];
const res_arr = arr.map((num) => num += 10)
console.log(arr); //[1, 2, 3, 4, 5]
console.log(res_arr); //[11, 12, 13, 14, 15]

Example 2

Suppose we have an array of users objects ( firstName, lastName, age ) we only want their first and last name ( in one form ).

const users = [
    {firstName: 'Mahmoud', lastName: 'Mohamed', age: 25},
    {firstName: 'Ahmed', lastName: 'Mohamed', age: 30},
    {firstName: 'Omar', lastName: 'Mohamed', age: 35},
]

const result = users.map((user) => user.firstName + ' ' + user.lastName)
console.log(result); //['Mahmoud Mohamed', 'Ahmed Mohamed', 'Omar Mohamed']

How to use filter() function ?

The filter() function takes an array and returns a new array with only the values that meet certain criteria (condition).

It does not effect on the original array.

It is often used to select a subset of data from an array based on certain criteria (condition).

Example 1

Suppose we have an array contains on a set of numbers, and we want to return only the odd numbers from our array.

const arr = [1, 2, 3, 4, 5];
const res_arr= arr.filter((num) => num % 2) // filter out odd numbers
console.log(arr); // [1, 2, 3, 4, 5]
console.log(res_arr); // [1, 3, 5]

Example 2

Suppose we have an array of users objects ( firstName, lastName, age ) and we want to return only the users having age greater than 30 from our array.

const users = [
    {firstName: 'Mahmoud', lastName: 'Mohamed', age: 25},
    {firstName: 'Ahmed', lastName: 'Mohamed', age: 30},
    {firstName: 'Omar', lastName: 'Mohamed', age: 35},
]

// Find the users with age greater than 30
const result = users.filter(({age}) => age > 30)
console.log(result); // [{firstName: 'Omar', lastName: 'Mohamed', age: 35}]

How to use reduce() function ?

The reduce() function takes an array and returns result as a single value.

In the case of the reduce() method, you should used it when you want to perform a specific operation on the elements of an array and return a single value as a result.

The “single value” refers to the accumulated ( total ) result of applying a function to the elements of an array repeatedly .

It does not effect on the original array.

Example 1

Suppose we have an array contains on a set of numbers, and we want to return sum of all numbers in our array.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((total, currentValue) => {
    return total + currentValue;
}, 0)
console.log(sum); // 15

Example 2

Suppose we have an array contains on a set of numbers, and we want to find the maximum value in our array.

let numbers = [5, 20, 100, 60, 1];
const maxValue = numbers.reduce((max, curr) => {
    if(curr > max) 
    max = curr;
    return max;
});
console.log(maxValue); // 100

How to use find() function ?

The find() function takes an array and allows you to search through the array and return the first element that satisfies a provided testing function ( return first match ).

If no elements satisfy the testing function, find() returns undefined.

It does not effect on the original array.

It is often used to serach on something in array and return first match.

Example 1

Suppose we have an array of students objects representing a set of students, and we want to find the first student who has a grade higher than 85.

const students = [
    { name: 'Mahmoud', grade: 82 },
    { name: 'Mohamed', grade: 90 },
    { name: 'Omar', grade: 88 },
    { name: 'Ahmed', grade: 75 }
];

const topStudent = students.find(student => student.grade > 85);

console.log(topStudent); // { name: 'Mohamed', grade: 90 }

How to use sort() function ?

The sort() function takes an array and returns a new sorted array.

It is often used to sort the elements of an array in place and returns the sorted array.

Example 1

Suppose we have an array contains on a set of numbers, and we want to return sorted numbers from our array.

const numbers = [40, 1, 5, 200];
sorted_nums = numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 5, 40, 200]
console.log(sorted_nums); // [1, 5, 40, 200]

Example 2

Suppose we have an array of students objects representing a set of students, and we want to sort array based on grade.

const students = [
    { name: 'Mahmoud', grade: 82 },
    { name: 'Mohamed', grade: 90 },
    { name: 'Omar', grade: 88 },
    { name: 'Ahmed', grade: 75 }
];
students.sort((a, b) => a.grade - b.grade);
console.log(students);

// [
//   { name: 'Ahmed', grade: 75 },
//   { name: 'Mahmoud', grade: 82 },
//   { name: 'Omar', grade: 88 },
//   { name: 'Mohamed', grade: 90 }
// ]

How to use forEach() function ?

The forEach() function takes an array of values and executes a provided function once for each array element.

It is often used to perform side effects, such as modifying elements.

Example 1

Suppose we have an array contains on a set of numbers, and we want to return sum of numbers from our array.

const numbers = [1, 2, 3, 4, 5];
let sum = 0;

numbers.forEach(number => {
    sum += number;
});

console.log(sum); // 15

Differences Between forEach() and Other Iteration Methods

forEach() vs map()

forEach() is used for side effects and does not return a new array, whereas map() returns a new array with the results of applying a function to every element.

Benefits of Higher Order Functions

First, higher order functions can help improve the legibility of your code by making it more easy to understand.
This can help speed up the development process and make it easier to debug code.

Second, higher order functions can help organize your code into smaller parts, making it easier to maintain and extend.

Conclusion

This article showed what a higher order function is, the benefits of using them, and how to use them in practical applications.

Now, whenever you try to use map(), filter(), reduce(), find(), sort(), and forEach() methods and get confused, just remember the following :

• Use map when you want to transform an array.
• Use filter to select a subset of data from an array.
• Use reduce when you want to return a single value as a result.
• Use find when you want to search on a specific value and return the first matach.
• Use sort to sort array elements.
• Use forEach to perform side effects on elements without create a new array in result.

Thanks for reading and see you next time.