[자바스크립트 / Vanilla JS] parseInt()와 Number()의 차이점

나는 개발을 진행해가며 문자열을 정수형으로 변환 하는 일을 꽤나 자주 겪고는 한다.

문자열을 정수형으로 변환하는 많은 예제들을 구글링 해보았을 때 

문자열을 정수형으로 변환하는 방법이 2가지가 있었다. 참고로 나는 parseInt()만 주구장창 썼다.

바로 parseInt()와 Number()이다. Number()는 어떤 결과값이 도출될지 궁금하여

내 코드에 Number도 적용했는데 parseInt()를 썼을 때와 같은 결과가 나왔다....!

 

그래서 드는 의문이 "같은 결과가 나오는데 왜 문자열을 정수형으로 변환하는 방법이 2가지이지 ?" 라는 생각이 들었다.

 

그래서 이 번 포스팅은 parseInt()와 Number()의 차이점과 사용법 및 정의에 대해서 다루어보겠다.

---

❗ parseInt()

먼저 parseInt()의 정의에 대해 알아보자.

MDN에서는 parseInt()를 문자열 "인자를 파싱하여 특정 진수(수의 진법 체계에서 기준이 되는 값)의 정수를 반환하는 함수" 라고 정의를 한다.

 

먼저 가볍게 parseInt()의 사용법에 대해 알아보자.

let num = parseInt('12345678910');

console.log(num); // 12345678910

문자열이 숫자로 시작하는 경우에는 숫자가 끝날 때까지만 형 변환을 하여 num에 저장된다.

만약 시작이 숫자가 아니면 NaN이 저장됩니다.

let num_0 = parseInt('1만원'); // num에 1이 저장
let num_1 = parseInt('가격 : 1만원'); // num에 NaN이 저장

console.log(num_0) // 1
console.log(num_1) // NaN

만약 소숫점을 사용한다면 어떤 결과값이 나올까 ? 

바로 예시를 살펴보자.

let num = parseInt('1.23124124213123');

console.log(num) // 1

MDN에서 정의한 것 처럼 정수만을 반환한다.

---

❗ Number()

Number()를 MDN에서 정의 하기로는 "문자열이나 다른 값을 Number 타입으로 변환합니다. 만약 인수를 숫자로 변환할 수 없으면 NaN을 리턴하는 함수" 라고 정의한다.

 

바로 Number()의 사용법을 예제를 통해 알아보자.

let num_0 = Number('1234');
let num_1 = Number('1234.5');
let num_2 = Number('1234오');

console.log(num_0) // 1234
console.log(num_1) // 1234.5
console.log(num_2) // NaN

위의 예제를 통해 정수와 실수는 그대로 숫자로 형 변환하여 변수 num에 저장되고

문자열이 숫자가 아닌 경우 num에는 NaN이 저장되는것을 알 수 있다.

 

여기서 하나 더 궁금한 것이 있다.

과연 숫자로 형 변환된 변수 중 정수와 실수는 더해질까 ? 

바로 해보자 !

let num_0 = Number('1234');
let num_1 = Number('1234.5');

console.log(num_0) // 1234
console.log(num_1) // 1234.5

console.log(num_0 + num_1) // 2468.5

예상했던대로 된다. 사실 안되는게 이상하다.

---

❗ parseInt()와 Number()의 차이점

앞서 다룬 정의들과 예제를 살펴보면 이미 차이점을 어느정도 파악했을 때 두 함수의 특징과 차이점으로는

 

✔ parseInt()는

• 입력 값에서 정수만 뽑아서 변환해준다
• 입력 값에서 실수(float형)가 있을 경우 소수점은 다 제거하여 변환해준다.
• 입력 값에서 문자열과 숫자가 섞여있을 경우 문자열로 시작한다면 NaN을 반환하고 숫자로 시작할 경우 입력값에서 숫자가 끝나는 부분까지 변환해준다.

✔ Number()은

• 입력 값이 실수면 실수로 정수는 정수로 변환해준다.
• 입력 값 전체에서 문자열이 있을 경우 NaN을 반환해준다.

두 함수의 특징과 차이점을 기억하여 개발 시 적재적소에 잘 활용하길 바란다 !

파이팅 !

 

출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Number