[JavaScript] == vs ===: 동등 연산자와 일치 연산자의 결정적 차이

by

JavaScript에서 두 값을 비교할 때 사용하는 연산자에는 == (동등 연산자)와 === (일치 연산자)가 있습니다. 두 연산자는 비슷해 보이지만, 값을 비교하는 방식에 결정적인 차이가 있으며 이 차이를 이해하지 못하면 예측 불가능한 버그를 마주하게 될 수 있습니다. 결론부터 말하자면, 특별한 경우가 아니라면 항상 ===를 사용하는 것이 좋습니다. 왜 그런지 자세히 알아보겠습니다.

1. == (동등 연산자): 타입 강제 변환의 함정

== 연산자는 두 피연산자를 비교하기 전에 **타입이 다를 경우, 타입을 강제로 변환(Type Coercion)**하여 같은 타입으로 만든 후 비교를 시도합니다. 이러한 암묵적인 타입 변환은 편리해 보일 수 있지만, 개발자의 의도와 다른 결과를 초래하는 경우가 많습니다.

주요 변환 규칙 및 예시:

  • 숫자와 문자열을 비교하면, 문자열을 숫자로 변환합니다.
  • null과 undefined는 서로 같다고 판단합니다.
  • 불리언(Boolean) 값을 다른 타입과 비교하면, true는 1로, false는 0으로 변환됩니다.
console.log(1 == '1');        // true (문자열 '1'이 숫자 1로 변환됨)
console.log(0 == false);      // true (false가 숫자 0으로 변환됨)
console.log(null == undefined); // true (특별 규칙)
console.log('' == false);       // true (빈 문자열이 0으로, false가 0으로 변환됨)
console.log([10] == 10);      // true (배열이 문자열 '10'으로, 다시 숫자 10으로 변환됨)

이처럼 ==의 동작은 예측하기 어려운 부분이 많아 코드의 신뢰성을 떨어뜨립니다.

2. === (일치 연산자): 엄격한 비교

=== 연산자는 **엄격한 비교(Strict Equality)**를 수행합니다. 즉, 값과 타입이 모두 동일한 경우에만 true를 반환합니다. 타입 강제 변환을 전혀 수행하지 않기 때문에, 비교 결과가 훨씬 명확하고 예측 가능합니다.

console.log(1 === '1');        // false (타입이 다름: number vs string)
console.log(0 === false);      // false (타입이 다름: number vs boolean)
console.log(null === undefined); // false (타입이 다름: null vs undefined)
console.log([10] === 10);      // false (타입이 다름: object vs number)
console.log(1 === 1);          // true (값과 타입 모두 동일)

=== 연산자를 사용하면, 개발자는 타입까지 고려하여 명시적으로 값을 비교하게 되므로 잠재적인 버그를 사전에 방지할 수 있습니다.

3. 언제 ==를 사용해야 할까?

그렇다면 ==는 절대 사용하면 안 되는 연산자일까요? 거의 그렇다고 할 수 있지만, 한 가지 유용한 예외 케이스가 있습니다. 바로 변수가 null 또는 undefined인지 동시에 확인하고 싶을 때입니다.

let myVar = null;

// myVar가 null이거나 undefined인지 확인
if (myVar == null) {
  console.log('myVar is null or undefined');
}

// 위 코드는 아래와 동일하게 동작
if (myVar === null || myVar === undefined) {
  console.log('myVar is null or undefined');
}

x == null은 x가 null이거나 undefined일 때만 true를 반환하는 유용한 단축 표현이 될 수 있습니다. 하지만 이 경우를 제외한 모든 상황에서는 ===를 사용하는 것이 안전하고 바람직합니다.

요약 및 핵심 원칙

  • == (동등 연산자): 값만 비교하며, 비교 전에 타입을 강제로 변환합니다. 예측 불가능한 결과를 낳을 수 있어 사용을 지양해야 합니다.
  • === (일치 연산자): 값과 타입을 모두 비교합니다. 타입 변환을 하지 않아 명확하고 안전합니다.
  • 핵심 원칙: JavaScript 코드를 작성할 때는 항상 === 연산자를 사용하는 것을 기본 원칙으로 삼아야 합니다. 이는 코드의 품질을 높이고, 디버깅 시간을 줄이며, 동료 개발자와의 협업을 원활하게 만드는 좋은 습관입니다. 반대 개념인 불일치 연산자(!=와 !==)도 동일한 원칙이 적용됩니다.