연산 기호 - 같다, 같지 않다 (==, ===, !=, !==

JavaScript에서 같다와 같지 않다를 표현하는 방법은 연산자에 따라 다릅니다. 이 연산자는 연산자 우선순위, 자료형 비교 여부 등에 따라 달라지니, 각각의 연산자와 사용 목적을 정리해 드리겠습니다.

---

1. 연산자 (Equality Operators)

이 연산자는 값을 비교하거나 자료형까지 고려해 비교할 때 사용됩니다.

a) 느슨한 비교 (==, !=)

• 자료형을 자동으로 변환해서 비교합니다.
  (예: 1 == '1'은 참(true))
• 같다: ==
• 같지 않다: !=

console.log(1 == '1');  // true (자료형 변환)
console.log(1 != '2');  // true

b) 엄격한 비교 (===, !==)

• 자료형 변환 없이 값과 자료형까지 정확히 비교합니다.
  (예: 1 === '1'은 거짓(false))
• 같다: ===
• 같지 않다: !==

console.log(1 === '1'); // false (자료형 다름)
console.log(1 !== '1'); // true

 

---

2. 논리 연산자 (Logical Operators)

논리적으로 참/거짓을 조합하거나 판단할 때 사용됩니다.

• 같다를 직접적으로 비교하는 연산자는 없지만, &&와 ||를 사용하여 조건을 조합할 수 있습니다.

const a = 5, b = 5;
console.log(a === b && b === 5); // true (논리적으로 모두 참)
console.log(a !== b || b !== 5); // false (둘 다 거짓)

---

3. 비트 연산자 (Bitwise Operators)

비트 수준에서 연산하며, 같다와 같지 않다는 직접적으로 처리하지는 않습니다.
다만, XOR (^)를 활용해 두 숫자가 다르면 참, 같으면 거짓으로 표현 가능.

• a ^ b의 결과가 0이면 두 값은 같음.

const x = 5;  // 101 (binary)
const y = 5;  // 101 (binary)
console.log((x ^ y) === 0); // true (비트가 같음)

---

요약 및 선택 기준

연산자 유형 연산자 설명 자료형 검사 여부

느슨한 비교	==, !=	값만 비교 (자동 형변환)	❌
엄격한 비교	===, !==	값 + 자료형 정확히 비교	✅
비트 연산	^	값의 비트가 같은지 확인	✅ (수 타입만 가능)
논리 연산	&&, `		`

---

추가 예제

const a = '5';
const b = 5;

// 느슨한 비교
console.log(a == b);  // true
console.log(a != b);  // false

// 엄격한 비교
console.log(a === b); // false
console.log(a !== b); // true

// XOR 연산 (비트 비교)
console.log((b ^ 5) === 0); // true

// 논리 조합
console.log(a == b && b === 5); // true
console.log(a === b || b === 5); // true

---

 

느슨한 비교(==, !=)와 엄격한 비교(===, !==)장단점

1. 느슨한 비교 (==, !=)

장점

• 유연성: 서로 다른 자료형 간의 비교가 가능하며, 값만 같으면 참으로 처리됩니다.

  console.log(1 == '1'); // true
  console.log(false == 0); // true
  

• 빠른 코딩: 간단한 비교에서는 더 적은 코드로 결과를 얻을 수 있습니다.

단점

• 예상치 못한 결과: 자료형을 자동 변환하므로, 의도와 다른 결과가 나올 수 있습니다.

  console.log(null == undefined); // true
  console.log([] == false); // true (빈 배열은 0으로 변환)
  

• 디버깅 어려움: 자동 형변환 규칙이 복잡해 디버깅이 까다로울 수 있습니다.

주의사항

• 명확한 비교가 필요할 때는 사용하지 않는 것이 좋습니다.
• ==는 자동 형변환을 발생시키므로, 비교 전에 예상되는 자료형 변환 규칙을 확인해야 합니다.

---

2. 엄격한 비교 (===, !==)

장점

• 정확성: 자료형까지 비교하므로 의도한 대로 결과를 얻을 가능성이 높습니다.

  console.log(1 === '1'); // false
  console.log(false === 0); // false
  

• 디버깅 용이: 비교가 명확해 오류를 쉽게 찾고 수정할 수 있습니다.

단점

• 덜 유연함: 서로 다른 자료형 간의 비교를 직접 처리해야 하므로 추가적인 변환 코드가 필요할 수 있습니다.

  console.log(1 === Number('1')); // true (형변환 필요)
  

주의사항

• 일관성 있게 사용: 자료형 검사를 포함한 비교가 필요할 때는 항상 ===와 !==를 사용하는 것이 좋습니다.
• 특수한 값: NaN과 객체 비교 시 추가 검토가 필요합니다.

  console.log(NaN === NaN); // false
  console.log({} === {}); // false (다른 객체 참조)
  

 

• 일반적인 경우: 엄격한 비교(===, !==) 사용을 기본으로 합니다.
• 유연성이 필요한 경우: 느슨한 비교(==, !=)를 사용하지만, 예상 가능한 값과 자료형이거나 결과를 명확히 이해할 때만 사용합니다.

---

예제 비교

// 느슨한 비교
console.log('1' == 1); // true
console.log(0 == false); // true
console.log(null == undefined); // true

// 엄격한 비교
console.log('1' === 1); // false
console.log(0 === false); // false
console.log(null === undefined); // false

---