➕ 자바스크립트 == vs === 완전 정리 – 느슨한 비교와 엄격한 비교의 차이

➕ 자바스크립트 == vs === 완전 정리 – 느슨한 비교와 엄격한 비교의 차이

자바스크립트에서 ==와 ===는 둘 다 두 값을 비교하는 연산자지만,
타입 변환을 허용하느냐에 따라 결과가 크게 달라집니다.
이번 글에서는 두 비교 연산자의 차이와 자주 발생하는 예외 상황, 실무에서의 사용 팁까지 정리합니다.

---

1. == (느슨한 동등 연산자)

==는 비교 전에 암묵적으로 형 변환(coercion)을 수행합니다.

console.log(1 == "1");       // 👉 true
console.log(true == 1);      // 👉 true
console.log(null == undefined); // 👉 true
console.log(0 == false);     // 👉 true

이러한 변환은 편리할 수 있지만, 예상치 못한 결과를 낳을 수 있어 주의가 필요합니다.

---

2. === (엄격한 동등 연산자)

===는 타입과 값이 모두 같을 때만 true를 반환합니다.

console.log(1 === "1");      // 👉 false
console.log(true === 1);     // 👉 false
console.log(null === undefined); // 👉 false
console.log(0 === false);    // 👉 false

실무에서는 ===를 기본으로 사용하는 것이 안전합니다.

---

3. 자주 나오는 예외 상황 모음

표현식	== 결과	=== 결과
"" == 0	true	false
null == undefined	true	false
[] == 0	true	false
[] == ""	true	false
[1] == "1"	true	false
{} == "[object Object]"	false	false

---

4. Object와 배열이 관여된 비교의 주의점

객체나 배열이 비교에 참여하면 문자열로 변환되는 경우가 많습니다.

console.log([] == "");       // 👉 true (배열 → "")
console.log([1] == "1");     // 👉 true ([1] → "1")
console.log([] == 0);        // 👉 true ([] → "" → 0)
console.log([null] == 0);    // 👉 true ([null] → "" → 0)

이처럼 비교 대상에 []나 {}가 있을 경우 예측이 어렵기 때문에 === 사용이 권장됩니다.

---

5. 실무에서의 안전한 비교 전략

• 기본적으로는 ===를 사용하고, ==는 null, undefined 비교처럼 특별한 경우만 허용
• if (value == null) 은 null 또는 undefined를 동시에 걸러낼 수 있음

// 추천 예시
if (value === "") { ... }
if (typeof value === "number") { ... }

// 특별히 허용되는 예시
if (value == null) {
  // null 또는 undefined 둘 다 허용
}

---

🧪 보너스: Object.is(NaN, NaN)은?

Object.is(NaN, NaN); // ✅ true

• Object.is()는 ===보다 정밀한 동등 비교를 해줍니다.
• 이 메서드는 NaN === NaN만 true로 예외 처리해줘요.

== (느슨한 동등), === (엄격한 동등), Object.is() (정밀한 동등)

---

✅ 1. == – 느슨한 동등 (Loose Equality)

• **타입이 달라도 자동 형 변환(coercion)**을 해서 비교
• 예측 불가능한 경우가 많아 실무에서는 잘 안 씀

1 == "1";          // true (문자열 → 숫자 변환)
0 == false;        // true
null == undefined; // true
[] == false;       // true

---

✅ 2. === – 엄격한 동등 (Strict Equality)

• 타입까지 같아야 true
• 실무에서는 기본적으로 === 사용 권장

1 === "1";         // false ❌
0 === false;       // false ❌
null === undefined;// false ❌
[] === false;      // false ❌
NaN === NaN;       // false ❗ (예외!)

---

✅ 3. Object.is() – 정밀한 동등 (SameValue 알고리즘)

• ===와 거의 같지만 두 가지 예외에서 다르게 동작

케이스	===	Object.is()
NaN === NaN	❌ false	✅ true
+0 === -0	✅ true	❌ false

 

Object.is(NaN, NaN);     // true ✅
Object.is(+0, -0);       // false ❗

 

비교 방식	타입 검사	형 변환	NaN 비교	+0 vs -0	사용 용도
==	❌ 없음	✅ 자동 변환	❌ false	✅ true	느슨한 비교, 사용 지양
===	✅ 있음	❌ 없음	❌ false	✅ true	✅ 기본 비교 연산자
Object.is()	✅ 있음	❌ 없음	✅ true	❌ false	✅ 특별한 비교 (NaN 등)

---

📌 마무리

==와 ===는 비슷해 보이지만, 타입 변환의 유무로 결과가 크게 달라질 수 있습니다.
예외 케이스도 많고 예측이 어렵기 때문에, 항상 엄격한 비교(===)를 기본으로 사용하는 습관을 추천합니다.

다음 글에서는 Truthy / Falsy 값 정리와 예외 케이스를 더 깊게 파고듭니다. 어떤 값이 false로 취급되는지, 헷갈리는 케이스를 집중적으로 살펴보겠습니다.