[JavaScript] ==(동등비교,loose equality)연산자와 ===(일치비교,strict equality)연산자의 차이점은

기본적으로 비교 연산자(comparison operator)는 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언값(true 또는 false)으로 반환한다. 그렇기때문에 비교연산자는 if문이나 for문과 같은 제어문의 조건식에 자주 사용하게 된다.

 

그렇다면 자바스크립트의 == 과 === 은 정확히 어떤 차이가 있을까?

이제부터 == 은 동등비교(loose equality) 라고 부를것이며, === 은 일치비교(strict equality)라고 부르겠다.

 

동등 비교 연산자와 일치 비교 연산자는 좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 불리언값을 반환한다. 하지만 2가지의 비교는 '엄격성'에서 차이가 난다.

 

동등 비교 연산자는 느슨한 비교를 하지만 일치 비교 연산자는 엄격한 비교를 한다.

 

예시부터 확인해보자.

 

동등비교(==)

// 동등 비교 예시
const a = 5 == 5;
console.log('a = ' , a); // true
 
// 타입은 다르지만 암묵적 타입 변환을 통해 타입을 일치시키면 동등하다.
const b =  5 == '5';
console.log('b = ' , b) // true
 

출력 값

 

위의 코드를 확인해보면 a, b가 모두 true인것을 확인할 수 있다. 그렇다는것은 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것을 확인 할 수 있는 부분이다. 

 

정리하자면, 자바스크립트 동등비교에는 "압묵적 타입 변환"기능이 존재한다. 

그렇기때문에 동등 비교 연산자는 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교하게 된다.

 

어떻게 보면 편리할 수 있을듯 하지만, 결과를 예측하기 어렵고 실수하기 쉬워지기 떄문에 버그의 문제가 생길 확률이 올라간다. 다음 예제는 암묵적 타입 변환으로 인한 안티패턴이다.

 

const a = '0' == ''; // false
console.log(a)
 
const b = 0 == '0'; // true
console.log(b)
 
const c = 0 == '0'; // true
console.log(c)
 
const d = false == 'false'; // false
console.log(d)
 
const e = false == '0'; // true
console.log(e)
 
const f = false == null; // false
console.log(f)
 
const g = false == undefined; // false
console.log(g)

 

// 일치 비교
const a = 5 === 5; // true
console.log(a);
 
// 동등 비교와 달리 암묵적 타입 변환을 하지않고 값을 비교한다.
// 즉, 값과 타입이 모두 같은 경우만 true를 반환한다.
const b = 5 === '5'; // false
console.log(b);

NaN

일치 비교 연산자를 사용하면서, 주의해야할 점은NaN이다.

 

MDN에서 정의하는 NaN에 대해 알아보자

NaN은 전역 객체의 속성이다. 즉 전역 스코프의 변수이다.
NaN의 초기값은 Not-A-Number(숫자가 아님)로, Number.NaN의 값과 같다. 최신 브라우저에서 NaN은 설정 불가, 쓰기 불가 속성이다. 그렇지 않다고 하더라도 덮어쓰는건 피하는게 좋다.

NaN을 반환하는 연산에는 다섯 가지 종류가 있다.
- 숫자로서 읽을 수 없음(parseInt("어쩌구"), Number(undefined))
- 결과과 허수인 수학 계산식 (Math.sqrt(-1))
- 피연산자가 NaN 7 ** NaN)
- 정의할 수 없는 계산식 (0 * Infinity)
- 문자열을 포함하면서 덧셈이 아닌 계산식 ("가" / 3)

// NaN은 자신과 일치하지 않는 유일한 값이다
const e = NaN === NaN; // false
console.log(e)

// isNan 함수는 지정한 값이 NaN인지 확인하고 그 결과를 불리언 값으로 반환한다.
const a = isNaN(NaN) // true
console.log(a)
 
const b = isNaN(100) // false
console.log(b)
 
const c = isNaN(1 + undefined) // true
console.log(c)
 
const d = isNaN(false) // false
console.log(d)

 

---

 

숫자 0

자바스크립트에서는 양의 0과 음의 0이 존재한다. 이들을 빅하면 true를 반환한다.

 

// 양의 0과 음의 0의 비교. 
// 일치비교와 동등비교 결과는 모두 true 반환한다
const a = 0 === -0; // true
console.log(a);
 
const b = 0 == -0; // true
console.log(b);

 

 

 

 

 

베타존 : 네이버쇼핑 스마트스토어