DEV Community

Cover image for Stop using Array.map() everywhere 🥵
Suprabha
Suprabha

Posted on

Stop using Array.map() everywhere 🥵

Most of the time I used to see the snippet like this 👇



const fruits = ["apple", "orange", "cherry"];
let text = "";
document.getElementById("main").innerHTML = text;
fruits.map(i => text += i );


Enter fullscreen mode Exit fullscreen mode

In the above snippet, we are adding fruits text to the DOM in main ID.
It seems there is no issue in the above snippet, Though there is one major issue, which we will be going see today.

Let's understand the issue by definition of map, map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

example:



let n = [1, 2, 3, 4];
let add = n.map(i => i + 2);
console.log(add); // [3, 4, 5, 6]


Enter fullscreen mode Exit fullscreen mode

NOTE: Using map() method means returning a new collection of an array.

As discussed, map() method always returns a new array, so if you don’t have any use of a new array then never use map() method.
When you just need to iterate through an array, I will always recommend using other array methods like forEach or for..of.

example:



const fruits = ["apple", "orange", "cherry"];
let text = "";
fruits.forEach(myFunction);

document.getElementById("main").innerHTML = text;

function myFunction(item, index) {
text += index + ": " + item + "<br>";
}

Enter fullscreen mode Exit fullscreen mode




Why do we care about it? 🙄

As we know, map() method always returns an array. If you just need to update DOM then storing those elements into memory form doesn't add any point.
Of course, for a small chunk of numbers nothing is going to happen, however, if we take a larger number here then it affects the performance side as it will store the value in memory which will be redundant.

Summary ⅀

Stop using map() method, if you just need to iterate through an array.
Start using forEach or for...of method, if you want to iterate through an array.

Thanks for reading the article ❤️
Hope this post will be useful!

Buy Me A Coffee

Top comments (30)

Collapse
 
aminnairi profile image
Amin • Edited

Hi @suprabhasupi and thanks for your article.

I wanted to point out that you could also have used map in a different way and still have the expected result.

const root = document.getElementById("root");

if (!root) {
  throw new Error("Root not found");
}

const fruits = ["banana", "apple", "pear"];

const indexed = fruits.map((fruit, index) => {
  return `#${index + 1}: ${fruit}`;
});

const html = indexed.join("<br>");

root.innerHTML = html;
Enter fullscreen mode Exit fullscreen mode

Although I agree with you, I would change the title from Stop using Array.prototype.map everywhere to Start learning when to use Array.prototype.map.

A do/don't kind of article would have been great for beginners to quickly catch the idea, and maybe extend the article to some of the most popular array methods as well.

Collapse
 
hellnar profile image
Stas Klymenko

It's better to use Reduce for this task.

Collapse
 
mehuljariwala profile image
Mehul Jariwala

const fruits = ["banana", "apple", "pear"];
fruits.reduce((initalArr, value, currentIndex) => {
initalArr.push(${currentIndex} --- ${value});
return initalArr;
}, []);

Thread Thread
 
aminnairi profile image
Amin

Well, if you are going with Array.prototype.reduce, you better be not using any side-effects.

const root = document.getElementById("root");

if (!root) {
  throw new Error("Root not found");
}

const fruits = ["banana", "apple", "pear"];

const innerHTML = fruits.reduce((html, fruit, index) => {
  return `${html}#${index + 1}: ${fruit}<br>`;
}, "");

root.innerHTML = innerHTML;
Enter fullscreen mode Exit fullscreen mode
Collapse
 
calinzbaenen profile image
Calin Baenen

I should start making comprehensive guides, so I can gain popularity, since my YT career's dead.

Collapse
 
suprabhasupi profile image
Suprabha

It's a common mistake that devs do sometimes, and the above example suits here, Thanks for sharing this ☺️

Collapse
 
webbureaucrat profile image
webbureaucrat

Hard disagree. As others have said, the string concatenation example should have been reduce instead of map, but always favor immutable, functional operations over procedural ones because it is so much easier to introduce bugs in procedural operations like for loops.

Memory consumption is rarely a factor in most JavaScript apps, and garbage collectors get better every year. This is a classic example of a premature optimization. It's better to use map (and reduce!) for pretty much everything, and then go back and optimize into loops where you know there are bottlenecks, after your codebase is more mature.

Collapse
 
drarig29 profile image
Corentin Girard

