== vs ===

비교 연산자(comparison operator)는 좌항과 우항의 피연산자를 비교한 다음 그 결과를 boolean 값으로 반환한다.

==동등비교(loose equality)와 ===일치비교(strict equality) 연산자는 비교하는 엄경성의 정도가 다르다.

비교 연산자	의미	사례	설명
==	동등 비교	x == y	x와 y의 값이 같음
===	일치 비교	x === y	x와 y의 값과 타입이 같음
!=	부동등 비교	x != y	x와 y의 값이 다름
!==	불일치 비교	x !== y	x와 y의 값과 타입이 다름

자바스크립트는 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 하는데 동등 비교(==) 연산자는 좌항과 우항의 피연산자를 비교할 떄 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다.

5 == "5" // 암묵적 타입 변환을 통해 일치시키면 동등하므로 true 출력 

'' == '0'           // false
0 == ''             // true
0 == '0'            // true

false == 'false'    // false
false == '0'        // true

false == undefined  // false
false == null       // false
null == undefined   // true

' \t\r\n ' == 0     // true

→ 이처럼 동등 비교 연산자는 예측하기 어려운 결과를 만들어낸다.

일치비교 연산자는 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한하여 true를 반환한다. (암묵적 타입 변환 X)

5 === "5" // false

일치 비교에서 주의할 것은 NaN과 0이다

NaN === NaN // false
0 === -0 // true 
0 == -0 // true

NaN은 자신과 일치하지 않는 유일한 값이다. 따라서 숫자가 NaN인지 조사하려면 Number.isNaN을 사용한다.

자바스크립트에는 양의 0과 음의 0이 있는데 이들을 비교하면 true를 반환한다.

• [Object.is](http://Object.is) : ES6에서 도입된 Object.is 연산자는 예측가능한 정확한 비교 결과를 반환한다.

  Object.is(-0, +0) // false
  Object.is(NaN, NaN) // true

단 객체/배열의 경우는 참조타입이기 떄문에 두 연산자 모두 동일하게 동작한다.

var a = {}
var b = {}

a == b // false
a === b // false

var c = [];
var d = [];

c == d // false
c === d // false

문자열의 경우 좀 특별한데 자바스크립트에서 문자열은 원시타입이지만 객체로도 만들 수 있기 때문에 그 동등 비교가 다르다.

var a = "string"
var b = new String("string") 
a == b //true
a === b // false

일치 비교와 동등 비교 중 안전한 타입 체크와 더 좋은 코드를 위해 엄격한 동등 비교 연산자를 사용하는 것이 바람직하다.

---

• https://github.com/baeharam/Must-Know-About-Frontend
• 📔 이웅모, 모던 자바스크립트 Deep Dive