[내보내번] JavaScript - JavaScript Double Equals vs. Triple Equals

GitHub에 있는 33 Concepts Every JavaScript Developer Should Know 라는 리포지토리의 내용 중 공부하고 싶은 아티클을 내가 정리할 겸 기억할 겸 작성하는 번역글이다. 33가지 중 다섯 번째인 == vs === vs typeof와 관련된 내용이다.

※ 내보내번(내가 보려고 내가 번역한): 영어 전공자도 해외 유학파도 아니기에 번역에는 의역, 오역, 구글 번역이 무수히 많을 수 있으며, 오타도 많을 수 있다. 정확한 내용은 원문을 직접 살펴보거나 다른 정보들을 더 찾아보는 것을 추천한다.
(하지만 댓글 피드백도 환영합니다😃 )

이번에 고른 아티클은 Brandon Morelli 님이 작성하신 JavaScript — Double Equals vs. Triple Equals 이다. 내용 중간중간 🤔이 아이콘은 본문에 나와 있지 않은 번역하며 추가한 말이다. 

Medium

---

문제

자바스크립트는 겉보기에는 비슷하기만 매우 다른 동등성을 테스트하는 2가지 방법이 있다. == 혹은 ===로 동등한 지를 비교할 수 있다. 이것들이 차이점이다. : 

===

자바스크립트에서 ===를 사용하면 엄격한 동등(일치)에 대해서 테스트하는 것이다. 이 의미는 비교하고 있는 타입(형)과 값 모두 같아야 한다는 것이다. 

엄격한 동등(일치)에 대한 몇 가지 예시를 살펴보자.

이 첫 번째 예시에서 숫자 5를 숫자 5와 비교한다. 예상한 바와 같이, true가 반환된다. 둘 다 숫자이고 같은 값 5를 갖고 있기 때문이다. 

5 === 5
// true

이 점을 염두에 두고, true를 반환하는 두 가지 예시를 더 살펴볼 것이다: 

'hello world' === 'hello world'
// true (Both Strings, equal values)

true === true
// true (Both Booleans, equal values)

 

멋지다. 이제 false를 반환하는 몇 가지 예시를 살펴볼 것이다:

이 예시에서 숫자 77과 문자열 77을 비교할 것이다. 이것은 우리의 피연산자가 같은 값을 갖고 있지만 다른 타입(형)을 갖는 것을 의미한다. 이것은 false를 반환할 것이다. 

77 === '77'
// false (Number v. String)

여기 추가로 2개의 예시가 더 있다: 

'cat' === 'dog'
// false (Both are Strings, but have different values)

false === 0
// false (Different type and different value)

멋지다! 다시 한번 언급하면, 일치 연산자(===)에 대한 주요점은 우리가 비교하는 타입(형)과 값 모두 일치해야 한다는 것이다. 

==

자바스크립트에서 ==를 사용하면 느슨한 동등성에 대해서 확인하는 것이다. ==는 강제 형 변환도 수행한다. 

강제 형 변환의 의미는 두 값을 공통 유형으로의 변환을 시도한 후에만 값을 비교하는 것이다. 

예시가 이 점을 설명해줄 것이다. 아래의 예시에 대해 앞에서 엄격한 동등으로 비교했을 때를 떠올려보라:

77 === '77'
// false (Number v. String)

77은 '77'과 다른 타입이기 때문에 완전히 동등하지는 않다. 하지만 이 값들을 느슨한 동등성으로 비교해보면...

77 == '77'
// true

true임을 알 수 있다. 이것은 강제 형 변환 때문이다. 자바스크립트는 실제로 우리의 값들을 비슷한 유형으로 변환하려고 시도한다. 이 경우에 그 시도는 성공했다. 문자열 '77'은 쉽게 숫자 77로 변환되었다. 77은 77과 같기 때문에 true가 나온 것이다.

예시를 하나 더 살펴보자.

 앞에서 false와 0이 같은지 엄격한 동등으로 비교한 것을 떠올려보자:

false === 0
// false (Different type and different value)

 

이것은 명백히 false이다. 하지만 같은 식을 느슨한 동등성 비교로 돌려보면...

false == 0
// true

true를 받았다? 왜 그럴까? 이것은 자바스크립트의 falsy 값(🤔: Boolean 컨텍스트에서 false로 평가되는 값)과 관련 있다. 다음 부분에서 이 개념과 관련해서 알아볼 것이다. 

Falsy(거짓 같은) 값

좋다, 왜 자바스크립트에서 false == 0 인가? 복잡하다. 하지만 자바스크립트에서 0은 falsy 값이기 때문이다. 

강제 형 변환은 실제로 0을 boolean false로 변환하고, false와 false는 동일해진다. 

자바스크립트에서 주의해야 할 6가지 fasly 값이 있다: 

• false - boolean false
• 0 - 숫자 zero
• "" - 빈 문자열
• null
• undefined
• NaN - Not A Number 숫자가 아님

Falsy(거짓 같은) 값 비교

아래의 내용을 falsy 값의 규칙이라고 봐도 된다. 이 규칙들은 자바스크립트를 자주 사용할 것이라면 결국은 암기해야 하는 것들이다. 

1. false, 0, 그리고 ""
앞에 세 가지 falsy 값 중 어느 것이든 느슨한 동등을 사용하여 비교하면 항상 같을 것이다. 그 이유는 이 값들이 모두 boolean 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끼리 비교해도 같지 않다. 

NaN == null
// false

NaN == undefined
// false

NaN == NaN
// false

 주요점

• 살펴본 것과 같이, 강제 형 변환은 자바스크립트에서 좀 제정신이 아닐 수 있다. 자바스크립트에 매우 친숙한 경우를 제외하고 느슨한 동등(==)은 그 가치보다 더 많은 골칫거리로 이어질 수 있다. 
  여섯 가지 falsy 값과 그들과 관련된 규칙들을 기억하면 느슨한 동등을 이해하는데 도움이 될 것이다. 
• === 연산자는 ==보다 더 뛰어나다. 가능한 한 언제나 동일한지를 비교할 때 ===를 사용하는 것이 좋다. 타입(형)과 값 모두 비교함으로 항상 진짜 일치하는지에 대한 테스트를 실행할 수 있다.