JavaScript Higher-Order Functions — A Short and Sweet Reference Guide

Becoming familiar with the basic JavaScript iterators can make wonders for your JavaScript code. Using them effectively can make your code cleaner, easier to read, and all around better. Hopefully after reading this blog, you’ll be able to use JavaScript Iterators to your advantage. To be concise, I will use arrow functions in the example code.

Every

The every method returns true if all of elements of the array satisfy a condition and false otherwise. This method accepts one argument: a callback function. This callback function has one argument (an element of the array) and should return a condition that can be evaluated as true or false. See the example below:

const arr = [1, 2, 3, 4, 5]

arr.every(e => e > 0) 
=> true

arr.every(e => e > 1)
=> false

Filter

The filter method returns a new array of all elements of the array that satisfy a condition. This method accepts one argument: a callback function. Similar to every, this callback function has one argument (an element of the array) and should return a condition that can be evaluated as true or false. See the example below:

const arr = [1, 2, 3, 4, 5]

arr.filter(e => e > 0) 
=> [1, 2, 3, 4, 5]

arr.filter(e => e % 2 === 0)
=> [2, 4]

Find

The find method returns the first element of the array that satisfy a condition. Find accepts one argument: a callback function. Similar to every and filter, this callback function has one argument (an element of the array) and should return a condition that can be evaluated as true or false. See the example below:

const arr = [1, 2, 3, 4, 5]

arr.find(e => e > 0) 
=> 1

arr.find(e => e % 2 === 0)
=> 2

ForEach

The forEach method loops over every element of the array and performs some action specified by a callback function. forEach accepts one argument: a callback function which has one argument (an element of the array). See the example below:

const arr = [1, 2, 3, 4, 5]

arr.forEach(e => console.log(`Hi! I'm ${e}`))
=> Hi! I'm 1
   Hi! I'm 2
   Hi! I'm 3
   Hi! I'm 4
   Hi! I'm 5

Includes

The includes method returns true if all any elements of the array are equal to the function argument and false otherwise. This method accepts one argument: the value of which to find. See the example below:

const arr = [1, 2, 3, 4, 5]

arr.includes(5) 
=> true

arr.includes(6)
=> false

Map

The map method returns a new array with all elements transformed by a function. This method accepts one argument: a callback function which accepts one argument (an element of the array) and should return the desired transformation. See the example below:

const arr = [1, 2, 3, 4, 5]

arr.map(e => e ** 2)
=> [1, 4, 9, 16, 25]

arr.map(e => `I'm ${e}!`
["I'm 1", "I'm 2", "I'm 3", "I'm 4", "I'm 5"]

Reduce

The reduce method returns a value accumulated from all elements of the array. This method accepts one argument: a callback function. This callback function should accept two arguments: the aggregator and an element of the array. The function should return an expression that sets the aggregator to the desired reduced value. See the example below:

const arr = [1, 2, 3, 4, 5]

arr.reduce((total, e) => total = total + e)
=> [1, 4, 9, 16, 25]

arr.reduce((agg, e) => agg = agg + 1 / e)
=> 2.28333333333

Some

The some method returns true if any of elements of the array satisfy a condition and false otherwise. This method accepts one argument: a callback function. This callback function has one argument (an element of the array) and should return a condition that can be evaluated as true or false. See the example below.

const arr = [1, 2, 3, 4, 5]

arr.some(e => e > 4) 
=> true

arr.some(e => e > 6)
=> false

Sort

The sort method destructively sorts the array. Without any arguments, the array will be sorted numerically, however, a callback function an be used to sort the array as desired. This callback function accepts two arguments: both are elements of the array. The callback function should return a negative number if the first element argument should sorted be before the second and a positive number if the second element should be sorted before the first element. See the example below:

let arr = [2, 1, 4, 3, 5]

arr.sort() 
=> [1, 2, 3, 4, 5]

arr = [2, 1, 4, 3, 5]
arr.sort((e1, e2) => e1 - e2)
=> [1, 2, 3, 4, 5]

arr.sort((e1, e2) => e2 - e1)
=> [5, 4, 3, 2, 1]

Conclusion

Hopefully now you have a better understanding of these JavaScript iterators. Using these effectively can make your code more concise and much more readable. Happy coding!