C
JavaScript 목록
이전6 / 21다음
JavaScript/기초/Lesson 06

타입 강제 변환 — *== 의 함정*

40분·theory
이 챕터
5/5

타입 강제 변환 — *== 의 함정*

🎯 이 lesson 을 읽고 나면

이 lesson 을 다 읽고 나면 아래 3가지를 자신 있게 할 수 있습니다.

  • ▸✅ 암묵적 변환 (== / + / -) 의 동작 규칙
  • ▸✅ falsy 6가지 (0 · '' · null · undefined · NaN · false)
  • ▸✅ Object.is / Number.isNaN 의 정확한 동작

학습 목표를 체크리스트로 두고 다 답할 수 있게 되면 lesson 을 닫으세요.

== vs === — *항상 ===*

핵심 한 줄

JavaScript 의 == 는 비교 전에 타입을 맞춰버립니다. 예상치 못한 결과가 나오기 일쑤. 항상 === 권장.

== 의 충격적 동작

javascript
console.log("5" == 5);          // true   ← string → number 로 자동 변환
console.log(0 == false);        // true   ← boolean → number 로 자동 변환
console.log("" == false);       // true   ← "" → 0, false → 0 → 결국 0 == 0
console.log(null == undefined); // true   ← 특수 규칙: 둘이 서로 같다고 약속됨

console.log([] == false);       // true   ← 모든 게 false 와 같음?!
console.log([] == ![]);         // true   ← 🤯 배열이 자기 부정과 같음 (JS 의 유명한 농담)

마지막 줄을 보세요. 배열이 그 자신의 부정과 같다. JS 의 암묵적 변환 이 만드는 미친 결과.

=== — 안전한 비교

javascript
"5" === 5         // false (타입 다름)
0 === false       // false
null === undefined // false

5 === 5           // true (값 + 타입 모두 같음)

=== 는 값과 타입 모두 같아야 true. 예측 가능.

ESLint 가 강제하는 이유

대부분의 lint 설정이 eqeqeq 룰을 기본 활성화 합니다. 새 코드는 항상 ===. 한 번 익숙해지면 == 보는 게 불편 해집니다.

> 예외: null / undefined 둘 다 잡고 싶을 때:

javascript
if (x == null) { ... }     // null OR undefined

이 한 가지 패턴만 일부 코드 스타일에서 허용. 그 외엔 항상 ===.

Truthy / Falsy

javascript
// Falsy — false 로 평가되는 값 6가지
if (false) {}
if (0) {}
if ("") {}
if (null) {}
if (undefined) {}
if (NaN) {}

// 위 6가지 외엔 모두 Truthy
if ([]) {}       // true!  빈 배열도 truthy
if ({}) {}       // true!  빈 객체도 truthy
if ("0") {}      // true!  문자열 "0" 은 truthy

if (value) 로 간편하게 값이 있는지 체크. 하지만 빈 배열·"0" 같은 함정 도 알고 있어야.

가장 흔한 함정

1. 입력값 비교:

javascript
const age = prompt("나이?");   // 문자열 반환
if (age == 18) { ... }         // "18" == 18 → true (위험)
if (age === 18) { ... }        // false (의도와 다름)
// 해결: Number(age) === 18

2. JSON 에서 받은 숫자:

javascript
// API 응답: { count: 5 }
const { count } = await response.json();
count === 5    // true (대부분)

JSON 은 타입 보존 이라 보통 안전. 하지만 큰 정수 는 bigint 로 변환 필요.

한 번 정리

  • ▸항상 === 사용. == 는 예상 못 한 결과
  • ▸빈 배열·"0" 도 truthy 임을 기억
  • ▸입력값은 명시적 변환 후 비교

⚡ 직접 해보기 — == vs ===

== 가 자동 변환해서 만드는 충격적 결과들. === 와 비교해보세요.
✏️ JS 코드
📟 콘솔 출력
▶ 실행 버튼을 눌러보세요
⚠️ 브라우저 샌드박스에서 실행 — console.log()만 지원, alert/fetch 불가

🤖 AI 에게 이렇게 요청해보세요

이 lesson 의 개념을 알면 AI 에게 구체적으로 지시할 수 있습니다. 막연한 "고쳐줘" 가 아니라 어휘를 가진 요청 — 그게 토큰 절약의 출발점입니다.

  • ▸"이 변수에 적절한 TypeScript 타입 어노테이션 붙여줘"
  • ▸"이 === 와 == 혼용을 === 로 통일하고 의도 명확히 해줘"
  • ▸"이 코드의 JSON.parse 결과에 unknown 타입 + 타입 가드 추가해줘"

왜 이게 토큰을 줄이나

개념을 모를 땐 AI 답변을 받고도 "그게 뭐예요?" 를 다시 물어야 합니다. 그 "다시 물음" 이 토큰을 잡아먹습니다. 개념 한 번 익혀두면 대화가 한 번에 끝납니다.

먼저 읽으면 좋은 개념: 제어 흐름 — if · for · while · switch
다음 추천: 함수 기초
이전목록다음
타입 변환과 동등 비교 - JavaScript