[JS] 숫자형으로의 변환 number, parseInt 차이에 대한 고찰

<참고자료>

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Array.prototype.map() - JavaScript | MDN

https://dororongju.tistory.com/71

[자바스크립트] 형변환 Number() 와 parseInt() 의 차이

---

Intro 고민의 시작

arr.map(callback(currentValue[, index[, array]])[, thisArg])

map() 함수의 callback으로 기본 내재 함수를 사용할 때, parseInt 만큼은 화살표 함수를 이용하는 이유가 궁금해짐.

첫번째 참고자료를 읽어보니 parseInt가 갖는 성질 때문이었다.

// 아래 라인을 보시면...
['1', '2', '3'].map(parseInt);
// 결과를 [1, 2, 3] 으로 기대할 수 있습니다.
// 그러나 실제 결과는 [1, NaN, NaN] 입니다.

// parseInt 함수는 보통 하나의 인자만 사용하지만, 두 개를 받을 수 있습니다.
// 첫 번째 인자는 변환하고자 하는 표현이고 두 번째는 숫자로 변환할 때 사용할 진법입니다.
// Array.prototype.map은 콜백에 세 가지 인자를 전달합니다.
// 배열의 값, 값의 인덱스, 그리고 배열
// 세 번째 인자는 parseInt가 무시하지만 두 번째 인자는 아닙니다.
// 따라서 혼란스러운 결과를 도출할 수 있습니다. 자세한 내용은 블로그 포스트를 참고하시길 바랍니다.

function returnInt(element) {
  return parseInt(element, 10);
}

['1', '2', '3'].map(returnInt); // [1, 2, 3]
// 실제 결과가 예상한 대로 배열의 숫자와 같습니다.

// 위와 같지만 더 간단한 화살표 표현식
['1', '2', '3'].map(str => parseInt(str));

// 더 간단하게 해결할 수 있는 방법
['1', '2', '3'].map(Number); // [1, 2, 3]
// 그러나 `parseInt`와 달리 float이나 지수표현도 반환합니다.
['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]

---

number(str)과 parseInt(str)의 차이

 

1. 문자열이 숫자+글자로 구성되어 있는 경우 처리하는 방식이 다르다.

var in_my_pocket = '1000$';
var after_date = '-1000$';
var what_happened = 'paying_for_dates:2000$'

console.log(Number(in_my_pocket)); // NaN
console.log(parseInt(in_my_pocket)); // 1000
console.log(parseInt(after_date)); // -1000
console.log(parseInt(what_happened)); // NaN

Number는 숫자로만 구성되어 있는 문자열을 처리할 수 있는 반면,

parseInt는 숫자로 시작하는 경우에만 해당 문자열을 수형으로 바꾸어준다.

 

경우에 따라 적절히 사용해보자.

 

 

2. number(str)은 float이나 지수 표현도 반환가능하다.

 

첫번째 코드블럭 참조

 

 

3. parseInt(str)은 2개의 인자를 받습니다.

   따라서 map()의 callback 함수로 쓰일 때 조심해야 합니다.

 

callback으로 쓰이는 함수는 map()으로부터 3개의 인자를 전달받습니다.

arr.map(callback(currentValue[, index[, array]])[, thisArg])

첫번째로 callback 함수를 적용하고자하는 array 속 data 요소

두번째로 각 data의 index 값,

세번째로 array 자체.

 

 

parseInt(str)은 2개의 인자를 가집니다.

parseInt(string, radix)

첫번째는 문자열

두번째는 수형으로 표현할 때의 진법으로 2부터 36사이의 값을 받아야합니다. 

이는 map()과 parseInt()를 함께 사용할 때 조심해야 하는 핵심 이유에 해당합니다.

 

두번째 인자가 0인 경우 parseInt의 특성 상 이를 10진법으로 여기는 반면

두번째 인자가 1인 경우 값을 표현해내지 못합니다. (출처: http://www.wirfs-brock.com/allen/posts/166)

( + parseInt의 두번째 인자 radix를 반드시 설정하고 이용해야 하겠네요. default가 10진법이 아니라는 사실)

 

예시입니다.

var num = ['1', '2', '3'];
num.map(parseInt); // [1, NaN, NaN]

첫번째 요소에 parseInt() 적용: '1' => 1로 변환

	from map() to parseInt()	to parseInt()
첫번째 인자	['1']                        // data	'1' => 1                // 형변환
두번째 인자	0                          // index	0                         // 진법 (radix)
세번째 인자	['1', '2', '3']              // array	무시

두번째 요소에 parseInt() 적용: 1진법은 처리 못함

	from map() to parseInt()	to parseInt()
첫번째 인자	['2']	'2' => 2
두번째 인자	1	1
세번째 인자	['1', '2', '3']	무시

세번째 요소에 parseInt() 적용: 2진법 역시 처리하지 못함.

	from map() to parseInt()	to parseInt()
첫번째 인자	['3']	'2' => 2
두번째 인자	2	2
세번째 인자	['1', '2', '3']	무시

---

첫번째 참고자료가 제안하는 해결방법은 다음과 같습니다.

 

1. 화살표 함수: parseInt가 첫번째 인자만 받아들이도록 제한하기

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

2. Number의 활용 가능성을 고려해보기(앞서 언급한 Number와 parseInt의 차이점을 참고하여)

['1', '2', '3'].map(Number); // [1, 2, 3]

---