DEV Community

Cover image for The JavaScript Array Map() Method

The JavaScript Array Map() Method

Sarah Chima on December 22, 2018

Ever wondered what the JavaScript array map method is? what it can do? or when it should be used? This is article is for you. Before we go any furt...
Collapse
 
sandordargo profile image
Sandor Dargo

Thanks for your article, the explanation is very clear.

On the other hand, I don't find the second example easy to grasp.

In modern programming, one of the most important principles is that elements should have names easy to understand and at the same time they should never lie about what their underlying structure does.

Let's have a look at it again:

const numbers = [4, 9, 36, 49];

let oddSquareRoots = numbers.map((num) => {
       if(num % 2 != 0) {
           return Math.sqrt(num)     
       }
       return num;
    })
Enter fullscreen mode Exit fullscreen mode

The map function returns a new list called oddSquareRoots. So what do I expect to have in it? It's very simple! Odd square roots! What do I get instead?

[4, 3, 36, 7]
Enter fullscreen mode Exit fullscreen mode

Those are not odd square roots! Those are some of the original numbers mixed with the square roots of some. Odd square roots apparently. Then I have a deeper look, I can figure out that actually, we have those original numbers that are even and the square roots of those that are odd. But that's not what the name says and that's something quite dangerous.

I don't work with JS a lot, so maybe there are different habits. Based on my experience, the example/use-case of applying a callback only on certain elements of a list is maybe a bit misleading.

Just like Python, JS also started to provide functional programming elements. Some of the main elements are map,filter and reduce. Each has its own very clear goal. I don't want to go into the very details, but in fact, they have very simple to understand names.

let oddSquareRoots = numbers.map((num) => {
       if(num % 2 != 0) {
           return Math.sqrt(num)     
       }
       return num;
    })
Enter fullscreen mode Exit fullscreen mode

In this case, map lies. What it does is filtering and then mapping some values and simply keeping some other values. Too many things in a map by an unnamed function.

If you want to get odd square roots, it's probably more readable to do it in two clear steps:

let oddSquareRoots = numbers.filter(num => num % 2 != 0).map(num => Math.sqrt(num));
let evenSquares = numbers.filter(num => num % 2 == 0);
console.log(oddSquareRoots.concat(evenSquares);
Enter fullscreen mode Exit fullscreen mode

If you need those numbers in their original order, maybe map is the only option, but the output's name still lies.

What do you think?

Collapse
 
sarah_chima profile image
Sarah Chima

Thank you, Sandor, for pointing this out. That example was just to show that logic can be used in the map method. However, as you clearly pointed out, the filter method is a more efficient way of achieving that. In fact, my next post is on the filter method. I am going to update that example to add this point in order not to confuse anyone.

Collapse
 
daveskull81 profile image
dAVE Inden

Great article. Thanks for writing this. I can definitely suggest this to someone who is learning Javascript and has questions on how .map() functions. It's also nice for getting a refresher on how .map() works.

Collapse
 
sarah_chima profile image
Sarah Chima

Thank you Dave

Collapse
 
lmuzquiz profile image
lmuzquiz • Edited
const array = [2, 5, 9];
let squares = [];

for (let i = 0; i < array.length; i++) {
    squares.push(array[i] * array[i]));
}

console.log(squares); // [4, 25, 81]
console.log(array); // [2, 5, 9]

On this code block you say that it: " ...finds the square of each element in the array..."

It would be more accurate to say that the relevant part of the code calculates (as opposed to finding) the square root of each element in the array.

Of course by the find, i think you meant "calculate" but then again, why not use the word calculate instead?

Collapse
 
boceto1 profile image
Jean Karlo Obando Ramos

Great article. Thanks for share this post with us.

Collapse
 
nickfazzpdx profile image
Nicholas Fazzolari

Great post. Very clear with sensible examples. The more I learn JavaScript the more I enjoy its power and short syntax.

Collapse
 
sarah_chima profile image
Sarah Chima

Thank you Nicholas

Collapse
 
greatnonso7 profile image
Ichoku Great Chinonso

Thank you for this. I now understand how the map function works in js

Collapse
 
runosaduwa profile image
Runo-saduwa

Totally awesome!, I love this

Collapse
 
sarah_chima profile image
Sarah Chima

Thank you Runo

Collapse
 
teexee19 profile image
Tochukwu Franklin Ene

Awesome one, map methods have never been explained any clearer than this to me before. Thanks a lot Sarah.

Collapse
 
sarah_chima profile image
Sarah Chima

Thank you Frank

Collapse
 
rupeshiya profile image
Rupesh Krishna Jha

Hi,
Thanks for sharing .It's really awesome.
But I have one question that in angular2 + why we are using with http get ,post etc ?

Collapse
 
florensadi profile image
💎

Thanks Sarah. I understand better now.

Collapse
 
ruwanliyanage123 profile image
ruwan liyanage

Thank you very much for your article

Collapse
 
dougblackjr profile image
Doug Black

I was literally just thinking to myself, "I need to really understand how to use this." Thank you for explaining this!!!

Collapse
 
sarah_chima profile image
Sarah Chima

Thank you for reading

Collapse
 
simplecarllos profile image
simple-carllos

Great post Sarah. I now clearly understand the map method. Can you blog about Javascript Events and their use in a map function on your next post?