JavaScript에서 문자열을 숫자로 변환할 때 parseInt()와 Number() 중 어떤 것을 사용해야 할까요? 두 함수 모두 비슷한 역할을 하는 것처럼 보이지만, 작동 방식과 결과에는 중요한 차이점이 있습니다.
이 글에서는 두 함수의 차이점을 명확하게 이해하고, 각각 어떤 상황에서 사용하는 것이 적절한지 알아보겠습니다.
1. 변환하는 값의 종류
parseInt(string, radix)
이름에서 알 수 있듯이, 문자열을 **정수(Integer)**로 파싱(Parsing)하는 함수입니다.
소수점 처리: 문자열에 소수점이 있어도 소수점 이하를 버리고 정수 부분만 반환합니다.
parseInt("3.14"); // 3
parseInt("99.99"); // 99
진수(Radix) 지정: 두 번째 인자로 변환할 진수(2부터 36까지)를 지정할 수 있어, 10진수가 아닌 다른 진법의 문자열을 변환할 때 유용합니다.
parseInt("10", 2); // 2 (2진수 '10'을 10진수로)
parseInt("FF", 16); // 255 (16진수 'FF'를 10진수로)
parseInt("10", 10); // 10 (10진수)
Number(value)
인자로 받은 값을 숫자(Number) 타입으로 변환합니다. 여기서 Number 타입은 정수와 **부동 소수점(실수)**을 모두 포함하는 JavaScript의 표준 숫자 타입입니다.
소수점 처리: 문자열에 소수점이 있으면 실수(float) 값 그대로 변환합니다.
Number("3.14"); // 3.14
Number("99.99"); // 99.99
진수: 진수를 지정할 수 없지만, 16진수 리터럴은 자동으로 인식합니다.
Number("0xF"); // 15
Number("0xFF"); // 255
2. 문자열에 숫자가 아닌 문자가 포함된 경우
이것이 두 함수의 가장 큰 차이점입니다.
parseInt()의 부분 파싱
문자열의 첫 부분부터 숫자로 변환할 수 있는 문자를 찾습니다. 숫자가 아닌 문자를 만나는 직전까지 파싱하여 그 값(정수)을 반환하고, 그 이후의 문자는 무시합니다.
parseInt("123px"); // 123 (px는 무시)
parseInt("100em"); // 100 (em은 무시)
parseInt("0xF", 16); // 15 (16진수 'F'를 15로 파싱)
주의사항: 문자열이 숫자가 아닌 문자로 시작하면 NaN을 반환합니다.
parseInt("px123"); // NaN
parseInt("abc100"); // NaN
Number()의 엄격한 변환
문자열 전체가 유효한 숫자 형식으로 구성되어 있어야만 변환을 성공합니다. 문자열 내에 숫자가 아닌 문자가 하나라도 포함되어 있으면 **NaN (Not a Number)**을 반환합니다.
(단, 선행/후행 공백, 부호, 과학적 표기법 'e' 등은 허용)
Number("123px"); // NaN (px 때문에 실패)
Number("100em"); // NaN (em 때문에 실패)
Number("0xF"); // 15 (16진수 리터럴 인식)
Number(" 123 "); // 123 (공백은 허용)
Number("1e3"); // 1000 (과학적 표기법 허용)
3. 빈 문자열 및 기타 특수 값 처리
두 함수는 특수한 값들을 다르게 처리합니다.
| 입력 값 | parseInt(값) | Number(값) | 비고 |
|---|---|---|---|
"" (빈 문자열) | NaN | 0 | Number는 0으로 변환 |
null | NaN | 0 | Number는 0으로 변환 |
true | NaN | 1 | Number는 불리언 변환 |
false | NaN | 0 | Number는 불리언 변환 |
undefined | NaN | NaN | 둘 다 NaN |
' ' (공백) | NaN | 0 | Number는 0으로 변환 |
// 빈 문자열
parseInt(""); // NaN
Number(""); // 0
// null
parseInt(null); // NaN
Number(null); // 0
// 불리언
parseInt(true); // NaN
Number(true); // 1
4. 비교 요약
| 특징 | parseInt() | Number() |
|---|---|---|
| 반환 타입 | 정수(Integer) | 숫자(Number, 정수 및 실수 포함) |
| 문자열 파싱 | 숫자가 아닌 문자를 만나기 전까지 파싱 | 전체 문자열이 유효한 숫자 형식이어야 함 |
| 진수(Radix) | 두 번째 인자로 지정 가능 (2 ~ 36) | 지정 불가능 (10진수로 변환) |
| 소수점 | 소수점 이하 버림 | 소수점 포함 변환 |
언제 무엇을 사용할까?
parseInt(string, 10)를 사용하는 경우
문자열에서 정수 값만 확실하게 추출하고 싶을 때 사용합니다.
적합한 상황:
- CSS 값에서 숫자 추출 (
'12px'→12) - 문자열 뒤에 단위가 붙어있을 때
- 다른 진법의 문자열 변환이 필요할 때
const width = parseInt("100px", 10); // 100
const binary = parseInt("1010", 2); // 10
주의사항: 안전한 변환을 위해 항상 두 번째 인자로 10을 지정하여 10진수로 파싱하도록 명시하는 것이 좋습니다.
Number(value)를 사용하는 경우
전체 값을 엄격하게 숫자(정수 또는 실수)로 변환해야 할 때 사용합니다.
적합한 상황:
- 입력값 검증이 필요할 때 (잘못된 형식은 NaN으로)
- 소수점을 포함한 숫자 변환
- 불리언이나 null을 숫자로 변환
const price = Number("19.99"); // 19.99
const isValid = Number("19.99px"); // NaN (검증 실패)
const flag = Number(true); // 1
마치며
parseInt()와 Number()는 비슷해 보이지만 목적과 동작 방식이 다릅니다.
- parseInt(): 유연한 파싱, 정수만 필요할 때
- Number(): 엄격한 변환, 전체 값이 유효해야 할 때
상황에 맞는 함수를 선택하면 예상치 못한 버그를 방지하고 더 안전한 코드를 작성할 수 있습니다.
