DEV Community

How The Hell Do I use Map?

Levi ᕙ(⇀‸↼‶)ᕗ on December 18, 2018

This is a post from my personal blog located Here They are published there a day or so early. How fancy. I often encourage my students to use the...
Collapse
 
nielsbom profile image
Niels Bom

Array.map is very useful yes.

I think “These three functions could probably remove thousands of lines of your most confusing buggy code.“ is a bit of an overstatement.

Also: there are situations where you’d rather have a for loop than map: if you want to mutate the array in-place (for performance reasons for example).

Collapse
 
wuz profile image
Conlin Durbin

I think it depends. I mostly write React these days and I almost never use a for loop. The nice thing about maps is they implictly return an array, allowing you to avoid all imperative code. They also make it so you are not writing code with side effects.

Performance might be a reason for a for loop, but that eliminates the gains that you get from having immutable data structures in your code.

Collapse
 
nielsbom profile image
Niels Bom

Though I agree that immutability and functional programming are very useful, and I like writing that style of code, you can always come across a situation where a certain amount of performance is necessary so that creating a lot of new data structures or very big ones (like map does) is not an option.

Collapse
 
liltechnomancer profile image
Levi ᕙ(⇀‸↼‶)ᕗ

it is an overstatement if you are a strong developer writing clear easy to follow loops. Newbies rarely do, good point about perf though!

Collapse
 
joelnet profile image
JavaScript Joel

If you want to mutate an array in place, you could also use reduce. While it's recommend to create a new array, it is technically possible to mutate an existing array with reduce.

Collapse
 
yokim profile image
Yokim Pillay

Nice explanation! Simple and concise. 😄

You've got a typo in your second code block:

const doubleScores = sores.map(x => x * 2)

There's a good book that's written for PHP, but provides a good understanding of higher-order functions like map and filter, written by Adam Wathan, called Refactoring to Collections.

It really helped me clean up and understand the work I do, on both front and backend layers.

Collapse
 
temmyraharjo profile image
temmyraharjo

Nice article Levi. But now i'm stuck using old school javascript because of my users still use IE 9. :'(

Just little bit input:

  • When declaring the students, you forgot to put ',' between name and grade.
  • on isPassing method why not make it shorter to (student) => student.grade >= 65 only?
Collapse
 
liltechnomancer profile image
Levi ᕙ(⇀‸↼‶)ᕗ

Ooh good catch on both! I’ll need to edit this when I can!

Collapse
 
pavelloz profile image
Paweł Kowalski

While we are at typos catching :)

cosnt scores = [90, 80, 25, 50]
Collapse
 
samuraiseoul profile image
Sophie The Lionhart

I find that teaching people that map means basically "Transform", and that reduce is basically "Sum" helps most people. To be fair reduce can be more than summing, but map is really transforming the data so its helpful to think that way I've found.

Collapse
 
wuz profile image
Conlin Durbin

Great article Levi! map is a great tool to add to your toolbox as a developer!

Collapse
 
liltechnomancer profile image
Levi ᕙ(⇀‸↼‶)ᕗ

Definitely one of my favorites!

Collapse
 
xaviermitjavilamoix profile image
Xavier Mitjavila Moix

Thanks, It is valuable.

Collapse
 
lmolivera profile image
Lucas Olivera

I understand exactly what you are talking about because I struggle to use map, filter and reduce. Excellent post! Waiting for "How the hell do I use reduce" and "How the hell do I use filter".

Collapse
 
liltechnomancer profile image
Levi ᕙ(⇀‸↼‶)ᕗ

Excellent points didn't really consider this! My next title in the series will be more clear. Thanks!