ZENO — 웹 개발, 디자인, 자격증 정리

자바스크립트 비교 연산자 (===, ==, !=, !==)

자바스크립트에서 값을 비교할 때는 항상 **“느낌표와 등호”**를 조합한 네 가지 연산자를 기억해야 한다.
이 연산자들은 단순히 “같다/다르다”를 판단하는 게 아니라, 데이터 타입까지 비교하느냐에 따라 결과가 완전히 달라진다.

---

1. 느슨한 비교 ==

== 는 느슨한(Loose) 비교 연산자다.
즉, 두 값의 타입이 다르면 자동으로 형변환(type coercion) 을 해서 비교한다.

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

위처럼 숫자, 문자열, 불리언이 자동으로 변환되어 비교된다.
그래서 의도치 않은 결과를 만들기도 한다.

---

2. 엄격한 비교 ===

=== 는 엄격한(Strict) 비교 연산자다.
값뿐만 아니라 데이터 타입까지 완전히 일치해야 true가 된다.

console.log(5 === "5"); // false (타입이 다름)
console.log(5 === 5);   // true
console.log(false === 0); // false

따라서 실제 개발에서는 == 대신 === 를 쓰는 게 안전하다.
특히 조건문, 데이터 검증, API 응답 비교 등에서는 반드시 === 을 써야 한다

---

3. 느슨한 불일치 !=

!= 는 “같지 않다”의 느슨한 버전이다.
즉, == 처럼 형변환 후 비교한다.

console.log(5 != "5"); // false (형변환 후 같다고 판단)
console.log(0 != false); // false

---

4. 엄격한 불일치 !==

!== 는 엄격한 불일치 연산자다.
값이 다르거나 타입이 다르면 true를 반환한다.

console.log(5 !== "5"); // true (타입이 다름)
console.log(5 !== 5);   // false (완전히 같음)

---

5. 비교 연산자 선택 가이드

• 항상 ===와 !==를 기본으로 사용하라.
  → 형변환으로 인한 버그를 피할 수 있다.
• ==와 !=는 의도적으로 타입 변환이 필요한 경우만 사용한다.
  예: null, undefined 동시 체크

if (value == null) {
  // null 또는 undefined일 때 실행됨
}

---

6. 비교의 실제 예시

const x = 0;
const y = "0";

if (x == y) {
  console.log("느슨한 비교에서는 같다!");
}

if (x === y) {
  console.log("엄격한 비교에서는 다르다!");
}

==는 "0"을 숫자 0으로 변환해서 비교했기 때문이다.
반면 ===는 숫자와 문자열을 서로 다른 타입으로 보기 때문에 false가 된다.

---

단어정리

비교(比較)

• 한자: 견줄 비(比), 견줄 교(較)
• 영어: Compare — 라틴어 comparare(나란히 놓다)
• 뜻: 두 값을 대조해 같거나 다름을 판단하는 행위

엄격(嚴格)

• 한자: 엄할 엄(嚴), 굳을 격(格)
• 영어: Strict — 라틴어 stringere(묶다, 조이다)
• 뜻: 기준이나 조건을 엄밀하게 적용하는 것

느슨(緩)

• 한자: 느릴 완(緩)
• 영어: Loose — 고대 영어 losian(풀리다, 느슨하다)
• 뜻: 엄격하지 않고 여유 있게 처리함

형변환(形變換)

• 한자: 모양 형(形), 변할 변(變), 바꿀 환(換)
• 영어: Type Coercion — type(형태) + coercion(강제)
• 뜻: 한 데이터 타입을 자동으로 다른 타입으로 바꾸는 동작