자바스크립트에는 눈으로 보기엔 비슷하지만 매우 다른 동등 비교 연산자 == 와 === 이 있다. 지금 부터 두 동등 비교 연산자의 차이를 살펴보자.

=== 동등 비교연산자

엄격한 동등성 비교. 즉 타입과 값이 둘다 같아야 한다는 뜻이다.

5 === 5
// true

위의 예제에서 보면 숫자 5는 number타입이며 5라는 값을 가지고 있다.

두개의 예를 더 살펴 보자.

'hello world' === 'hello world'
// 둘다 string타입 이고 같은 hello world 값을 가진다.

true === true
// 둘다 boolean타입 이고 같은 true 값을 가진다.

이제는 false 를 반환하는 예를 살펴보자.

88 === '88'
// false (number vs string)

'cat' === 'dog'
// false (string:cat vs string:dog 타입은 같지만 값이 다르다.)

===

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

== 동등 비교연산자

느슨한 동등 비교. 강제 형변환을 수행한다.

강제 형변환?
동등 연산자로 비교하기 전에 피연산자들을 공통 타입으로 만드는 행위이다.

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

77 == "77"
// true

=== 와 ==를 똑같은 예제로 비교 했을때 == 비교 연산자는 true를 반환해준다. 이러한 현상이 일어난 이유는 강제 형변환 때문인데. 자바스크립트가 동등한 타입으로 변환한 후에 값을 비교 하기 때문이다. 문자열 값 77은 숫자 77로 변화될 수있다. 77 와 77 은 같기 때문이다.

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

false == 0
// true

Falsy값과 True값의 형변환에 대한 설명

Falsy 값

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

자바스크립트는 숫자 0을 강제로 false로 변환시킨다. 그리고 false로 변환된 0 은 결국 false와 같다.

falsy한 값

• false
• 0
• ""
• null
• undefined
• NaN

Falsy 값의 비교

false, 0, "" 을 기억해라 !
아래의 3가지 falsy값을 느슨한 동등 연산자로 비교할 때, falsy 값은 항상 동일하다는 결과를 나타냈다. 그 이유는 falsy값은 false 형태로 강제 형변환이 됐기 때문이다.

1. false == 0
// true

2. 0 == ""
// true

3. "" == flase
// true

null , undefined

null, undefined 를 비교할 때, 서로 같으면 자기 자신과도 같다.

null == null
// ture

undefined == undefined
// true

null == undefined
//true

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

NaN

어떤 값과도 동일하지 않다. 자기자신과도 동일하지 않다.

NaN == null
// false

NaN == undefined
// false

NaN == NaN
// false

요약

=== 연산자는 타입과 값이 모두 같아야 하기 때문에 정확한 동등함을 비교하려 할때 사용하면 좋다.

---

참고

• original source of this posting from https://codeburst.io/javascript-double-equals-vs-triple-equals-61d4ce5a121a
• 해당 포스팅은 개인적으로 공부하고 정리하기위해 자바스크립트 개발자라면 알아야할 33개념을 번역한 https://velog.io/@jakeseo_me 님의 자료를 참고 한것입니다.