Notice
Recent Posts
Recent Comments
Link
프로그래밍 공부방
[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 공식문서에서 메서드의 매개변수나 예제들을 다시 한 번 싹 훝어봐야겠습니다!! ㅠㅠ
'프론트엔드 > JavaScript' 카테고리의 다른 글
[JavaScript] var, let, const 차이점 정리 (호이스팅, 스코프) (0) | 2023.08.05 |
---|---|
[JavaScript] 자바스크립트 로드맵 (JavaScript Roadmap) (0) | 2023.08.05 |
[JS] BigInt 정리 (0) | 2023.04.09 |
[PHP갤러리프로젝트#03] 개인별 갤러리 생성하기 (0) | 2022.06.17 |
[js] 자바스크립트 함수 (0) | 2022.05.25 |
Comments