JavaScript에서 문자열을 숫자로 변환할 때 parseInt()와 Number() 두 가지 방법을 자주 사용합니다. 비슷해 보이지만 동작 방식에 중요한 차이가 있으므로, 상황에 맞게 올바른 함수를 선택하는 것이 중요합니다.
parseInt(string)의 동작 방식
parseInt()는 문자열을 처음부터 한 글자씩 읽다가 숫자가 아닌 첫 번째 문자를 만나는 순간 파싱을 멈추고, 그때까지 읽은 값만 반환합니다.
예를 들어 다음 코드는 숫자 뒤의 'world'라는 문자열을 무시하고 765를 반환합니다.
parseInt("765world") // 결과: 765또 다른 예제입니다. 다음 코드 역시 단위 표시인 'px' 앞까지만 파싱하여 50을 반환합니다.
parseInt("50px"); // 결과: 50이러한 특성 때문에 CSS 값처럼 "100px", "2rem"처럼 숫자 뒤에 단위가 붙은 문자열에서 숫자 부분만 추출할 때 유용하게 활용됩니다.
Number(string)의 동작 방식
Number()는 문자열 전체를 하나의 숫자로 변환하려고 시도합니다. 문자열 어디라도 숫자로 해석할 수 없는 문자가 포함되어 있으면 변환에 실패하고 NaN(Not a Number)을 반환합니다.
참고로 Number()는 정수뿐만 아니라 소수(float)도 처리할 수 있다는 장점이 있습니다. 반면 parseInt()는 기본적으로 정수만 반환합니다.
예를 들어 다음 코드는 숫자 뒤에 일반 문자가 포함되어 있으므로 NaN을 반환합니다.
Number("765world") // 결과: NaN마찬가지로 단위가 붙은 문자열도 전체가 유효한 숫자가 아니기 때문에 NaN이 반환됩니다.
Number("50px"); // 결과: NaN핵심 차이점 요약
- parseInt(): 문자열 시작 부분부터 유효한 숫자까지만 파싱하며, 그 이후의 문자는 무시합니다. 오직 정수를 반환합니다.
- Number(): 문자열 전체가 완전히 유효한 숫자여야 하며, 하나라도 문제가 되는 문자가 있으면 NaN을 반환합니다. 정수와 소수 모두 처리 가능합니다.
따라서 사용자 입력처럼 형식이 불완전한 데이터에서 숫자를 추출해야 한다면 parseInt()가 적합하고, 문자열이 반드시 올바른 숫자 형식임을 검증하면서 변환해야 한다면 Number()를 사용하는 것이 좋습니다.