동등(==) vs 일치(===)연산자

Jaeseok Han·2024년 8월 13일

== 과 ===

자바스크립트에서 == 연산자와 ===연산자는 둘 다 두 값의 동등성을 비교하는데 사용되지만, 그 작동 방식에 중요한 차이가 있다. 이 두 연산자를 제대로 이해하고 사용해야 버그를 예방하고 코드의 의도를 명확히 파악할 수 있다.

1. == 연산자 (동등 연산자)

1) 타입 변환을 혀용

== 연산자는 비교하지 전에 두 피연산자의 타입을 동일하게 맞추기 위해 타입 변환(coercion)을 수행한다. 이로 인해 의도하지 않은 결과가 발생할 수 있다.

console.log(5 == '5');      // true (숫자와 문자열을 비교하며 문자열 '5'가 숫자 5로 변환됨)
console.log(false == 0);    // true (false는 0으로 변환됨)
console.log(null == undefined); // true (둘 다 비어 있음을 의미하므로 true)

2. === 연산자 (일치 연산자)

1) 엄격한 비교

=== 연산자는 두 피연산자가 같은 값이고, 같은 타입일 때만 true를 반환한다. 즉, 타입 변환을 하지 않고 값과 타입이 모두 동일해야 한다.

console.log(5 === '5');     // false (숫자와 문자열은 타입이 다름)
console.log(false === 0);   // false (타입이 다름)
console.log(null === undefined); // false (타입이 다름)
console.log(5 === 5);       // true (같은 타입의 동일한 값)

3. 언제 어떤 연산자를 사용해야 하는가?

1) === 연산자를 기본적으로 사용

타입 변환으로 인해 발생할 수 있는 예기치않은 오류를 방지하기 위해 ===연산자를 사용하는 것이 좋다. 이는 코드의 안정성과 가독성을 높인다.

2) == 연산자를 신중하게 사용

== 연산자가 필요한 경우, 즉, 타입이 다를 수 있지만 값이 같다고 판단되는 경우에만 사용해야한다. 이러한 경우는 코드 리뷰 시 주의 깊게 살펴봐야 한다.

✔️ NaN과 비교
어떤 값이 NaN인지 확인하려면 isNaN 함수를 사용해야 한다. NaN은 자신과도 같지 않기 때문에 NaN == NaN 또는 NaN === NaN은 항상 false를 반환한다.

✔️ 객체와 배열의 비교
객체나 배열은 참조 타입이므로 같은 인스턴스를 가리키지 않은 한 항상 false를 반환한다.

const a = [1, 2, 3];
const b = [1, 2, 3];
console.log(a == b);       // false
console.log(a === b);      // false
const c = a;
console.log(a == c);       // true
console.log(a === c);      // true

0개의 댓글