JS parseInt() vs Number()

코테문제를 풀다가 발견한 자바스크립트의 내장함수 parseInt() 와 Number()의 다른점

사실 parseInt() 와 Number() 모두 내용물이 정수형 숫자인데 type만 문자형일 경우에는 둘 다 숫자형으로 잘 변환해주어 똑같은 역할을 한다고봐도 무방하다.

 

 

나도 여태까지 두 함수 모두 같은 기능을 하는 줄 알았다는..

그런데 내용물이 숫자가 아닌 경우에는 각각 다른 값이 나오고..  찾아보니 엄연히 이론적으로는 달라서 한번 정리해본다.

 

오늘의 코테문제 

const arr =[ '', '', '1', '23', '' ]

 

문자와 숫자가 섞여있는 string에서 정규표현식으로 문자를 걸러내고 숫자형만 남기고, 나머지 숫자를 더해주는 결과가 필요했다.

그래서 각 배열 요소를 숫자형으로 바꾸고 더해주면 되겠거니! 하고 처음에는 

parseInt()가 문자열 인자를 parsing해서 숫자로 바꿔주는 함수니까! 하고 봤는데 결과값이 NaN 이 나와버렸다.

어랏??

빈 문자열 ''을 parseInt 인자로 넣어 콘솔로 찍어보니.. NaN 이 나오고,

Number 함수는 0 값이 나왔다. 

 

 

parseInt()

parseInt("20px");       // 20
parseInt("10100", 2);   // 20
parseInt('Hello', 8); // NaN // 숫자가 전혀 아님
parseInt('546', 2);   // NaN // 0과 1을 제외한 숫자는 2진법에서 유효하지 않음

 

parseInt(string, radix) 는 파싱에 조금 더 초점을 맞추어 인자를 문자열로 변환한 다음에 그 문자열을 파싱하여 정수를 반환하고, 숫자로 변환할 수 없는 경우에는 NaN을 반환한다.

radix는 [optional]이고 안넣으면 기본 10진수, 넣으면 2진수 8진수 등 특정 진수로도 변환이 가능하기때문에 진법 변환할때 유용하게 쓸 수 있다.

 

Number()

Number("20px"); // NaN
Number('foo'); 	// NaN
Number("2e1");  // 20, exponential notation

 

반면, Number() 는 말그대로 숫자형으로 변환할때 쓰는 함수이다. 숫자형 문자열을 숫자로 변환해주는 착실한 기능을 한다. 

인자가 숫자형이 아닐 경우에는 NaN (Not A Number)를 반환한다.

 

결론적으로 빈문자열이 같이 있는 경우에 숫자형으로 변환해서 계산을 하고 싶으면 Number()를 써야지 원하는 결과값을 얻을 수 있다. 

나중에도 side effect가 안나는 코드를 짜려면 이런 개념들을 잘 구분해서 사용해야겠다는 생각이 들었다.