Untangling the Confusion: Why `parseInt` Yields `NaN` with `map` in JavaScript

• parseInt function: This function attempts to convert a string representation of a number into an actual integer value. It can optionally take a second argument, the "radix" (base), which specifies the number system used to interpret the string (e.g., base 10 for decimal, base 16 for hexadecimal).
• Array.map method: This method creates a new array by applying a provided function to each element of the original array and returning the transformed elements.

The Problem:

The unexpected behavior arises because:

1. Number of arguments: parseInt expects two arguments: the string to be parsed and the radix (optional).
2. map's default arguments: When you call map without explicitly specifying the arguments passed to the callback function, it implicitly passes three arguments:
   • The current element from the array.
   • The element's index within the array.
   • The original array itself.

Mismatch in Arguments:

Since parseInt is designed for only two arguments, when used within map with the default implicit arguments:

• The first argument intended for the string to be parsed becomes the actual string element.
• The second argument intended for the radix (which is usually optional) incorrectly receives the index of the element from the array.

Unexpected Behavior:

• If the index is not a valid radix (e.g., it's not between 2 and 36), parseInt fails to parse and returns NaN.
• In some cases, the index might coincidentally lead to a valid base (e.g., index 1 might be interpreted as base 10), resulting in correct parsing. This inconsistency can be confusing and potentially lead to errors.

Examples:

const stringArray = ["1", "2", "3"];

// Incorrect usage (implicit arguments):
const wrongResults = stringArray.map(parseInt); // [NaN, "2", "3"] (inconsistent)

// Correct usage (explicit arguments):
const correctResults = stringArray.map(item => parseInt(item, 10)); // [1, 2, 3] (all parsed correctly)

Solutions:

• Explicit arguments with map: As shown in the correct example, explicitly pass the desired arguments to the callback function within map:

stringArray.map(item => parseInt(item, 10)); // Parses all elements as decimal (base 10)

• Arrow function with optional chaining: If you specifically want to handle potential non-numeric values, use an arrow function and optional chaining (?.):

stringArray.map(item => parseInt(item)?.valueOf() || 0); // Parses and converts to number, or returns 0 if not parsable

• Loop through the array manually: If map doesn't suit your needs, you can always iterate through the array manually and use parseInt with the desired radix:

const parsedArray = [];
for (let i = 0; i < stringArray.length; i++) {
  parsedArray.push(parseInt(stringArray[i], 10));
}