[JavaScript] 형 변환 I (Type Conversion)

자바스크립트에서는 자료형을 다른 자료형으로 바꾸는 형변환(Type Conversion)이 가능하다. 이를 통해 특정 상황에서 값의 자료형을 원하는 형태로 바꿔 연산하거나 활용할 수 있다. 아래는 String, Number, Boolean 함수로 자료형을 변환하는 방식과 각각의 특성을 정리한 것이다.

---

문자열과 숫자형의 차이점

형변환이 필요한 이유를 이해하려면 문자열과 숫자형이 서로 다르게 처리되는 방식을 살펴보는 게 좋다. 예를 들어, 아래 코드에서는 두 가지 다른 결과가 출력된다.

console.log("10" + 5); // "105"
console.log(10 + 5);    // 15

첫 번째 줄에서는 "10"과 5가 문자열로 연결되어 "105"가 출력된다. 반면 두 번째 줄에서는 숫자형 덧셈 연산이 되어 15가 출력된다. 자바스크립트는 자료형에 따라 연산을 다르게 처리하기 때문에, 원하는 결과를 얻으려면 자료형을 명확히 맞춰야 한다.

---

형변환 함수 사용법

자바스크립트에서 제공하는 String, Number, Boolean 함수를 사용하면 값을 다른 자료형으로 변환할 수 있다. 각 함수가 어떻게 동작하는지 자세히 살펴본다.

---

1. String 함수: 값을 문자열로 변환하기

String 함수는 숫자, 불린 값을 포함한 모든 값을 문자열(string)로 변환한다.

예제

let x = 123;
let y = true;

console.log(String(x)); // "123"
console.log(typeof String(x)); // "string"

console.log(String(y)); // "true"
console.log(typeof String(y)); // "string"

여기서는 숫자 123이 "123"이라는 문자열로, 불린 값 true가 "true"라는 문자열로 변환되었다. String 함수는 어떤 값이든 문자열로 바꿔주는 역할을 한다.

---

2. Number 함수: 값을 숫자형으로 변환하기

Number 함수는 값을 숫자형(number)으로 변환한다. 숫자가 아닌 문자열은 NaN으로 변환되고, 불린 값은 true는 1, false는 0으로 변환된다.

예제

let x = "123";
let y = "Hello";
let z = true;

console.log(Number(x)); // 123
console.log(typeof Number(x)); // "number"

console.log(Number(y)); // NaN (숫자가 아닌 문자열은 NaN으로 변환됨)
console.log(Number(z)); // 1
console.log(Number(false)); // 0

주의할 점

• 숫자가 아닌 문자열은 NaN으로 변환된다. "Hello"나 "abc123" 같은 문자열은 숫자로 변환할 수 없으므로 NaN 값이 반환된다.
• 불린 값은 true가 1, false가 0으로 변환된다. 숫자 연산에 불린 값을 더할 때 유용하게 사용할 수 있다.

---

3. Boolean 함수: 값을 불린형으로 변환하기

Boolean 함수는 값을 불린형(boolean)으로 변환한다. 대부분의 값은 true가 되지만, 빈 값 또는 무의미한 값들은 false로 변환된다. 이 false로 변환되는 값들을 falsy 값이라고 부른다.

false로 변환되는 값들 (Falsy 값)

자바스크립트에서 다음 값들은 Boolean 함수로 변환 시 false가 된다:

• 0 (숫자 0)
• "" (빈 문자열)
• NaN (숫자가 아닌 값)
• null
• undefined
• false

예제

let x = 0;
let y = "";
let z = NaN;
let w = "JavaScript";

console.log(Boolean(x)); // false
console.log(Boolean(y)); // false
console.log(Boolean(z)); // false

console.log(Boolean(w)); // true (빈 문자열이 아니므로 true)
console.log(Boolean(123)); // true (숫자 0이 아닌 경우 true)

위 예제에서 0, 빈 문자열 "", NaN은 false로 변환된다. Boolean으로 변환할 때 이 값들이 false가 된다는 점을 기억해 두면 좋다.

---

형변환의 다양한 활용

형변환을 잘 사용하면 원하는 결과를 얻는 데 유용하다. 몇 가지 자주 사용하는 형변환 사례를 예제로 정리해 둔다.

예제 1: 문자열을 숫자로 변환해서 더하기

문자열 "10"과 "5"를 더할 때 문자열 연결이 아닌 숫자 연산이 필요하면 Number 함수를 사용해 둘을 숫자로 바꿔서 더할 수 있다.

console.log(Number("10") + Number("5")); // 15

위 코드는 "10"과 "5"라는 문자열을 Number 함수로 숫자형으로 바꾼 후 더했기 때문에 숫자 15가 출력된다.

예제 2: 숫자를 문자열로 변환해서 연결하기

숫자 10과 5를 문자열로 바꾸어 연결하고 싶다면 String 함수를 사용할 수 있다.

console.log(String(10) + String(5)); // "105"

이 예제에서는 숫자 10과 5를 String 함수로 변환한 후 연결해 "105"가 출력된다. 자료형을 맞춰줘야 의도한 대로 결과가 나온다.

---

형변환 시 주의사항 및 팁

1. Number 함수 사용 시 주의

   숫자형이 아닌 문자열은 Number 함수로 변환할 때 NaN이 된다. 숫자가 아닌 문자를 포함하는 값에는 Number 함수 사용 시 주의가 필요하다.

   console.log(Number("abc")); // NaN
   console.log(Number("123")); // 123
   

2. 불린형 변환의 falsy 값 기억하기

   0, 빈 문자열 "", NaN, null, undefined는 모두 Boolean으로 변환 시 false로 처리된다. 이 값들이 Boolean 함수로 변환될 때 false가 된다는 점을 기억하면 논리 연산에서 도움이 된다.

3. String 함수로 값을 안전하게 변환

   String 함수는 거의 모든 값을 문자열로 안전하게 변환한다. 특별한 예외나 에러 없이 값을 일관되게 문자열로 처리하고 싶을 때는 String 함수를 사용하면 된다.

---

요약

• String, Number, Boolean 함수로 각각 문자열, 숫자형, 불린형으로 형변환할 수 있다.
• 숫자로 변환 시 *숫자가 아닌 문자열은 NaN이 되고, true는 1, false는 0으로 변환된다.
• Boolean 함수는 대부분의 값을 true로 변환하지만, 0, 빈 문자열 "", NaN, null, undefined, false 같은 값은 false로 변환된다. 이를 falsy 값이라고 부른다.

형변환을 통해 원하는 자료형을 맞추어 일관된 연산을 할 수 있으며, 자료형에 따른 연산 처리를 명확하게 할 수 있다.