Why [‘1’, ‘5’, ‘11’].map(parseInt) returns [1, NaN, 3] in Javascript

Let’s go through the example ['1', '5', '11'].map(parseInt) in JavaScript step by step to understand why it returns [1, NaN, 3] instead of the expected [1, 5, 11].

At first glance, it might seem like calling parseInt() on each element of the array should work simply to convert each string into its corresponding integer. However, this doesn't happen because of how map() and parseInt() work together.

Step 1: Understanding map()

The map() function is a standard array method in JavaScript. It takes a callback function and applies this function to each array element, returning a new array with the results.

const result = array.map(callback);

The callback function you pass to map() receives three arguments:

1. The current element (the element being processed in the array),
2. The index of the current element,
3. The array that map() is being called on.

Here’s an example of how map() works:

['a', 'b', 'c'].map((element, index) => {
  console.log(element, index);
});

This will print:

'a' 0
'b' 1
'c' 2