[JS Array.map 에러] map(Number)는 되는데 map(parseInt)는 왜 안돼?

에러 배경

코테를 진행하는 도중 문자열을 배열로 만들고 그 값들을 숫자로 바꿔서 사용하려고 map(parseInt)를 사용하는 상황이었습니다.

에러 그 잡채 

숫자로 결과가 나오지 않고 숫자가 아님을 의미하는 NaN이 결과로 계속 출력되었습니다.

`2 1 5`.trim().split(" ").map(parseInt);

// 결과
// [2, NaN, NaN]

해결 과정

해결1. map(Number)

`2 1 5`.trim().split(" ").map(Number);

// 결과
// [2, 1, 5]

 

해결2. map(el => parseInt(el))

`2 1 5`.trim().split(" ").map(el=>parseInt(el));

// 결과
// [2, 1, 5]

정리

에러 자체는 간단하게 해결할 수 있는 에러였는데, 이번 에러에서 중요한 것은 발생한 원인입니다.

 

에러의 원인

map에서 제공하는 인자와 parseInt에서 받아가는 인수의 문제입니다.

map((배열의 원소, 인덱스, 기존 배열)=>{});

parseInt(파싱할 값, 진법);

/*
map.(parseInt);으로 사용할 경우
map((el,i,arr)=>parseInt(el,i,arr));와 같은 요청이다.
예를 들면
`2 1 5`.split(' ').map((el, i, arr) => {
    console.log(el, i, arr);
    console.log(parseInt(el, i, arr));
  });의 결과는
2 0 [ '2', '1', '5' ]
2
1 1 [ '2', '1', '5' ]
NaN
5 2 [ '2', '1', '5' ]
NaN
이 된다.
*/

 

결과적으로 map을 통해 배열의 값들을 숫자로 바꿀 때는 Number를 사용하거나 parseInt의 인수를 정확히 넣어주어야 합니다.