== vs ===

자바스크립트에는 눈으로 보기엔 비슷하지만 사실은 매우 다른 동등 비교연산자 두 개가 있다. 자바스크립트 사용자라면 누구나 ==과 ===을 이용해 어떤 값이 동일한지 비교할 수 있다.

=== (=표시 3개의 동등 비교연산자)

자바스크립트에서 === 연산을 사용하면 엄격한 동등성을 비교하는 것이다.
엄격한 동등성의 의미는 타입과 값이 둘 다 같아야 한다는 이야기이다.

엄격한 동등성에 대한 몇 가지 코드 예제를 살펴보자.

첫 번째 예제에서 숫자 5 두개를 비교해보자. 숫자 5 두개를 비교하면 true가 반환된다. 둘 다 숫자(numbers) 타입이며 5라는 같은 값을 갖고 있기 때문이다.

5 === 5
// true

다음 두 예제도 true를 반환하는 예제이다.

'hello world' === 'hello world'
// true (둘 다 string이고 같은 값을 가짐)

true === true
// true (둘 다 boolean이고 같은 값을 가짐)

이번에는 false를 반환하는 몇 가지 예제를 살펴보자.

숫자 77과 77이라는 값을 가진 문자열을 비교할 것이다.
두 개의 피연산자는 값은 값을 가지지만 다른 타입을 갖고 있다.

77 === '77'
// flase (숫자 타입 vs 문자열 타입)

두 개의 추가 예제를 더 살펴보자.

'cat' === 'dog'
// flase (둘 다 문자열 타입. 하지만 다른 값을 가짐)

false === 0
// false (다른 타입, 다른 값)

===는 타입과 값이 모두 같아야만 true를 반환한다.

== (=표시 2개의 동등 비교연산자)

자바스크립트에서 ==연산자를 쓰는 목적은 느슨한 동등 비교를 위함이다.
==연산자도 강제 형변환(type coercion)을 수행한다.

강제 형변환(type coercion)이란 동등 연산자로 비교하기 전에 피연산자들을 공통 타입(common type)으로 만드는 행위를 말한다.

강제 형변환에 대한 내용은 #4 강제 형변환에 있다.

다음 예제가 이러한 현상을 설명할 것이다.

77 === '77'
// false (Number vs String)

77은 '77'과 엄격하게 보면 같지 않다. 둘의 값은 같아도 다른 타입을 가졌기 때문이다. 하지만, 느슨한 동등비교로 테스트하게 된다면 어떤 결과가 나올까?

77 == '77'
// true

true값을 얻었다. 이러한 현상이 일어난 이유는 강제 형변환 때문이다. 자바스크립트가 값을 동등한 타입으로 변환 후에 값을 비교하기 때문이다.

예제를 하나 더 살펴보자.

false === 0
// false (다른 타입, 다른 값)

위 코드는 누가 봐도 결과가 false일 것이다. 하지만, 느슨한 동등연산자에서 다시 비교하면 어떤 결과가 나올까?

false == 0
// true

true를 얻는다. 이러한 현상은 자바스크립트의 falsy값들과 관련이 있다.

Falsy값과 True값의 형변환에 대해서는 #4 Falsy, Trusy 파트에 있다.

Falsy값

그래서 왜 자바스크립트에서는 false == 0이 성립하는 걸까? 그 이유는 자바스크립트에서 0이란 값이 falsy 값이기 때문이다.

자바스크립트는 숫자 0을 강제로 false로 변환시켜버린다. 그리고 false로 변환된 0은 결국 false와 같아지는 것이다.

아래의 6가지 값은 자바스크립트에서 falsy 값으로 통용된다.

1. false
2. 0
3. ""
4. null
5. undefined
6. NaN

Falsy 값의 비교

아래의 예제들을 통해 falsy 값의 간단한 규칙을 알아보자. 자바스크립트로 자주 작업을 한다면 다음과 같은 내용들은 항상 기억하고 있어야 좋다.

1️⃣ false, 0 그리고 ""
아래의 3가지 falsy 값을 느슨한 동등 연산자로 비교할 때, falsy 값은 항상 동일하다는 결과를 나타냈다. 이게 가능했던 이유는 앞의 3가지 falsy 값은 false 형태로 강제 형변환이 되었기 때문이다.

    false == 0; 
    // true

    0 == "" 
    // true

    "" == false
    // true

2️⃣ null 그리고 undefined
null과 undefined를 비교할 때, 그들은 서로 같으며 자기 자신과도 같다.

    null == null
    // true

    undefined == undefined
    // true

    null == undefined
    // true

만일 null을 다른 값과 비교하고 싶다면, false가 나올 확률이 높다.

3️⃣ NaN
마지막으로, NaN은 어떠한 값과도 동일하지 않다는 것을 알아야한다.
심지어 자기 자신과도 동일하지 않다.

    NaN == null
    // false

    NaN == undefined
    // false

    NaN == NaN
    // false

총 정리

자바스크립트에서 강제 형변환(type coercion)은 어디로 튈지 모른다. 만약 자바스크립트와 친숙하지 않다면 느슨한 동등 연산자(==)는 엄청난 두통을 선사할 수 있다.
6가지 falsy 값을 암기해 두고, 이에 관한 다양한 규칙들을 기억해놓자. 암기한다면 느슨한 동등 연산자를 이해하는데 큰 도움이 될 것이다.

• === 연산자는 == 연산자보다 좋다.
• 동등함을 비교해야 할 때는 === 연산자를 쓰는 편이 훨씬 좋을 것이다.
  타입과 값을 비교함으로써 피연산자들이 진정으로 동등한지를 비교한다고 확인할 수 있기 때문이다.

---

• 자바스크립트 개발자라면 알아야 할 33가지 개념 #5 == vs ===
• 번역