🧠 JavaScript Type Coercion — 가르치는 질문

Source: Dev.to

자바스크립트 표현식 중에 보기엔 틀려 보이지만 100 % 유효한 것을 살펴보겠습니다 👀

[] == ![]

첫눈에 대부분은 이 결과가 false일 것이라고 생각합니다. 👉 하지만 실제 결과는 true입니다.

Step 1: 논리 NOT 평가

![]

• []는 객체입니다.
• 자바스크립트에서 모든 객체는 truthy합니다.
• truthy 값에 !를 적용하면 false가 됩니다.

이제 식은 다음과 같이 됩니다:

[] == false

Step 2: 느슨한 동등 연산자(==)가 타입 강제 변환을 일으킴

==의 피연산자 중 하나가 Boolean이면, 자바스크립트는 먼저 Boolean을 Number로 변환합니다:

• false → 0 (그리고 true → 1).

따라서 비교는 다음과 같이 바뀝니다:

[] == 0

Step 3: 객체‑원시값 변환

객체와 원시값을 ==로 비교할 때는 default 힌트가 사용되며, 이는 “Number” 변환 순서를 따릅니다:

1. 먼저 valueOf()가 호출됩니다(배열의 경우 자신을 반환).
2. 원시값이 얻어지지 않으면 toString()이 호출됩니다.

[].toString() // ""

이제 비교는 다음과 같습니다:

"" == 0

Step 4: 최종 강제 변환

문자열‑숫자 비교에서는 문자열이 숫자로 변환됩니다:

• Number("") → 0

따라서 최종 비교는:

0 == 0   // true

✅ 결과: true

🔑 핵심 정리

• 자바스크립트는 엄격하고 결정적인 강제 변환 규칙을 따릅니다.
• ==는 암시적 변환을 허용하므로 놀라운 결과가 나올 수 있습니다.
• 배열은 문자열로 변환됩니다 ([] → "").
• Boolean은 숫자로 변환됩니다 (false → 0, true → 1).
• 규칙을 알면 이런 동작을 예측할 수 있습니다.
• 실제 프로덕션 코드에서는 ===(엄격 동등) 사용을 권장합니다.

+ 연산자를 이용한 타입 강제 변환

사례 1: [] + 1

결과: "1"

• +는 숫자 덧셈 또는 문자열 연결을 의미할 수 있습니다.
• 피연산자 중 하나가 문자열이 되면 문자열 연결이 우선합니다.
• [] → "" (빈 문자열).

"" + 1   // "1"

- 연산자를 이용한 타입 강제 변환

사례 2: [] - 1

결과: -1

• -는 숫자 연산 전용이므로 양쪽 모두 숫자로 강제 변환됩니다.
• [] → "" → 0.

0 - 1    // -1

🚀 도전 과제 (객체 비교)

이제 배열에 대한 이해를 바탕으로 일반 객체에 대해 다음을 시도해 보세요:

{} == !{}
{} - 1
{} + 1

출력은 어떻게 될까요 — 그리고 그 이유는 무엇일까요?