자바스크립트에서의 강제 형변환 이해

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 초보자 및 중급자 개발자에게 유용
• 난이도: 중간 (기초 개념부터 고급 패턴까지 포함)

핵심 요약

• 강제 형변환(Coercion)은 number → string, boolean → number 등 데이터 타입 간 자동/수동 변환을 의미
• +, -, *, / 연산자로 암시적 형변환(Implicit Coercion) 발생 (예: 1 + "1" → "11", 1 - "1" → 0)
• === 연산자는 형변환 금지로 예기치 않은 버그 방지에 유리 (예: "5" === 5" → false)
• 7가지 falsy 값(0, null, undefined, "", false, NaN, -0)은 조건문에서 자동으로 false로 간주됨

섹션별 세부 요약

1. 강제 형변환의 두 유형

• 암시적 형변환(Implicit Coercion): JavaScript가 자동으로 수행 (예: if (0) → false)
• 명시적 형변환(Explicit Coercion): 개발자가 수동으로 수행 (예: Number(false) → 0, +"1" → 1)

2. 연산자에 따른 암시적 형변환

• + 연산자: 하나의 피연산자가 문자열일 경우, 다른 값을 문자열로 변환 후 연결 (예: "hello" + 1 → "hello1")
• -, *, / 연산자: 비수치 타입을 수치로 암시적 변환 (예: 1 - "2" → -1)

3. truthy/falsy 규칙

• 7가지 falsy 값: 0, null, undefined, "", false, NaN, -0
• 모든 다른 값은 truthy (예: [], {}, "0", "false")

4. `==` vs `===`

• ==: 형변환 허용 (예: "5" == 5" → true, null == undefined → true)
• ===: 형변환 금지 (예: "5" === 5" → false, null === undefined → false)
• Best Practice: === 사용으로 예기치 않은 버그 방지

5. short-circuiting 패턴

• || 연산자: 첫 번째 truthy 값 반환 (예: null || 'default' → 'default')
• && 연산자: 마지막 truthy 값 반환 (예: 'hello' && 123 → 123)

6. 이상한 경우(Edge Cases)

• [] == false → true (빈 배열은 falsy로 간주)
• null == 0 → false
• null >= 0 → true (비교 시 형변환 순서가 복잡)

7. 예제 해석

1. [] + 1 → []는 ""으로 변환 → "" + 1 → "1"
2. null == undefined → true (두 값은 약한 비교 시 동일)
3. '5' - true → true는 1로 변환 → '5' - 1 → 4

결론

• === 연산자 사용을 통해 형변환 관련 오류 예방
• ==은 의도적으로 사용하지 않는 것이 안전
• 암시적 형변환이 발생하는 연산자(+, -, ==)를 사용 시 타입 체크 필수
• 예외 케이스(예: [] == false, null >= 0)를 이해해 예측 가능한 로직 작성