map() vs forEach() to loop through array of objects in React

There are a lot of JavaScript developers who disagree about map() vs forEach().

In this article, I want to talk about differences between two methods and their best use cases. The truth is, in some cases, map() is better, while in others, forEach() takes the lead.

Because most of my readers are interested in React, and I’m mainly a React developer myself, we will look at differences between two methods from the lens of a React developer.

Basic differences

The biggest difference between two methods is that we use forEach() to perform side effects, and we use map() for its return value.

I am personally a fan of pure functions (that don’t have side effects) so map() is much more attractive option to me. However, there are cases when forEach() is better.

Otherwise, two are pretty similar. They take a callback function and perform that function on each item in the array. This guide goes into detail on how to loop through array of objects in React.

Advantages of forEach()

This function has one very clear advantage over map() – its descriptive name. Basically, the name itself tells you what the function does. For beginners, this is huge. As a beginner, I used forEach() much more frequently than I do now.

This is also a disadvantage of map(). It took me a while to understand what It does. I guess that’s partly on me, and my slow learning.

I guess one more advantage of forEach() is that there’s much less abstraction and ‘magic’ happening behind the scenes. When you use forEach(), your code is there for everyone to see, and it’s much clearer what you’re trying to do. Sometimes this means that code is more readable and easier to understand.

However, if someone knows JavaScript well, they are not going to be confused by map() either.

Advantages of map()

It does not perform side effects, does not touch the original array and instead returns new array with modified items. For me, that’s a huge advantage, as it allows me to use map() to render multiple components in React.

It is also much more versatile than forEach(). For instance, you can use map() to iterate over an array of objects directly in JSX. As a result, map() allows you to accomplish the same in much less lines of code.

Loop through array of objects in React – map() vs forEach()

When it comes to React, map() is the undisputed king. There are pretty much no use cases for forEach() method in React.

We can use map() to loop through an array of objects inside JSX, and render multiple components that way. You can not render multiple components inline in JSX with forEach(). You have to do it outside the function. If you do use forEach(), you’ll have to create unnecessary variables and it’ll take more lines of code than necessary.

In short, I do not recommend you use forEach() to loop through an array of objects in React. In my experience, use cases for this function are limited in general. Map() is a much better tool for looping through array to get new items.