JavaScript has some built in iteration methods that help us repeat an action on every item in an array or an object. In this blog, I will be focusing on four iteration methods that can be used on arrays. These methods are find(), filter(), map(), and forEach().
I will go over the similarities and differences between these four array iteration methods.
Which methods are array specific?
find(), filter() and map() are methods that are specific to arrays; and therefore, they cannot be used on objects. However, forEach() is an iteration method that can be used both on arrays and objects.
What are some similarities between the methods?
find(), filter(), map(), and forEach() all take callback functions. The applied callback functions tell the iterators what action to repeat on the array when iterating over each element within it.
Examples of the methods in use
I will be using an array called usTaxes to show how find(), filter(), map(), and forEach() can be used to iterate over arrays.
const usTaxes = ['income', 'sales', 'excise', 'payroll', 'property', 'estate', 'gift']
.find()
The find() method returns the value of the first element in the provided array that satisfies the provided testing function.
The find() method stops searching through an array as soon as it finds one value that meets the criteria. Therefore, as shown in the code below, the find() method only returns 'payroll' even though there is a second element in the usTaxes array that starts with the letter 'p', 'property'.
If no values satisfy the testing function, find() returns undefined.
console.log(usTaxes.find ((el) => el.startsWith('p')))
// => 'payroll'
console.log(usTaxes.find ((el) => el.startsWith('a')))
// => undefined
.filter()
The filter() method creates a new array with all elements that pass the test implemented by the provided function.
Unlike the find() method, the filter() method keeps searching though an array even after it finds a value that meets the criteria of the callback function. Therefore, as shown in the code below, the filter() method keeps searching through the usTaxes array even after it finds 'payroll' and returns an array with all the values that start with the letter 'p' ['payroll', 'property'].
If no values satisfy the testing function, the filter() method returns an empty array.
console.log(usTaxes.filter ((el) => el.startsWith('p')))
// => ['payroll', 'property']
console.log(usTaxes.filter ((el) => el.startsWith('a')))
// => [ ]
.map()
The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
For example, in the code below, we use map() to iterate over the usTaxes array and return a new array called newUSTaxes. We also used map() to make all the elements of the usTaxes array in uppercase when returning them in the newUSTaxes array.
newUSTaxes = usTaxes.map(el => el.toUpperCase())
console.log(newUSTaxes)
//=> ['INCOME', 'SALES', 'EXCISE', 'PAYROLL', 'PROPERTY', 'ESTATE', 'GIFT']
.forEach()
The forEach() method executes a provided function once for each array element. This is a method that can be used both on objects and arrays. Unlike the other three methods, forEach() returns undefined.
newUSTaxes = usTaxes.forEach(el => el.toUpperCase())
console.log(newUSTaxes)
//=> undefined
If we want the result of the forEach() to be logged, then we have to tell forEach() to do so inside of the callback function we pass it.
usTaxes.forEach(el => console.log(el))
//=>
'income'
'sales'
'excise'
'payroll'
'property'
'estate'
'gift'
Summary
find(), filter(), map(), and forEach() are very useful when we want to iterate over an array.
find()is the best method to use when you want to find the first element that meets the criteria of the callback function you pass the method.filter()is the best method to use when you want to find all the elements within the array that meets the criteria of the callback function you pass the method.map()is the best method to use when you want to manipulate the data within an array in a non-destructive way and expect to have a return value.forEach()is the best method to use when you want to repeat an action on an array in a non-destructive way but not necessarily need a return value at the end.
Top comments (0)