`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.

Answer 1

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:

1. 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.

2. 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...*/);
}

Answer 2

.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