Number vs parseInt

우리는 number(), parseInt()을 사용해 문자열을 숫자로 변환할 수 있다. 그런데 이 두 함수는 같은 동작을 하는 것 같은데 차이점은 무엇일까? 그리고 이 두 함수를 대체할 수 있는 다른 방식에는 무엇이 있을지도 알아보자

1. number vs parseInt

(1) parseInt는 값을 parsing(분석)한다.

• parseInt는는 12rem과 같이 숫자+문자 조합이 주어지면, 첫번째 문자까지만 파싱한다.

parseInt('12px121212pxpx');   //12
parseInt('4e2');     //500

• number는 주어진 값의 타입을 변경시킨다.
• number는 주어진 문자열 전체를 변환하므로, 숫자+문자 조합이 주어지면 NaN을 반환한다.

Number('12rem');   //NaN
Number('4e2');     //500

(2) parseInt는 두 매개변수를 받을 수 있다.

• parseInt는 두 개의 매개변수를 받을 수 있다.
• 첫번째는 값이며, 두번째 매개변수는 기수(밑)이다.

parseInt(값, 기수)

parseInt('0222');   // 222
parseInt('022', 8); // 18
parseInt('011', 2); // 3

Number('022'); // 101

(3) 문자열 이외의 값을 넘길 시 서로 다르다.

• parseInt와 Number에 빈 값을 넣긴 경우이다.

parseInt();          // NaN
parseInt('');        // NaN
parseInt(undefined); // NaN

Number();          // 0
Number('');        // 0
Number(undefined); // NaN

• parseInt와 Number에 null값을 넘긴 예시이다.

parseInt(null); // NaN

Number(null);   // 0

• parseInt와 Number에 true 혹은 false을 넘겼을 때이다.

parseInt(true);  // NaN
parseInt(false); // NaN

Number(true);  // 1
Number(false); // 0

(4) 문자간 공백이 있을 때 차이가 있다.

• parseInt의 경우, 주어진 문자열에 공백이 있을 시 첫번째 문자만 변환한다.

parseInt('  13  ');       //13
parseInt('  13  12   ');  //13

• Number의 경우, 주어진 문자열에 공백이 있을 때는 아래와 같이 반환한다.

Number('  13  ');       //13
Number('  13  12   ');  //NaN

(5) Number 결과가 항상 서로 같지 않다.

• 우라는 new Number를 사용해 숫자 객체를 만들 수 있다.
• 그런데 이렇게 만들어진 숫자객체는 타입이 object이므로 숫자와 완전히 같을 수 없다.

Number('22') === 22         //true
new Number('22') === 22     //false

• 또한 숫자 객체 서로는 다른 주소값을 가지므로 같지 않다.

new Number('22') == new Number('22') //false

2. parseInt, number 대신

parseInt, number로 문자열을 숫자로 형변환할 수 있는데, 이외의 방법에는 무엇이 있을까?

• parseInt, number 대신 문자열을 숫자로 변환할 수 있는 방법이 있다.
• 그건 바로 + 연산자이다. 사용법은 아래와 같다.

+'문자'

(1) 사용 예시

• 숫자 문자열이 주어지면 아래와 같이 반환한다.

+'12'       //12
+'  12  '   //12
+'10e1'     //100

• 문자열에 숫자가 아닌 문자가 들어간 경우, (Number처럼) NaN을 반환한다.

+'12px'     //NaN
+'12 px'    //NaN

• 문자열에서 문자 간 공백이 포함된 경우 (Number처럼) NaN을 반환한다.

+'12 12'    //NaN

• true, false가 주어진 경우 (Number처럼) 0, 1을 반환한다.

+true       //1
+false      //0

• 유효치 않은 값('', null, undefined)이 주어지면 결과는 Number와 같다.

+''         //0
+null       //0
+undefined  //NaN

출처
아래 링크로 가면 더 자세히 알 수 있다!

• thisthat, number-constructor-vs-parse-int
• stackoverflow, what-is-the-difference-between-parseint-and-number
• MDN Docs, parseInt
• MDN Docs, Number