[JavaScript] parseInt()와 Number() 차이점과 사용용도.

안녕하세요. 소다맛사탕 입니다.

오늘은 자바스크립트에서 변수의 값을 형변환 할 때 자주 쓰는

parseInt와 Number의 차이점과 사용법을 알아보려고 합니다.

 

parseInt와 Number는 문자열을 숫자로 바꿔주는 역할을 합니다.

 

1. parseInt()

문자열 인자를 파싱해서 특정 진수(수의 진법 체계에서 기준이 되는 값)의 정수를 반환.

const txtVal = '가나다';
const numVal = 123;
const numVal2 = '123';
const emptyVal = '';
let emptyVal2;
const mixVal = 'abc123';
const negativeVal = -123;

console.log("parseInt(텍스트) : "+ parseInt(txtVal));
console.log("parseInt(숫자) : " + parseInt(numVal));
console.log("parseInt(숫자2) : " + parseInt(numVal2));
console.log("parseInt(공백) : " + parseInt(emptyVal));
console.log("parseInt(공백2) : " + parseInt(emptyVal2));
console.log("parseInt(혼합) : " + parseInt(mixVal));
console.log("parseInt(음수) : " + parseInt(negativeVal));

---- 결과 ----

parseInt(텍스트) : NaN
parseInt(숫자) : 123
parseInt(숫자2) : 123
parseInt(공백) : NaN
parseInt(공백2) : NaN
parseInt(혼합) : NaN
parseInt(음수) : -123

 

2. Number()

숫자 값으로 작업할 수 있게 해주는 Object 객체. 객체는 생성자를 사용하여 만들고, 원시 숫자 자료형은 함수를 사용해 생성.

console.log("Number(텍스트) : " + Number(txtVal));
console.log("Number(숫자) : " + Number(numVal));
console.log("Number(숫자2) : " + Number(numVal2));
console.log("Number(공백) : " + Number(emptyVal));
console.log("Number(공백2) : " + Number(emptyVal2));
console.log("Number(혼합) : " + Number(mixVal));
console.log("Number(음수) : " + Number(negativeVal));

---- 결과 ----

Number(텍스트) : NaN
Number(숫자) : 123
Number(숫자2) : 123
Number(공백) : 0
Number(공백2) : NaN
Number(혼합) : NaN
Number(음수) : -123

 

문자열을 숫자열로 형변환시  일반적인 숫자 형태를 가지고 있는 값들은 그대로 출력되는 것을 확인할 수 있습니다.(음수 포함)

그리고 공백의 경우 Number 객체를 사용시 0으로 출력되는 것을 확인할 수 있습니다.

 

그러면 여기서 숫자에 관련된 결과만 확인해 본다면...

 

// 숫자가 먼저 앞에 오는 변수
const fstNumVal = '123abc';
// 0이 앞에 붙은 숫자 변수
const fstZeroVal = '000123';
// 소수점
const decimalVal = '0.00123';

console.log("parseInt(숫자먼저) : " + parseInt(fstNumVal));
console.log("parseInt(앞에0) : " + parseInt(fstZeroVal));
console.log("parseInt(소수점) : " + parseInt(decimalVal));
console.log("=======================================");
console.log("Number(숫자먼저) : " + Number(fstNumVal));
console.log("Number(앞에0) : " + Number(fstZeroVal));
console.log("Number(소수점) : " + Number(decimalVal));

---- 결과 ----

parseInt(숫자먼저) : 123
parseInt(앞에0) : 123
parseInt(소수점) : 0
=======================================

Number(숫자먼저) : NaN
Number(앞에0) : 123
Number(소수점) : 0.00123

 

결론적으로...

 

숫자가 먼저 오는 숫자와 텍스트가 혼합 변수 값은 parseInt 만 숫자 출력.

0이 먼저 시작한 숫자는 parseInt, Number 모두 0을 제외한 숫자만 출력

소수점의 결과를 다 나타내고 싶을 때는 Number 객채를 사용하면 된다는 결과가 나왔습니다.

 

※ 참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/parseInt

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