Niranjan Borawake
W3H - What Why When How

W3H - What Why When How

When not to use Array.prototype.map()

When not to use Array.prototype.map()

When all you have is a hammer everything looks like a nail.

Niranjan Borawake

Published on Jun 18, 2021

3 min read

Subscribe to my newsletter and never miss my upcoming articles

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.

arrayMap.png

Points to consider -

  1. The original photo remains intact.
  2. A new photo is received.
  3. The image on the original and the new copy is same (except for colours).

Similarly, when using map -

  1. The original array remains intact.
  2. A new array is returned.
  3. 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 or mapperFunction passed to map.

    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!

See recent sponsors Learn more about Hashnode Sponsors
 
Share this