형변환 주의하기

자바스크립트의 == 연산자는 복잡한 형변환 규칙을 가지고 있다. 이는 JavaScript Type Table을 보면 명확하게 확인할 수 있다. 이 테이블은 ==와 ===연산자의 차이를 극명하게 보여준다. 이러한 복잡한 형변환 규칙 때문에 느슨한 검사를 피해야 한다.

1. 암묵적 형변환(위험) ⚠️

'1' == 1 // 느슨한 검사 => 형 변환
1 == true // true
0 == false  // true

// 문자열 결합시 암묵적 변환
11 + ' 문자와 결합' // '11 문자와 결합'

// boolean으로의 암묵적 변환
!!'문자열' //true
!!'' //false

이러한 암묵적 형변환 코드는 예측 가능성을 떨어뜨리고 버그의 원인이 될 수 있다.

2. 명시적 형변환(권장!) ✅

개발자가 의도적으로 수행하는 더 안전하고 명시적인 형변환 방법

String(11) + ' 문자와 결합' // '11 문자와 결합'

Boolean('문자열') // true
Boolean('') // false
Number('11') // 11

parseInt('9.9999', 10); // 9

Wrapper 객체를 사용한 명시적 형변환이 코드의 의도를 더 명확하게 전달한다.

3. 형변환의 두 가지 케이스

1. 개발자가 의도한 형변환 : 명시적 형변환 사용
   1. String(), Number(), Boolean() 등 Wrapper객체를 활용한 명시적 방법 사용
   2. parseInt(), parseFloat() 등의 변환 함수 활용
2. JavaScript 엔진에 의한 형변환 : 암묵적 형변환
   1. +,- 등 산술연산자 사용시 자동으로 발생
   2. 크기 비교나 동등 비교 연산시 자동으로 발생
   3. 가능한 피해야 할 상황

4. 안전한 코드 작성을 위한 규칙 📌

4.1 항상 일치 연산자(===) 사용하기

// ❌ 이렇게 하지 마세요
if (value == 123) { ... }

// ✅ 이렇게 하세요
if (value === 123) { ... }

4.2 형변환이 필요할 때는 명시적으로 표현

// ❌ 피해야 할 방식
const num = +'123'

// ✅ 권장하는 방식
const num = Number('123')

정리 📝

• 자바스크립트의 타입 시스템은 복잡하며 예측하기 어려움
• 타입 안정성을 위해 === 연산자 사용
• 형변환이 필요할 때는 반드시 명시적인 방법 사용
• 팀원과 유지보수를 위해 예측 가능한 코드 작성이 필요하다