You missed the point of the article I think. The whole point of the article is to say that semantically, a map() should be stored in a variable because it creates a new array. And that if you don't care about the result and just want to do side-effects in a "functional" way (here, I use the word "functional" as opposited to with an actual for-loop statement), just use forEach() instead.

Yes, sometimes reduce() will be better and you should refactor to use it, but that's not the point here.

And yes, the argument of memory consumption was a bad way to try giving a reason not to not store the result of a map().

Collapse
 
suprabhasupi profile image
Suprabha

Totally make sense, I also used to point out this in code reviews.
So first complete the task and then refactor it accordingly.

Collapse
 
jakecarpenter profile image
Jake Carpenter

Getting a new array is very much the point. We do this to avoid side effects that are difficult to track. It’s the same reason functions should return a value, not modify a reference.

Immutability by default is a solid strategy that helps avoid countless bugs. Only modify the original array when you have proven map to be a performance bottleneck - and it’s rare.

Collapse
 
hellnar profile image
Stas Klymenko

map - if you expect an array as a result.
reduce - if you expect one value as a result.
forEach - if you don't need to return a result. Better for sync code.
for of - if you don't need to return a result and you might break the loop. Better for async code.

Collapse
 
drarig29 profile image
Corentin Girard

Note that you can use functions like Promise.all() with map() too.

Collapse
 
alfredosalzillo profile image
Alfredo Salzillo

In your last example the forEach is the wrong choice. A reduce would have been better

Collapse
 
seven_77 profile image
Seven

do agree

Collapse
 
suprabhasupi profile image
Suprabha

Yeah, my main POC was to use map method wisely. Try to use other array methods.

Collapse
 
alfredosalzillo profile image
Alfredo Salzillo

Yeah, but a map used wisely would have been better than the for, wrong example

const text = array.map((e, i) => [e,i].join(':')).join('<br>')
Enter fullscreen mode Exit fullscreen mode
Collapse
 
matthewbdaly profile image
Matthew Daly

I disagree somewhat. While the correct use case for map() is for when you want to transform the items in an array, and you shouldn't use it if you're just carrying out an action on each item, these days loops (as opposed to the forEach() method) are best avoided for most use cases, particularly when using a UI library like React.

Using chainable array methods like map() and forEach() has numerous advantages over a loop:

  • It breaks your code into a series of steps, making it easier to understand and reason about than nested loops
  • Because the callback for each is a function, you can add type hints for the parameters and return value when using Flow or Typescript to help document what each item represents
  • It mitigates the need for multiple levels of indentation

Yes, if you're not changing the data, you should use forEach() rather than map(), but in code reviews I would actively discourage using a loop if you can use forEach() instead.

Collapse
 
narasimha1997 profile image
Narasimha Prasanna HN

But yeah it is immediately garbage collected by V8s GC. But still, using map is not recommended for larger arrays, because you may need lot of heap memory at that point in time before it is garbage collected.

Collapse
 
nssimeonov profile image
Info Comment hidden by post author - thread only accessible via permalink

So basically: "don't be stupid, use the right tool for the job". Duh... really?!

I have a question - aren't you doing code reviews in your company? Why do you need to write an article just to point out to newbies, that besides Array.map they have to learn what other methods exist and use them properly?

Oh and give a ridiculous example that is accessing a variable outside the function AND the foreach statement, when all you need in this case is Array.reduce:

const fruits = ["apple", "orange", "cherry"];
let text = fruits.reduce((result,item,index) => result + index + ": " + item + "\n", '');

console.log(text);
Enter fullscreen mode Exit fullscreen mode

Please take some time to study what other options you have before writing articles.

Collapse
 
cess11 profile image
PNS11

As an alternative to the first example I would propose Array.prototype.join(), i.e. remove the text variable and set the HTML to fruits.join(''). In well structured code scope and GC will clean up the fruits array when appropriate.

It's common to have use for both the old array and the new one, e.g. for time travel through app state or when both sets might get rendered depending on user input. When building complex applications one also tends to prefer to avoid data mutations to make code more readable and easier to debug, functional mapping tends to be appropriate for this purpose.

Collapse
 
jeh212 profile image
Jean

This is cool, I worked on a project that i could see map() everywhere for no reason! As you said, when its working with small data, its fine to use it. But when have a massive amount of data, its complicated. Even more complicated when use micro services and the communication between the services is async. Take aaaages to load.

Some comments have been hidden by the post's author - find out more