JS Gotchas! (map with parseInt)
Tags: javascript
Published: 2020-12-18 16:46:48

In this series we would be discussing on some of the gotchas that I encounter while working with JavaScript. As evident from the title, in this one we would be looking at a problem statement related to `Array.prototype.map` and `parseInt`.

> Note: Please do not confuse with `Map` object that holds key value pair, I will refer `Array.prototype.map`as map in this article

### The problem statement:

Let’s try to figure out the output of the following snippet:

```js
let date = “2020–12–12”;  
let res = date.split(“-”).map(parseInt);  
console.log(res);
```
### The output:
```
[2020, NaN, 1]
```
Interesting, isn’t it? 2020 was as expected but what happened to other elements of `res` ? Why the other elements failed to parse as integers?

Now lets dive into how JS interpreted the statement.

When we apply `map` operation on an array in JS, it expects a callback function and that callback function we have provided that is `parseInt`. In addition to that `map` always passes 3 arguments to the callback function. These 3 arguments being:

1.  The element itself
2.  index of the element
3.  the whole array

If you want to confirm this you can run the following snippet in the console:
```js
[2, 3, 4].map((x, y, z) => console.log(x, y, z))
```
The output will be:
```
2 0 [2, 3, 4]  
3 1 [2, 3, 4]  
4 2 [2, 3, 4]
```
Thus it is clear that this is the way map works.

Now let’s get back to our initial problem statement

The `parseInt` accepts 2 agruments:

1.  `string`: the value to parse
2.  radix(optional): an integer between 2 and 36 denoting the base in mathematical numeral system

Since map passes the 3 arguments, the first _(the element)_ and second _(element’s index)_ is picked up by the `parseInt` but the third _(the array)_ is neglected.

Thus the radix value is being set as the index of the element. Thus in our initial problem, following iterations are performed for `parseInt`:
```js
//first iteration  
parseInt("2020", 0);

//second iteration  
parseInt("12", 1);      

//third iteration:  
parseInt("12", 2);       
```
And since we need to have radix as 10 (if working with decimal number system), our expected result is not met.

### The solution (maybe):
```js
// modified res  
res = date.split(“-”).map((elem) => parseInt(elem)); 
```
> Note: Be careful with the above solution as `parseInt` implementation is up to the browser and not all browser have default radix set to 10, thus it is always advised to pass radix value whenever using `parseInt`

### Other Solutions:
```js
// passing radix value explicitly for the sake of browsers  
res = date.split(“-”).map((elem) => parseInt(elem, 10));

// using Number  
res = date.split(“-”).map(Number);
```
That’s it for this article, I hope you liked it.
This was my first article related to JS, let me know your thoughts in the comment section.

**_Referenced articles:_**

[Map — JavaScript | MDN (mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)  
[parseInt() — JavaScript | MDN (mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt)

[Cover Photo by Joan Gamell on unsplash](https://unsplash.com/@gamell?utm_source=unsplash)