문자열을 정수형으로 변환 시 parseInt()와 Number 차이점

문자열을 정수형으로 변환 시 parseInt()와 Number 차이점

자바스크립트에서 문자열로 된 수를 정수로 변환 할 때 parseInt()를 사용하다가 Number()도 사용하게 되면서 문득 궁금한게 생겼다. 특정 진수(2, 8, 16진수)가 아닌 10진수 변경은 그냥 Number()만 쓰면 되지 않을까? 혹시 리턴되는 값에 차이가 있나? 라는 궁금증이 생겨서 찾아보았다. 우선 두 가지를 간단히 요약해보자면 다음과 같다.

parseInt() 함수는 문자열 인자를 파싱하여 특정 진수의 정수를 반환한다.

Number()는 자바스크립트의 원시 값(primitive)인 number를 위한 래퍼 객체(wrapper object)이다. Number 생성자는 숫자를 다루기 위한 상수와 메소드를 가지고 있다.

그럼 문자열을 정수형으로 변환할 때 사용법은 어떻게 될까?
parseInt() 함수는 두 개의 파라미터를 갖는다.

• string : 파싱할 문자열
• radix (optional) : 진수를 나타내는 값이며, 2부터 36까지의 정수이다. 필수 입력은 아니지만 API 문서를 보면 기본 값이 10이 아니라고 한다.

const str = '123';
console.log(parseInt(str, 10)); // 123 출력

만약 radix를 생략할 경우 입력 값의 시작 문자에 따라서 radix를 간주하는데 radix를 생성하고 입력한 값이 "0x" 또는 "0X"로 시작하는 경우 16진수로 간주하여 나머지 문자열을 16진수로 파싱한다. 다른 몇 가지 사례도 찾아봤는데 오래된 글들이고, 현재 API 문서를 보니 이 외 다른 값으로 시작하면 radix는 10이라고 명시되어 있다. 그래도 불안하다면 radix 값을 입력해주는 것을 추천한다.

Number는 아래와 같이 사용한다.

const str = '123';
console.log(Number(123)); // 123 출력

parseInt()와 Number의 사용법은 이러한데 그렇다면 어떤 차이가 있을까? 우선 parseInt()는 정수형을 반환한다. 소수점 이하 값은 잘라낸다.

const str = '123.4567';
console.log(parseInt(str)); // 123 출력
console.log(Number(str)); // 123.4567 출력

다음은 문자열이 빈 값일 때 출력 결과이다.

const str = '';
console.log(parseInt(str)); // NaN 출력
console.log(Number(str)); // 0 출력

그리고 문자열에 숫자가 아닌 문자가 섞여있을 때 출력 결과이다. parseInt() 함수는 숫자가 아닌 문자를 마주치는 경우 그 이전까지의 값을 파싱하고, Number는 숫자가 아니라고 판단하여 NaN을 출력한다.

const str = '123abc567';
console.log(parseInt(str)); // 123 출력
console.log(Number(str)); // NaN 출력

더 많은 내용들이 있지만 현재 궁금증은 이 정도로 풀린 것 같다. 기존 parseInt() 함수를 썼던 코드도 radix를 입력하지 않았는데 혹시 몰라서 radix값을 전부 넣어주었다. 시간 날 때 API 문서를 좀 더 읽어보고 추가할 내용이 있다면 포스팅을 업데이트 할 생각이다.