DEV Community

Theofanis Despoudis
Theofanis Despoudis

Posted on

Explain this Javascript expression just like I'm five

Explain to me the result of this expression in Javascript:

["10", "10", "10", "10"].map(parseInt)
📢 แจ้งเตือน: theodesp/explain this javascript expression just like im five d - ประเด็นร้อน 📢 แจ้งเตือน: theodesp/explain this javascript expression just like im five d - ประเด็นร้อน

Top comments (6)

📢 แจ้งเตือน: theodesp/explain this javascript expression just like im five d - ประเด็นร้อน
 
aurelkurtula profile image
aurel kurtula • • Edited

parseInt() takes to arguments, a string and a radix. I usually pass just the string I want converting as a number, you are passing both the string and the radix!

map gives us the value and the index (and the actual array)

["10", "10", "10", "10"].map( (value,index) => ... )

By just doing .map(parseInt) parseInt is taking both the value and the index.

Basically the second iteration is parseInt('10',1) and returns NaN.

Finally, to test that that's what happens, the following would return "0: 10" "1: 10" "2: 10" "3: 10"

function myFunc(value, i){
  console.log(`${i}: ${value}`)
}
["10", "10", "10", "10"].map(myFunc)
📢 แจ้งเตือน: theodesp/explain this javascript expression just like im five d - ประเด็นร้อน
 
nektro profile image
Meghan (she/her) •
["10", "10", "10", "10"].map(parseInt)  ==>  [10, NaN, 2, 3]
📢 แจ้งเตือน: theodesp/explain this javascript expression just like im five d - ประเด็นร้อน 📢 แจ้งเตือน: theodesp/explain this javascript expression just like im five d - ประเด็นร้อน

This is because from Array.prototype.map

map calls a provided callback function once for each element in an array, in order, and constructs a new array from the results.
callback is invoked with three arguments: the value of the element, the index of the element, and the Array object being traversed.

Also from parseInt()

Syntax: parseInt(string, radix);

So when this is executing it will return

[
    parseInt("10", 0),
    parseInt("10", 1),
    parseInt("10", 2),
    parseInt("10", 3)
]
📢 แจ้งเตือน: theodesp/explain this javascript expression just like im five d - ประเด็นร้อน 📢 แจ้งเตือน: theodesp/explain this javascript expression just like im five d - ประเด็นร้อน
📢 แจ้งเตือน: theodesp/explain this javascript expression just like im five d - ประเด็นร้อน
 
katzy687 profile image
Natti Katz •

take a list of strings that represent numbers and return a new list with all the strings converted to the numbers they represent, but they now have the data type of number

📢 แจ้งเตือน: theodesp/explain this javascript expression just like im five d - ประเด็นร้อน
 
mervinsv profile image
Mervin • • Edited

if you execute this statement, the result will be [10, NaN, 2, 3]. Why?
But if you use parseFloat instead of parseInt, you will get the list of numbers.
I can't really explain why this is happening. But you can use this one as a replacement:

["10", "10", "10", "10"].map(function(x){ return parseInt(x); })
📢 แจ้งเตือน: theodesp/explain this javascript expression just like im five d - ประเด็นร้อน
 
katzy687 profile image
Natti Katz • • Edited

whoa, you're right. Can someone explain what is happening?

I usually write map functions like this

["10", "10", "10", "10"].map(item => parseInt(item));

and that does indeed return [10, 10, 10, 10].

passing just parseInt as a callback.. how does it know what arguments to take?

📢 แจ้งเตือน: theodesp/explain this javascript expression just like im five d - ประเด็นร้อน Thread
 
ozzyogkush profile image
Derek Rosenzweig •

This answer on StackOverflow gives the correct reasoning: stackoverflow.com/a/262511/910328