➕ 자바스크립트의 자동 형 변환(Coercion)과 명시적 변환 완전 정리

➕ 자바스크립트의 자동 형 변환(Coercion)과 명시적 변환 완전 정리

자바스크립트는 동적 타입 언어이기 때문에 연산 중에 자동 형 변환(암묵적 coercion)이 자주 발생합니다.
이로 인해 의도하지 않은 버그가 발생하기도 하며, 명시적 형 변환을 적절히 활용하는 것이 중요합니다.
이번 글에서는 자동 변환이 발생하는 상황과 주의할 점, 명시적 변환 방법까지 정리합니다.

---

1. 자동 형 변환(암묵적 coercion)이란?

자동 형 변환은 연산자가 서로 다른 타입을 만났을 때 자바스크립트 엔진이 알아서 타입을 변환하는 행위입니다.

📌 예시: 문자열 + 숫자

console.log("10" + 2); // 👉 "102" (숫자 → 문자열로)
console.log("10" - 2); // 👉 8 (문자열 → 숫자로)

📌 예시: boolean → 숫자

console.log(true + 1);  // 👉 2
console.log(false + 1); // 👉 1

📌 null, undefined의 예외적 동작

console.log(null + 1);     // 👉 1 (null → 0)
console.log(undefined + 1); // 👉 NaN (undefined는 숫자 변환 불가)

---

2. 자동 형 변환이 발생하는 상황

상황	예시	결과
덧셈 연산자 +	"5" + 1	"51"
산술 연산자 -, *, /	"5" - 1	4
비교 연산자	"5" > 2	true
조건문 if	if ("")	false

---

3. 명시적 형 변환 방법

직접 타입을 변환하여 의도를 명확히 표현할 수 있습니다.

✅ 문자열로 변환

String(123);         // "123"
123..toString();     // "123"
true + "";           // "true"

✅ 숫자로 변환

Number("123");       // 123
+"123";              // 123 (단항 + 연산자)
parseInt("10px");    // 10
parseFloat("3.14");  // 3.14

✅ 불리언으로 변환

Boolean(0);          // false
!!"hello";           // true

💡 !!value는 간단한 불리언 변환 패턴으로 매우 자주 쓰입니다.

---

4. Truthy / Falsy 값 정리

자바스크립트에서는 조건문에서 자동으로 불리언 변환이 일어납니다.

Falsy 값 목록 (자동 false 처리됨)

• false
• 0, -0
• "" (빈 문자열)
• null
• undefined
• NaN

그 외 모든 값은 truthy

if ("0") console.log("실행됨"); // 👉 실행됨 (문자열 "0"은 truthy)

---

5. 자동 형 변환의 위험성

암묵적 변환은 의도하지 않은 결과를 만들 수 있습니다.

console.log([] + {}); // 👉 "[object Object]"
console.log({} + []); // 👉 0 (상황에 따라 다르게 평가됨!)

✅ 복잡한 연산에서는 항상 명시적 변환을 사용하여 의도를 명확히 하세요.

---

📌 마무리

자바스크립트의 자동 형 변환은 편리하지만 의도하지 않은 버그의 원인이 되기 쉽습니다.
특히 연산자에 따라 변환 방향이 달라지므로, 실무에서는 명시적 변환을 적극 사용하는 습관이 중요합니다.

다음 글에서는 == vs ===의 차이와 자주 발생하는 예외 상황을 상세히 정리합니다.