1. Introduction
자바스크립트는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나입니다. 그 많은 기능 중에서 문자열을 숫자로 변환하는 것은 실생활 애플리케이션에서 자주 필요로 하는 기본 작업입니다.
예를 들어, 폼에 입력된 사용자 값이나 API에서 검색된 데이터는 종종 문자열로 처리됩니다. 이러한 값들은 숫자 유형으로 변환되지 않으면 계산이나 비교에 직접 사용할 수 없습니다.
이 기사에서는 자바스크립트에서 문자열을 숫자로 변환하는 구체적인 방법을 설명하겠습니다. 각 함수와 기술이 어떻게 작동하는지, 그 차이점, 그리고 유의해야 할 중요한 점을 다루겠습니다. 이 가이드를 실용적인 참고 자료로 사용하세요.
2. Overview of Data Types in JavaScript
자바스크립트는 동적 타입 언어로 알려져 있으며, 이는 변수의 타입이 프로그램 실행 중에 자동으로 결정된다는 의미입니다. 이는 유연성을 제공하지만, 타입 변환을 신중하게 처리하지 않으면 오류나 예상치 못한 동작으로 이어질 수 있습니다.
Main Data Types
자바스크립트 데이터 타입은 다음 두 카테고리로 크게 나눌 수 있습니다.
- Primitive Types
- Number: 정수와 부동소수점 숫자를 나타냅니다.
- String: 텍스트 데이터를 나타냅니다.
- Boolean: true 또는 false만 가집니다.
- Undefined: 값이 할당되지 않았음을 나타냅니다.
- Null: 값의 부재를 명시적으로 나타냅니다.
- Symbol: 고유 식별자로 사용됩니다.
- Object Types
- 배열(Array), 함수(Function), 날짜(Date) 등을 포함합니다.
Dynamic Typing and Type Conversion Pitfalls
자바스크립트에서 변수 타입은 암시적으로 또는 명시적으로 변환될 수 있습니다. 문자열과 숫자를 다룰 때는 특별한 주의가 필요합니다.
Example:
console.log("10" + 5); // Output: "105" (string concatenation)
console.log("10" - 5); // Output: 5 (numeric calculation)
위에서 보여준 바와 같이, 동일한 연산자가 맥락에 따라 다르게 동작할 수 있습니다. 의도하지 않은 결과를 방지하기 위해 명시적인 타입 변환은 필수적입니다.
3. Methods for Converting Strings to Numbers
자바스크립트는 문자열을 숫자로 변환하는 여러 방법을 제공합니다. 이 섹션에서는 일반적으로 사용되는 네 가지 방법을 자세히 설명합니다.
The Number() Function
Number() 함수는 문자열을 숫자로 변환하는 가장 기본적인 방법입니다.
Examples:
console.log(Number("42")); // Output: 42
console.log(Number("3.14")); // Output: 3.14
console.log(Number("")); // Output: 0 (empty string becomes 0)
console.log(Number("abc")); // Output: NaN (returns NaN if conversion fails)
Characteristics:
- 정수와 부동소수점 숫자 모두 변환합니다.
- 빈 문자열은 0으로 변환됩니다.
- 변환 실패 시
NaN(Not-a-Number)을 반환합니다.
Important Note:
NaN은 계산에 사용할 수 없는 특수 숫자 값입니다. 이를 의도하지 않게 사용하면 예상치 못한 동작으로 이어질 수 있습니다.
The parseInt() Function
parseInt() 함수는 문자열을 정수로 변환합니다. 문자열을 처음부터 파싱하고 첫 번째 비숫자 문자에서 멈춥니다.
Examples:
console.log(parseInt("42")); // Output: 42
console.log(parseInt("42.99")); // Output: 42 (decimal part is ignored)
console.log(parseInt("10abc")); // Output: 10
console.log(parseInt("abc10")); // Output: NaN
Specifying the Radix:
console.log(parseInt("10", 2)); // Output: 2 (binary)
console.log(parseInt("A", 16)); // Output: 10 (hexadecimal)
Characteristics:
- 정수 부분만 필요할 때 유용합니다.
- 다른 진법에서의 변환을 지원합니다.
Caution:
진법을 생략하면 결과가 문자열 형식에 따라 달라질 수 있으며, 예상치 못한 결과를 초래할 수 있습니다.
The parseFloat() Function
parseFloat() 함수는 문자열을 부동소수점 숫자로 변환합니다.
Examples:
console.log(parseFloat("3.14")); // Output: 3.14
console.log(parseFloat("3.14abc")); // Output: 3.14
console.log(parseFloat("abc3.14")); // Output: NaN
특징:
- 소수 값을 처리하는 데 이상적입니다.
- 정수 값에도 올바르게 작동합니다.
주의:
parseInt()와 마찬가지로, 숫자 부분 이후의 문자를 무시합니다.
단항 플러스 연산자 (+)
단항 플러스 연산자(+)는 타입 변환을 짧고 간단하게 수행하는 방법을 제공합니다.
예시:
console.log(+"42"); // Output: 42
console.log(+"3.14"); // Output: 3.14
console.log(+"abc"); // Output: NaN
특징:
- 간결한 코드를 생성합니다.
Number()와 동일하게 동작합니다.
주의:
간결하지만, 이 접근 방식은 가독성을 떨어뜨릴 수 있습니다. 초보자 친화적이거나 팀 코드베이스에서는 Number()가 더 명확한 경우가 많습니다.
요약
| Method | Characteristics | Example |
|---|---|---|
Number() | General-purpose conversion for integers and decimals | Number("3.14") → 3.14 |
parseInt() | Converts integers only, supports radix | parseInt("42.99") → 42 |
parseFloat() | Best for decimal values | parseFloat("3.14") → 3.14 |
| Unary + | Concise but less explicit | +"42" → 42 |
다음 섹션에서는 이러한 메서드들의 차이점과 올바른 선택 방법을 설명합니다.
4. 변환 방법 간 차이점 및 선택 방법
JavaScript는 문자열을 숫자로 변환하는 여러 방법을 제공하며, 각각 고유한 동작을 가집니다. 이러한 차이를 이해하는 것은 올바른 방법을 선택하는 데 필수적입니다.
Number() vs parseInt()
Number()는 전체 문자열을 숫자 값으로 평가하고, parseInt()는 정수 부분만 추출합니다.
예시:
console.log(Number("42.5")); // Output: 42.5
console.log(parseInt("42.5")); // Output: 42
사용 가이드라인:
- 정확한 숫자 값이 필요할 때 Number()를 사용합니다.
- 소수점을 무시해야 할 때 parseInt()를 사용합니다.
parseInt() vs parseFloat()
parseInt()는 정수에만 제한되고, parseFloat()는 소수 값을 처리합니다.
예시:
console.log(parseInt("42.75")); // Output: 42
console.log(parseFloat("42.75")); // Output: 42.75
사용 가이드라인:
- 나이, ID와 같은 정수에 parseInt()를 사용합니다.
- 가격이나 측정값과 같은 소수에 parseFloat()를 사용합니다.
Number() vs 단항 플러스 (+)
Number()와 단항 플러스 연산자는 유사하게 동작하지만, 가독성은 다릅니다.
예시:
console.log(Number("42")); // Output: 42
console.log(+"42"); // Output: 42
사용 가이드라인:
- Number()는 의도를 명확히 표현하며 팀 프로젝트에 권장됩니다.
- 간결함을 선호할 때 단항 플러스 연산자가 유용합니다.
특수 경우 처리
빈 문자열 및 잘못된 값
예시:
console.log(Number("")); // Output: 0
console.log(parseInt("")); // Output: NaN
console.log(+""); // Output: 0
console.log(Number("abc")); // Output: NaN
console.log(parseFloat("abc123")); // Output: NaN
핵심 포인트:
- 빈 문자열을 0으로 변환하려면
Number()또는 단항+를 사용합니다. parseInt()와parseFloat()를 사용할 때는 부분 파싱이 발생할 수 있으니 주의합니다.
요약
| Method | Main Use Case | Characteristics | Example |
|---|---|---|---|
| Number() | General numeric conversion | Converts entire string; invalid values become NaN | Number("3.14") → 3.14 |
| parseInt() | Integer-only values | Ignores decimals and invalid suffixes | parseInt("42.99") → 42 |
| parseFloat() | Decimal values | Handles floating-point numbers | parseFloat("3.14") → 3.14 |
| Unary + | Concise conversion | Equivalent to Number(), less explicit | +"42" → 42 |
5. 변환 중 오류 처리
문자열을 숫자로 변환할 때, 특히 사용자 입력이나 외부 데이터를 다룰 때 적절한 오류 처리는 필수적입니다.
NaN (Not-a-Number) 처리
변환에 실패하면 JavaScript는 NaN을 반환합니다. 이는 기술적으로 숫자 타입이지만 계산에 사용할 수 없습니다.
예시:
console.log(Number("abc")); // Output: NaN
console.log(parseInt("xyz")); // Output: NaN
console.log(+"test"); // Output: NaN
핵심 포인트:
NaN이 포함된 계산은 모두NaN을 반환합니다.NaN === NaN은false를 반환합니다.
isNaN() 사용
isNaN() 함수는 값이 NaN인지 확인합니다.
예시:
console.log(isNaN("abc")); // true
console.log(isNaN(42)); // false
console.log(isNaN(NaN)); // true
주의:
isNaN()는 암시적 타입 변환을 수행합니다.
Number.isNaN() 사용
Number.isNaN() 은 타입 변환 없이 엄격한 검사를 수행합니다.
예시:
console.log(Number.isNaN("abc")); // false
console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN(undefined)); // false
권장 사항:
- 신뢰할 수 있는 오류 검사를 위해
Number.isNaN()을 사용하세요.
예시: 잘못된 입력 처리
function safeConvert(input) {
let value = Number(input);
return Number.isNaN(value) ? 0 : value;
}
6. 실용 예제
이 섹션에서는 사용자 입력, 배열, 폼, JSON 데이터 등을 포함한 실제 사용 사례를 소개합니다.
1. 사용자 입력 변환
function processUserInput(input) {
let value = Number(input);
if (Number.isNaN(value)) {
console.log("Error: Please enter a number.");
return null;
}
console.log("Entered value: " + value);
return value;
}
2. 배열 내 문자열 값 변환
let data = ["10", "20", "30", "40"];
let numbers = data.map(Number);
console.log(numbers);
3. 폼 데이터 처리
function calculateTotalPrice(priceInput, quantityInput) {
let price = parseFloat(priceInput);
let quantity = parseInt(quantityInput);
if (Number.isNaN(price) || Number.isNaN(quantity)) {
console.log("Error: Please enter valid numbers.");
return null;
}
let total = price * quantity;
console.log("Total price: " + total);
return total;
}
4. JSON 데이터 변환
let jsonData = '[{"id": "1", "price": "120.5"}, {"id": "2", "price": "200"}]';
let products = JSON.parse(jsonData);
let total = products.reduce((sum, product) => {
let price = Number(product.price);
return sum + (Number.isNaN(price) ? 0 : price);
}, 0);
console.log("Total price: " + total);
7. 결론
이 기사에서는 JavaScript에서 문자열을 숫자로 변환하는 방법을 기본부터 고급 사용 사례까지 다루었습니다.
주요 요점은 데이터 타입 이해, 적절한 변환 방법 선택, 그리고 올바른 오류 처리 구현입니다.
문자열을 숫자로 변환하는 것은 실제 JavaScript 개발에 있어 기본이면서도 필수적인 기술입니다. 여기 제공된 예제를 연습하고 자신의 프로젝트에 적용하여 신뢰성과 정확성을 향상시키세요.
