[JS] map(Number), map(parseInt) 정리

🐥 map(Number), map(parseInt) 정리

우선 Number()와 parseInt에 대해서 먼저 알아보겠습니다.

1. Number()

Number(value)

Number의 경우에는 매개변수가 한 개입니다.

해당 인수를 숫자로 변환 후 반환합니다.

2.parseInt()

parseInt(string)
parseInt(string, radix)

parseInt는 매개변수가 2개입니다.

radix에 아무 값을 주지 않은 경우에는 string값을 정수형으로 바꾼 후 반환합니다.

하지만 radix에 값을 줄 경우에는 string값을 radix진수로 표현한 정수를 반환합니다.

 

 

이제 Number와 parseInt에 대해서 알아봤으니 map에 이것들을 적용했을 때 어떻게 되는지 알아보겠습니다.

const numbers = ['1', '2', '3'];
const test = numbers.map(Number);
const test2 = numbers.map(parseInt); 

console.log(test); // [ 1, 2, 3 ]
console.log(test2); // [ 1, NaN, NaN ]

map의 함수에 Number를 넣어주면 numbers의 각 값에 Number()가 적용되어서 숫자 형태의 값이 나오지만

parseInt를 넣어주면 numbers의 각 값에 parseInt()가 적용될 수 없습니다.

 

왜냐하면 위에서 알아본 parseInt는 매개변수가 2개까지 들어갈 수 있기 때문입니다.

따라서 아래와 같이 동작하게 됩니다. 그렇기 때문에 parseInt는 저희가 예상한 대로 값을 반환시켜주지 않습니다.

// parseInt(string, radix) -> map(parseInt(value, index))
/* first iteration  (index is 0): */ parseInt("1", 0); // 1
/* second iteration (index is 1): */ parseInt("2", 1); // NaN
/* third iteration  (index is 2): */ parseInt("3", 2); // NaN

 

따라서 map에서 parseInt를 사용하고 싶다면 아래와 같은 방식을 이용해야 합니다.

["1", "2", "3"].map((str) => parseInt(str)); // [1, 2, 3]

---

🐥💬

이런 문제가 생길거라고 생각도 못했는데 ... 문제를 풀면서 이런 문제도 있구나를 알게되었습니다.

메서드에 대해서 정말 확실하게 알아야 이런 문제가 생겨도 왜 문제가 생겼는지를 알 수 있을 것 같습니다...

나중에 시간 날 때 JS 공식문서에서 메서드의 매개변수나 예제들을 다시 한 번 싹 훝어봐야겠습니다!! ㅠㅠ