When not to use Array.prototype.map()
When all you have is a hammer everything looks like a nail.
It's nearly impossible to find a JavaScript developer who hasn't used [].map()
. But I have unfortunately come across many, during interviews and PR reviews, with different levels of experience, misusing it.
Let's get a better understanding of it so we don't misuse it.
- What is
[].map()
? - Why to use
[].map()
? - When (not) / How to use
[].map()
?
What is [].map()
?
Simply put, it maps a given thing in one form to another. A photocopying machine copying a colour image into the black and white image is the best analogy.
Points to consider -
- The original photo remains intact.
- A new photo is received.
- The image on the original and the new copy is same (except for colours).
Similarly, when using map
-
- The original array remains intact.
- A new array is returned.
- The original and returned array do have things in common or at least they are bound by some mapping logic.
Why to use [].map()
?
- It's intuitive.
- It's declarative.
- It allows chaining.
- It's always good to use the right tools for the right job in the right way.
When (not) / How to use [].map()
?
Use map
when -
- mapping an array into a new array, with some specific mapping logic.
- expecting a new array to be returned (and actually use it in next steps).
const actors = [{
name: 'Bryan Cranston',
aka: 'Walter White',
birthYear: 1956,
}, {
name: 'Aaron Paul',
aka: 'Jesse Pinkman',
birthYear: 1979,
}, {
name: 'Bob Odenkirk',
aka: 'Saul Goodman',
birthYear: 1962,
}];
// Get alternative name and age for all actors
const akaAndAgeForActors = actors.map(({
aka,
birthYear
}) => ({
aka,
age: new Date().getFullYear() - birthYear,
}));
Do not use map
when -
- the returned array is not used in next steps.
- not returning anything from the
callbackFunction
ormapperFunction
passed tomap
.Do NOT use
map
to iterate over an array.
Have seen this pattern multiple times and should be avoided.
const series = [{
name: 'Breaking Bad',
isWatched: true
}, {
name: 'Better Call Saul',
isWatched: true,
}, {
name: 'Ozark',
isWatched: true,
}, {
name: 'Peaky Blinders',
isWatched: false,
}];
// Get names of all watched series
const watchedSeries = [];
series.map(({
name,
isWatched
}) => {
if (isWatched) {
watchedSeries.push({
name,
})
}
});
Instead use forEach or for...of.
For more information have a look at MDN Docs here.
Next time using [].map
, remember -
It's pointless to use a photocopy machine if the returned duplicate will be discarded.
Cover Photo by T R A V E L E R G E E K on Unsplash
Did you find this article valuable?
Support Niranjan Borawake by becoming a sponsor. Any amount is appreciated!