[JavaScript] Number()와 parseInt()의 차이

 

알고리즘 공부를 하던 중 문자열을 숫자로 형변환할 때 사용되는 Number()와 parseInt()의 차이가 궁금해져,

'동일한 입력값에 각각 어떠한 결과를 출력해 내는지' 위주로 알아보았다.

---

 

📌 Number()와 parseInt() 차이점

  ・ 숫자형 문자열

const test1 = "123"; 
console.log(Number(test1)); // 123
console.log(parseInt(test1)); // 123

const test2 = "12.3"; 
console.log(Number(test2)); // 12.3
console.log(parseInt(test2)); // 12

위의 test1을 살펴보면 숫자형태의 문자열을 변환 시 Number(), parseInt()함수 모두 같은 결과를 출력하는 것을 볼 수 있다.

이 때문에 두 함수가 같은 기능을 한다고 착각할 수 있지만, Number(), parseInt()함수는 반환 값과 사용 방법 등에 있어

차이가 있다.

 

test2를 보면 전달된 값을 숫자로 변환하는 Number()는 이미 숫자형인 12.3을 그대로 반환하고, 문자열을 정수로 변환하는

parseInt()는 문자열의 첫 부분부터 정수로 변환 가능한 부분을 찾는 특징에 따라 처음 나오는 12만 정수로 변환되고

소수점 이하 부분은 무시된다.

 

 

 

 

 

   ・ 숫자, 문자가 혼합된 문자열

const test1 = "12ab"; 
console.log(Number(test1)); // NaN
console.log(parseInt(test1)); // 12

const test2 = "ab12"; 
console.log(Number(test2)); // NaN 
console.log(parseInt(test2)); // NaN

Number() 함수는 숫자형 문자열을 숫자로 변환하기 때문에 문자형 문자열이 혼합된 두 테스트에서 NaN를 반환하는 모습을

볼 수 있고, 문자열 앞부분에 있는 숫자만 추출하여 숫자형으로 변환하는 특징을 가진 parseInt()함수는 test2에서는

앞 숫자부분만 변환한 '12'를, test3에서는 문자열이 문자형으로 시작되어 NaN을 반환하는것을 볼 수 있다.

 

 

 

 

   ・ 불리언(boolean)

const test1 = true; 
console.log(Number(test1)); // 1
console.log(parseInt(test1)); // NaN

const test2 = false; 
console.log(Number(test2)); // 0 
console.log(parseInt(test2)); // NaN

Number()함수는 입력된 값을 숫자로 변환하는 'ToNumber' 추상 연산을 수행하는데, 이 과정에서 불리언 값인 true는 1로,

false는 0으로 변환한다. 그에 반해 parseInt()함수는 불리언 값을 문자열로 인식하여 NaN을 반환한다.

 

 

 

 

   ・ 진수(2, 8, 16진수)

const test = "0xFF"; 
console.log(Number(test)); // 225
console.log(parseInt(test, 16)); // 255

const test = "FF"; 
console.log(Number(test)); // NaN
console.log(parseInt(test, 16)); // 255

const test = "0xFF"; 
console.log(Number(test)); // 225
console.log(parseInt(test, 16)); // 255

const test = "FF"; 
console.log(Number(test)); // NaN
console.log(parseInt(test, 16)); // 255

Number()함수는 입력된 값을 숫

 

 

 

 

   ・ 기타(공백, null, undefined, Infinity)

const test = " "; 
console.log(Number(test)); // 0
console.log(parseInt(test)); // NaN

Number()함수는 공백 또한 'ToNumber' 추상 연산에 의해 0으로 변환하는데, 이는 JavaScript언어 자체의 암묵적인 규칙이다.

parseInt()는 공백을 문자열로 인식하여 NaN을 반환한다.

const test = null; 
console.log(Number(test)); // 0 
console.log(parseInt(test)); // NaN

이는 null도 마찬가지이다.

 

 

const test = undefined; 
console.log(Number(test)); // NaN 
console.log(parseInt(test)); // NaN

undefined는 정의되지 않았다는 뜻이므로 두 함수 모두 NaN을 반환한다.

 

 

const test = Infinity; 
console.log(Number(test)); // Infinity
console.log(parseInt(test)); // NaN

Infinity는 무한대의 값을 나타내는 숫자형 상수로, Number()함수에서는 Infinity를 그대로 출력,

부호 없는 정수를 반환하도록 설계된 parseInt()함수는 NaN을 반환한다.