DEV Community

Beth
Beth

Posted on • Edited on

4 5

JS Array Iteration Methods

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']

Enter fullscreen mode Exit fullscreen mode

.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
Enter fullscreen mode Exit fullscreen mode

.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')))

// => [ ]
Enter fullscreen mode Exit fullscreen mode

.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']

Enter fullscreen mode Exit fullscreen mode

.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
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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.

Resources

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay