<JavaScript> parseInt()와 Number()는 어떤 차이가 있을까?

자바스크립트에서 문자를 숫자로 변환하기 위해 사용하는 방법으로는 parseInt()와 Number()가 있다. 더 간단하게는 문자 앞에 +를 붙여 숫자로 바꾸기도 한다.

어쨌든 둘 다 숫자로 변환해주니까 그 동안 아무거나 사용해왔었는데, 오히려 그러다 보니 이 둘은 대체 뭐가 다른건가 하는 의문이 자연스럽게 피어올랐다. 그래서 정리를 한 번 해보려고 한다.

참고 링크

단항 더하기 (+) - JavaScript | MDN

Number() vs parseInt() - this vs that

Number() constructor - JavaScript | MDN

parseInt() - JavaScript | MDN

Number()

Number()는 숫자 객체를 생성하는 생성자 함수이다.

Number(값);
new Number(값);

new 키워드와 함께 Number()를 사용하면 숫자 객체를 생성하는 생성자 함수처럼 작동한다.

이렇게 만든 숫자 객체의 타입은 숫자가 아니라 객체이다. (자주 쓰이지 않는다고 한다.)

// example
let n = new Number(7);
console.log(n); // Number {7}
console.log(typeof n) // 'object'

let n2 = Number('7');
console.log(n2); // 7
console.log(typeof n2); // 'number'

반면 Number()는 인자로 들어온 값을 number 타입으로 변환해준다.
변환될 수 없는 값이 들어오면 NaN(Not a Number)을 리턴한다.

parseInt()

parseInt()는 문자열 타입의 매개변수를 정수로 리턴해주는 함수이다.
Number()와는 달리 두 가지 매개변수를 받을 수 있으며, 두 번째 매개변수는 옵션이다.

parseInt(string);
parseInt(string, radix);

radix는 진수를 의미한다. 값을 지정하지 않으면 전달받은 string을 기반으로 추론하여 변환한다. (10진수가 디폴트가 아니다.) 따라서 웬만하면 직접 지정해주는 것이 좋다고 한다. radix에는 2부터 36까지의 숫자만 쓸 수 있으며 이 범위를 벗어나면 숫자로 변환될 수 없다.
(Number.prototype.toString()은 특정 진수로 변환된 문자열을 리턴한다.)

숫자와 다른 문자가 섞였을 때 (e 제외)

1. Number(): 변환하지 못하고 NaN을 리턴한다.

   Number('13px'); // NaN

2. parseInt(): 무시하고 숫자만 찾아내 그것만 숫자로 바꾸어 리턴한다. 16진수의 경우 대소문자 상관없이 숫자로 파싱하여 리턴한다.

   parseInt('13px', 10); // 13
   parseInt('F', 16); // 15
   parseInt('344', 2) // NaN

   radix를 2로 설정해 변환할 문자열이 이진수의 형태임을 미리 암시했다면 해당 string에는 0과 1만 포함되어야 한다. 다른 수가 들어가면 변환하지 못하고 NaN을 리턴한다.

truthy, falsy 값이 들어왔을 때

1. Number(): 값의 참/거짓 여부에 따라 1과 0을 반환한다. 단, undefined는 NaN을 리턴한다.

   Number(null); // 0
   Number(true); // 1
   Number(undefined); // NaN

2. parseInt(): NaN을 리턴한다.

   parseInt(null) // NaN
   parseInt(undefined) // NaN
   parseInt(true) // NaN

단항 연산자 (unary operator) +

숫자를 할당한 변수 앞에 붙이면 변수의 값(숫자)을 리턴한다.

const a = -4;
const b = 4;

console.log(+a); // -4
console.log(+b); // 4

숫자가 아닌 값에 붙이면 해당 값을 숫자로 변환하여 리턴한다. 16진수도 지원한다. Number()와 마찬가지로 undefined는 NaN을 리턴한다.

+true // 1
+'21' // 21
+false // 0
+'0x1F' // 31
+undefined // NaN