In a previous article we've explained what functions are and what is their job. If you need a refresher please revisit this lesson JavaScript Tutorial Series: Functions.
In this article we're going to talk about higher-order functions and discuss some examples.
What is a higher-order function ?
A function is referred to as higher-order if it accepts another function as an argument or returns another function as a result. Because functions can now be used as values, many more opportunities for writing more flexible and reusable code are now available. Higher-order functions can be used to create functions that are more general and adaptable to different situations.
JavaScript comes with a number of built-in higher-order functions which we'll go over some in details.
forEach()
The forEach() higher-order function takes an array and applies a specific function to each element of the array. forEach() modifies the initial array rather than returning a new one, in contrast to map(), filter(), and reduce().
const numbers = [10, 20, 30, 40, 50];
numbers.forEach(num => console.log(num));
// Output: [10, 20, 30, 40, 50]
In this example, an array of numbers is defined, and the forEach() method is used to iterate through each element of the array. The callback function that logs the number to the console is executed by the forEach() method for each number in the array.
map()
The map() higher-order function transforms the values of an array by applying a specified function to each element before returning a new array. The initial array is left unchanged.
const numbers = [10, 20, 30, 40, 50];
const doubledNums = numbers.map(num => num * 2);
console.log(doubledNums); // Output: [20, 40, 60, 80, 100]
In this example, the map() method is provided with the arrow function num=>num*2. This arrow function multiplies each element in the numbers array by two and accepts a single parameter, num, to represent each element. Each element of the numbers array is subjected to this function using the map() method, which then generates a new array.
The console then displays [20, 40, 60, 80, 100] after we log the doubledNums array.
filter()
The filter() higher-order function takes an array and returns a new array that only contains the elements that meet a specified condition.
const numbers = [11, 12, 13, 14, 15];
const even = numbers.filter(num => num % 2 === 0);
console.log(even); // Output: [12, 14]
In the example above we've defined an array called numbers, and then used the filter() method to create a new array called even. Each element of the numbers array is filtered using the function that is passed as an argument to the filter method. The function determines whether a given number is even by determining whether it is divisible by 2 without any remainder, and if it is, it is added to the new even array. The resulting even array only contains the even numbers from the initial numbers array. The console.log command outputs the even array, which in this case only contains the two even numbers (12 and 14) from the initial numbers array.
reduce()
The reduce() higher-order function takes an array and applies a specified function to each element, resulting in the accumulation of a single value. The function ends with the return of the total value.
const numbers = [10, 20, 30, 40, 50];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // Output: 150
In the example above, an array called numbers has been defined, and the reduce method is then used to determine the sum of each element in the array. Two arguments are required by the reduce method: an initial value for the accumulator and a function that specifies how the elements should be combined.The function adds each element to the accumulator, which starts out with a value of 0. The final step is to use console.log to output the result , in this case 150, to the console.
every()
The every() higher-order function takes an array and returns true if each element satisfies a predetermined condition or false otherwise.
const numbers = [10, 20, 30, 40, 50];
const even = numbers.every( num=> num % 2 === 0);
console.log(even); // Output: true
In the example above the every() method was used in to check whether all the elements of the numbers array were even numbers. The function that is passed as an argument to the every() method which is used to apply that function to each element of the numbers array. The function looks to see if it can be divided by 2 without leaving a remainder (num% 2 === 0). The every() function returns true and assigns it to the even variable if every element in the array satisfies this condition. Then the result is printed to the console.
some()
The some() higher-order function determines whether at least one element in an array satisfies a specified condition. If the condition is met by at least one element, it returns the boolean value true, otherwise it returns false.
const numbers = [15, 25, 35, 40, 55];
const even = numbers.some(num => num % 2 === 0);
console.log(even); // Output: true
In the example above the some() method was used in to check whether one of the elements of the numbers array is even numbers. The function that is passed as an argument to the some() method which is used to apply that function to each element of the numbers array. The function looks to see if it can be divided by 2 without leaving a remainder (num% 2 === 0). The some() function returns true and assigns it to the even variable if at least one element in the array satisfies this condition. Then the result is printed to the console.
Top comments (4)
Higher-order functions are one of the best advantages to writing in a language like JavaScript. The ability to pass around functionality allows for a lot of opportunities to write really clear code. I wasn't aware of the
some()function though, which is cool.im glad i was able to provide you with more information! thank you for your comment!
I think there is a mistake in every() loop where you have wrote
num is repeated.
it is fixed! thank you for pointing it out!