자바스크립트의 연산자 ==와 ===의 차이를 알아보겠습니다. 이 글은 MDN과 You don't know JS 책을 토대로 작성되었습니다.

const studentName1 = "mike"
const studentName2 = `${studentName1}`

studentName1 == studentName2 // true
studentName1 === studentName2 // true

비교하려는 데이터끼리 타입이 같다면, ==와 === 이 둘이 하는 역할은 정확히 똑같다. 값이 다르면 false를, 값이 같다면 true를 반환하는 것.

그러나 비교하려는 데이터끼리 타입이 다르다면?

==는 타입 변환을 한다(loose) ===는 타입 변환을 하지 않는다(strict).

==에 대해서 얘기하기 전에, 자바스크립트가 타입 변환을 해야 하는 이유에 대해 먼저 살펴봐야 한다.

Dynamic typing

자바스크립트는 타입이 느슨하고 역동적인 언어이다. 자바스크립트의 변수들은 어느 특정한 타입으로 고정되어있지 않고, 모든 변수들은 모든 타입의 값들을 할당, 재할당 받을 수 있다.

let foo = 42;    // foo is now a number
foo = 'bar'; // foo is now a string
foo = true;  // foo is now a boolean

==

if type of x is number and type of y is string, return the result of the comparison x == Number(y)

const x = 100
const y = "100"

x == y // x === Number(y)와 같다.
// true

1. 비교할 데이터끼리의 타입이 같을 때는 ===와 정확히 같은 역할을 한다.
2. if null or undefined : true를 반환한다.

null == undefined // true

3. if non-primitives : primitive 타입으로 변환한다.
4. 그외 : Number 타입으로 변환한다.

데이터들의 타입을 확실하게 알아야 한다.

데이터의 타입을 아는 것은 타입을 모르는 것보다 언제나 좋다. 데이터들의 타입을 알지 못하는 것은, 전체적인 코드를 이해하고 있지 않은 것이다. 비교할 데이터들의 타입을 모른다면, ==를 써선 안 된다!

==를 써야 할 때

오직 타입들을 알 때, 그리고 타입 변환이 필요할 때에만 ==가 필요하다.

==이 ===보다 빠르다.

===가 ==와 언제나 역할이 같은데도 ===를 쓰고 있다면, 넌 잘못된 의미를 전달하고 있는 것이다 : "Protecting myself because I don't know/trust the types."

making types known and obvious leads to better code. if types are known, == is best.