parseInt()함수와 Number()함수의 차이

우선 두 개의 함수 모두 문자열 타입의 숫자를 ‘Number’ 타입으로 바꿔주는 역할을 한다.

가장 흔한 목적은 연산을 위해서이다. 

예를 들어서 폼을 통해 사용자로부터 입력받은 숫자 타입의 값은 문자열로 되어 있어 자바스크립트 코드 내에서 산술 연산을 적용할 수가 없다. 

그러므로 형 변환(Type Casting)이 필요한 것이다. 

이때 사용하는 자바스크립트 내장 함수가 ‘parseInt()’와 ‘Number()’ 함수이다.

그렇다면 두 개의 함수는 정말로 차이가 없는 것일까?

결론적으로 말한다면 쓰임새가 일반적이지 않지만 태생적인 차이가 있다.

일단 parseInt() 함수는 함수 이름에서 보듯히 문자열을 파싱해서 숫자를 찾는 기능이 있다. 

매개 변수 값으로 어떠한 문자열을 넘겨주면 다양한 방법으로 문자열 내의 숫자를 반환한다. 

반면에 Number() 함수는 숫자를 생성하는 역할을 하고 있는 기본적인 함수이다. 

단지, 매개 변수로 문자열 타입의 숫자를 가질 수 있다는 것이다.

본격적으로 비교해보자

다음의 경우는 둘 다 동일한 숫자 1을 출력한다.

var strNum = "1";
console.log("parseInt : " + parseInt(strNum));
console.log("Number : " + Number(strNum));

다음의 경우도 둘 다 동일한 숫자 1을 출력한다.

var strNum = "01";
console.log("parseInt : " + parseInt(strNum));
console.log("Number : " + Number(strNum));

그러나 다음의 경우는 차이점을 가지게 된다. 

parseInt() 함수는 숫자만을 찾아내서 반환을 해주지만 Number() 함수는 NaN 이라는 결과를 출력한다.

var strNum = "2016년도";
console.log("parseInt : " + parseInt(strNum));
console.log("Number : " + Number(strNum));

어찌보면 parseInt() 함수가 문자열을 숫자로 변환하여주는 기능이 더 충실하다는 것을 알 수 있다. 

그러나 만능은 아니다. 

다음과 같은 경우는 두 방식 모두 NaN을 출력한다. 

문자열로 시작하는 매개 변수라면 제 아무리 parseInt() 함수라도 어쩔수 없는 모양이다.

var strNum = "제10회";
console.log("parseInt : " + parseInt(strNum));
console.log("Number : " + Number(strNum));

자 이제 소수점을 가지고 있는 숫자로 범위를 확대해 보자. 

다음과 같은 경우는 불행하게도 parseInt() 함수는 10 즉 소수점 이하는 출력하지 못한다. 

숫자에 정통한 Number() 함수는 당당히 소수를 만들어 내고 있다.

var strNum = "10.123";
console.log("parseInt : " + parseInt(strNum));
console.log("Number : " + Number(strNum));

하지만 우리가 parseInt() 함수에만 집중하고 있을 뿐, 실제로 이러한 소수를 가진 문자열을 처리하기 위한 parseFloat() 함수가 별도로 있다. 

다음의 함수는 정상적으로 소수를 출력한다.

var strNum = "10.123";
console.log("parseInt : " + parseInt(strNum));
console.log("parseFloat : " + parseFloat(strNum));
console.log("Number : " + Number(strNum));

지금까지 두 개의 함수를 비교해보았다. 

우리가 문자열을 숫자로 변환을 하고자 하는 목적으로 이 두 함수를 체크해봤다. 

결론은 목적에 맞게 쓰면 된다. 

parseInt() 함수는 문자열을 숫자로 변환해주는 것에 더욱 충실하다. 

Number() 함수는 문자열의 숫자를 Number로 바꿔주는 기능을 지원해주는 것이지 문자열의 숫자로 바꾸는 전용 함수는 아니다.  

문자열 중에서 숫자와 일반 문자와 섞여 있을 수 있는가? 

소수점을 표현해야 하는가? 

등등을 체크해서 목적에 맞게 사용하면 된다.

문자열의 숫자를 일반 숫자로 변환하는 것 이외에는 Number() 함수는 자바스크립트에서 부동소수를 포함한 모든 숫자를 생성하고 처리하는 역할을 하는 중대한 함수이다.

일반적으로 parseInt()와 비교하는 것이 무리일 것이다.

그리고 사용자로부터 값을 입력받는 단계에서 일반 문자열이 섞이지 않는 숫자로만 입력받게 하는게 우선일 것이다.