parseFloat, Number의 차이점

parseFloat과 Number 모두 문자열을 'Number' 타입으로 반환해준다는 점에서 같은 기능을한다고 볼 수 있다. 그런데 왜 굳이 두 가지 방법이 존재하는 건지, 두 함수의 차이점이 대체 뭔지 궁금증이 생겼다. 찾아본 결과 StackOverFlow에서 좋은 답변을 찾을 수 있었다.

 

parseFloat이나 parseInt은 문자열(string)을 말 그대로 파싱한다.
반면, Number은 주어진 값을 강제로 숫자로 변환시킨다.

예시를 통해서 이해하는 것이 빠를 것 같다 ㅎㅎ

이렇게 숫자 그대로를 표현하는 문자열을 입력하면, 두 함수는 똑같이 작동한다.

parseFloat('3'); // => 3 
Number('3'); // => 3 
parseFloat('1.501'); // => 1.501 
Number('1.501'); // => 1.501 
parseFloat('1e10'); // => 10000000000 
Number('1e10'); // => 10000000000

 

 

하지만, 숫자가 아닌 다른 문자가 포함되면 두 함수가 다르게 기능한다는 것을 알 수 있다. 숫자가 아닌 영문자가 포함된 16진수의 경우를 예로 들어보자. 아래와 같이 parseFloat은 문자열에서 16진수임을 파악하고 숫자로 인식하지만, Number는 숫자가 아닌 'x'를 인식하지 못하고 NaN (not a number)를 반환한다.

parseFloat('1x'); // => 1 
Number('1x'); // => NaN

parseFloat('0x10'); // => 0 
Number('0x10'); // => 16

 

공백 문자열이 입력되었을 때는 parseFloat은 인식하지 못하고, Number는 0으로 취급한다.

parseFloat(''); // => NaN 
Number(''); // => 0 
parseFloat(' \r\n\t'); // => NaN 
Number(' \r\n\t'); // => 0

 

정리하면, parseFloat은 '문자열 전체를 Number 형태로 바꾸는 데' 초점을 두고 있고, Number은 '문자열에 있는 숫자를 Number 형태로 바꾸는 데' 초점을 두고 있는 것처럼 보인다.