동등 연산자, 일치 연산자

== (동등 연산자)와 === (일치 연산자)는 JavaScript에서 두 값을 비교할 때 사용되지만, 타입(Type)을 고려하는 방식에서 중요한 차이가 있습니다.

1. == (Loose Equality / 동등 연산자)

• 동작 방식: 두 피연산자의 값을 비교하기 전에, 만약 **타입이 다르면 JavaScript가 암묵적으로 타입을 변환 (Type Coercion, 타입 강제 변환)**하려고 시도합니다. 타입 변환 후 값이 같으면 true를 반환합니다.
• 특징: 타입이 다른 값들도 같다고 평가될 수 있습니다.
• 예시:
  JavaScript

   

  console.log(5 == '5');       // true (문자열 '5'를 숫자 5로 변환 후 비교)
  console.log(1 == true);      // true (불리언 true를 숫자 1로 변환 후 비교)
  console.log(0 == false);     // true (불리언 false를 숫자 0으로 변환 후 비교)
  console.log(null == undefined); // true (== 연산자의 특별 규칙)
  console.log('' == 0);        // true (빈 문자열 ''을 숫자 0으로 변환 후 비교)
  console.log(' \t\r\n ' == 0); // true (공백 문자열을 숫자 0으로 변환 후 비교)
  

• 주의점: 암묵적 타입 변환 때문에 예측하기 어려운 결과를 낳을 수 있으며, 코드의 의도를 파악하기 어렵게 만들거나 잠재적인 버그의 원인이 될 수 있습니다.

2. === (Strict Equality / 일치 연산자)

• 동작 방식: 두 피연산자의 값과 타입을 모두 엄격하게 비교합니다. 타입 변환을 전혀 수행하지 않습니다.
• 특징:
  • 먼저 두 피연산자의 타입이 같은지 확인합니다.
  • 타입이 다르면 즉시 false를 반환합니다.
  • 타입이 같으면 그 때 값(value)이 같은지를 비교합니다.
• 예시:
  JavaScript

   

  console.log(5 === '5');       // false (타입이 다름: number vs string)
  console.log(1 === true);      // false (타입이 다름: number vs boolean)
  console.log(0 === false);     // false (타입이 다름: number vs boolean)
  console.log(null === undefined); // false (타입이 다름: null vs undefined)
  console.log('' === 0);        // false (타입이 다름: string vs number)
  
  console.log(5 === 5);         // true (타입과 값이 모두 같음)
  console.log('hello' === 'hello'); // true (타입과 값이 모두 같음)
  console.log(null === null);     // true (타입과 값이 모두 같음)
  

핵심 차이 요약:

특징== (동등 연산자)=== (일치 연산자)

비교 대상	값 (Value)	값 (Value) 및 타입 (Type)
타입 변환	수행함 (암묵적 타입 변환)	수행하지 않음
비교 방식	느슨한 비교 (Loose Comparison)	엄격한 비교 (Strict Comparison)
예측 가능성	낮음 (의도치 않은 결과 가능)	높음 (명확하고 예측 가능)

Sheets로 내보내기

권장 사항 (Best Practice):

현대 JavaScript 개발에서는 === (일치 연산자)를 기본적으로 사용하는 것이 강력하게 권장됩니다.

• 이유: ===는 암묵적인 타입 변환으로 인한 예기치 않은 동작을 방지해주고, 코드의 의도를 더 명확하게 표현하여 버그를 줄이고 가독성을 높입니다.
• ==는 null과 undefined를 동시에 비교하는 경우 (variable == null 은 variable === null || variable === undefined 와 같음) 등 매우 제한적이고 의도가 명확한 상황에서만 신중하게 사용해야 합니다.

참고: 객체 비교

==와 === 모두 객체(Object, Array 포함)를 비교할 때는 **참조(reference)**를 비교합니다. 즉, 두 변수가 메모리 상의 동일한 객체를 가리키고 있을 때만 true를 반환합니다. 객체의 내용이 같더라도 서로 다른 객체라면 false를 반환합니다.

JavaScript

 

let obj1 = { a: 1 };
let obj2 = { a: 1 };
let obj3 = obj1;

console.log(obj1 == obj2);  // false (내용은 같지만 다른 객체)
console.log(obj1 === obj2); // false (내용은 같지만 다른 객체)
console.log(obj1 == obj3);  // true (같은 객체를 참조)
console.log(obj1 === obj3); // true (같은 객체를 참조)