[Javascript] 타입 변환 / 강제 변환

JS type coercion, JS 타입 변환, JS 형변환, implicit conversion

정의

JavaScript 의 암묵적 형변환 (coercion). 연산자가 양쪽 피연산자의 타입을 자동으로 맞춘다. 명시적 변환과 구분.

1 + '2'          // '12' (implicit, number → string)
'5' * 2          // 10 (implicit, string → number)
Number('5')      // 5 (explicit)

3 가지 강제 변환

1. ToString

String(123)              // '123'
String(true)             // 'true'
String(null)             // 'null'
String(undefined)        // 'undefined'
String([1,2,3])          // '1,2,3'
String({})               // '[object Object]'
String({a: 1})           // '[object Object]'
String(Symbol('x'))      // 'Symbol(x)'

// 암묵적
123 + ''                 // '123'
`${123}`                  // '123'

2. ToNumber

Number('42')             // 42
Number('42px')           // NaN (엄격)
Number('')               // 0 ⚠️
Number(' ')              // 0 ⚠️
Number(true)             // 1
Number(false)            // 0
Number(null)             // 0 ⚠️
Number(undefined)        // NaN
Number([])               // 0 ⚠️
Number([1])              // 1 ⚠️
Number([1, 2])           // NaN
Number({})               // NaN

// 암묵적
+'42'                    // 42
'42' * 1                 // 42
'42' - 0                 // 42

parseInt / parseFloat 는 관대 (앞쪽 숫자만 추출).

parseInt('42px')         // 42
Number('42px')           // NaN

3. ToBoolean

Boolean(0)               // false
Boolean('')              // false
Boolean(null)            // false
Boolean(undefined)       // false
Boolean(NaN)             // false
Boolean(0n)              // false
// 나머지 truthy

// 암묵적
if (x) { ... }
!!x
x && y

== 의 강제 변환 규칙

'5' == 5                 // true
null == undefined        // true
null == 0                // false (특수)
'' == 0                  // true
'' == false              // true
0 == false               // true
[] == false              // true (배열 → 빈 문자열 → 0)
[] == 0                  // true
[0] == false             // true
[1] == true              // true
[1] == 1                 // true
[1, 2] == '1,2'          // true

규칙이 너무 복잡 → 항상 === 사용 이 정답.

+ 연산자의 양면성

1 + 2                    // 3 (둘 다 number)
1 + '2'                  // '12' (하나라도 string → string)
'1' + 2                  // '12'
{} + []                  // 0 (parser 가 {} 를 block 으로 해석) 또는 '[object Object]'
[] + {}                  // '[object Object]'
[] + []                  // '' (둘 다 toString → '')

+ 는 양쪽 중 하나가 문자열이면 concat, 둘 다 number 면 합.

다른 연산자

'5' - 3                  // 2 (둘 다 number 로 변환)
'5' * 3                  // 15
'5' / 0                  // Infinity
'a' - 1                  // NaN

'5' > 3                  // true (둘 다 number)
'5' > '3'                // true (둘 다 string, 사전순)
'10' > '9'               // false ('1' < '9' 사전순)

객체의 변환

const obj = {
    valueOf() { return 42; },
    toString() { return 'forty-two'; }
};

obj + 1                  // 43 (valueOf 우선)
`${obj}`                  // 'forty-two' (toString 우선, template)
String(obj)              // 'forty-two'
Number(obj)              // 42

Symbol.toPrimitive 로 명시적 제어 가능.

const obj = {
    [Symbol.toPrimitive](hint) {
        if (hint === 'number') return 42;
        if (hint === 'string') return 'forty-two';
        return 'default';
    }
};

함정

1. 빈 배열의 변환

[] == false      // true (헷갈림)
![] == false     // true (헷갈림 × 2)

2. null 의 비교

null > 0         // false
null < 1         // true
null == 0        // false  (모순)
null >= 0        // true

null == undefined 만 true, 다른 비교는 모두 number 변환 후 비교.

3. NaN

NaN == NaN       // false (유일하게 자기 자신과 다름)
[NaN].includes(NaN)   // true (특수)
Number.isNaN(x)  // 명시적 검사

4. JSON 의 변환

JSON.stringify({ a: undefined })    // '{}'  (undefined 제거)
JSON.stringify({ a: null })          // '{"a":null}'
JSON.stringify({ a: NaN })           // '{"a":null}'  (NaN → null)
JSON.stringify({ a: Infinity })      // '{"a":null}'

모범 사례

1. 항상 === / !==
2. 명시적 변환: Number(), String(), Boolean()
3. x == null 만 예외적 허용 (null 또는 undefined 검사)
4. ?? (nullish coalescing) 활용

참고

• JS Number
• JS String
• JS boolean / null / undefined