`for` loops vs `.map` to iterate arrays

Question

Is there a specific reason why is better to use .map than for loops in React?

I'm working on a project where all arrays are being iterated with for loops but I'm convinced that is better and good practice to use .map because it creates a copy of the array, that to my understanding is better practice but I can't find a specific reason.

`.map` is good for conciseness and readability. `for` loops are still an option, they're just not a nice-looking one — CertainPerformance, Mar 21 '20 at 09:11
Does this answer your question? [When/why to use map/reduce over for loops](https://stackoverflow.com/questions/29640254/when-why-to-use-map-reduce-over-for-loops) — Rashomon, Mar 21 '20 at 09:12
For these kinds of good practices, I have written an article. You can read it. JavaScript best Practices. https://medium.com/swlh/how-not-to-write-code-javascript-62a7fa1f819c — xdeepakv, Mar 21 '20 at 09:27

T.J. Crowder · Answer 1 · 2020-03-21T09:56:32.497

Is there a specific reason why is better to use .map than for loops in React?

If you're just iterating, map is the wrong tool. map is for mapping arrays: producing a new array based on the values from the previous array. Someone somewhere is teaching map as an iteration tool, unfortunately, doing their students a disservice. (I wish I knew who it was so I could have a word.) Never do this:

// Don't do this
myArray.map(entry => {
    // ...do something with `entry`...
});

For iteration, it's a choice between a for loop, a for-of loop, and the forEach method. (Well, and a few other things; see my answer here for a thorough rundown.)

For instance, using forEach

myArray.forEach(entry => {
    // ...do something with `entry`...
});

vs. using for-of:

for (const entry of myArray) {
    // ...do something with `entry`...
}

(Those aren't quite equivalent. The former has to be an array. The latter can be any iterable object.)

The reason you may see map a lot in React is that you're frequently mapping things in React, in at least two ways:

Mapping from raw data to JSX elements, like this:
```
return (
    <div>
    {myData.map(({id, name}) => <div key={id}>{name}</div>)}
    </div>
);
```
Since that's a mapping operation, with the array created by map being used to provide the contents of the outer div, map is the right choice there.
Mapping from old state to new state, like this:
```
const [myArray, setMyArray] = useState([]);
// ...
setMyArray(myArray.map(obj => {...obj, update: "updated value"}));
```
Since that again is a mapping operation, creating a new array to set as the myArray state member, map is the right choice.

...but I'm convinced that is better and good practice to use .map because it creates a copy of the array...

If you want a copy/updated version of the array, yes, map is a good choice. It's more concise than the equivalent for loop (or even for-of):

const newArray = oldArray.map(entry => /*...update...*/);

vs.

// Probably not best practice unless you have conditional logic
// in the loop body that may or may not `push` (or similar)
const newArray = [];
for (const entry of oldArray) {
    newArray.push(/*...update...*/);
}

score 2 · Answer 2 · answered Mar 28 '20 at 21:02

.map() maps each array value to a new value, and returns a brand new array. In React.js context, .map() can be used to map each array item to a piece of JSX fragment.

for loop also iterates over an array, just like .map(). The major difference is that you can specify custom computation with for loop. Whereas .map() is specifically designed for mapping

`for` loops vs `.map` to iterate arrays

2 Answers2

Linked