[JS] 형변환 완벽 가이드: 명시적 & 암시적 변환의 모든 것

 

JavaScript 형변환 완벽 가이드: 명시적 & 암시적 변환의 모든 것

1. 들어가며

JavaScript는 동적 타입 언어로, 변수의 데이터 타입이 유연하게 변경될 수 있습니다. 이러한 특성 덕분에 편리하지만, 형변환(Type Conversion)으로 인해 예상치 못한 오류가 발생할 수도 있습니다. 이 글에서는 명시적 형변환과 암시적 형변환의 차이를 명확히 이해하고, 실무에서 안전하게 형변환을 사용하는 방법을 소개합니다.

---

2. 형변환의 종류

2.1 명시적 형변환 (Explicit Type Conversion)

• 개념: 개발자가 의도적으로 데이터 타입을 변환하는 방법입니다.
• 주요 메서드: String(), Number(), Boolean()
• 장점: 코드가 명확하고 예측 가능함.

2.2 암시적 형변환 (Implicit Type Conversion)

• 개념: JavaScript 엔진이 자동으로 데이터 타입을 변환하는 경우입니다.
• 발생 상황: 연산자(+, - 등)나 조건문에서 자주 발생.
• 주의점: 예측하지 못한 결과를 초래할 수 있음.

---

3. 명시적 형변환

3.1 숫자로 변환

• 사용 메서드: Number(), parseInt(), parseFloat()
• 예제:

console.log(Number("123")); // 123
console.log(parseInt("123px")); // 123
console.log(parseFloat("3.14")); // 3.14

3.2 문자열로 변환

• 사용 메서드: String(), toString()
• 예제:

console.log(String(123)); // "123"
console.log((123).toString()); // "123"

3.3 불리언으로 변환

• Truthy와 Falsy 값: 0, "", null, undefined, NaN은 Falsy.
• 예제:

console.log(Boolean(0)); // false
console.log(Boolean("Hello")); // true

---

4. 암시적 형변환

4.1 문자열 변환

• 발생 상황: + 연산자가 문자열과 함께 사용될 때.
• 예제:

console.log("123" + 4); // "1234"

4.2 숫자 변환

• 발생 상황: 산술 연산자(-, *, /)가 사용될 때.
• 예제:

console.log("5" - 3); // 2

4.3 불리언 변환

• 발생 상황: 조건문(if, while)에서.
• 예제:

if ("") console.log("Falsy"); // 실행되지 않음
if ("Hello") console.log("Truthy"); // "Truthy"

4.4 주의할 점: NaN 발생

• 잘못된 변환 사례:

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

---

5. 형변환이 자주 발생하는 연산과 사례

5.1 산술 연산자와 형변환

• 설명: +, - 등 연산에서 암시적 변환이 발생.

5.2 비교 연산자와 형변환

• ==와 ===의 차이:

console.log(1 == "1"); // true
console.log(1 === "1"); // false

5.3 논리 연산자와 형변환

• Truthiness/Falsiness의 활용:

console.log(null || "default"); // "default"

---

6. 형변환과 실무에서의 유의점

6.1 명시적 변환을 선호하는 이유

• 암시적 변환의 예측 불가능성을 줄이고, 코드의 명확성을 높임.

6.2 안전한 형변환을 위한 실무 패턴

• 기본값 설정:

const value = input || "default";

• 안전한 숫자 변환:

const num = isNaN(Number(input)) ? 0 : Number(input);

---

7. 결론

• 명시적 형변환과 암시적 형변환의 차이를 이해하면 코드의 오류를 줄이고 가독성을 높일 수 있습니다.
• 실무에서는 명시적 변환을 우선 사용하고, 암시적 변환의 동작 방식을 숙지하여 불필요한 오류를 방지하세요.

---