#33 가지 Javascript 필수 개념 - 5. Equals

본 내용은 아래의 링크를 참조하여 작성되었습니다.

(https://github.com/leonardomso/33-js-concepts#5--vs--vs-typeof)

 

 

* 동치 관계 파악

대부분의 프로그래밍 언어에서 두 개의 변수 혹은 값이 동일한 대상인지 아닌지 판별하기 위해서

== (Double Equals) 를 사용하는 동일 연산자를 제공하는데,

 

JS 의 경우 특이하게 2가지 동일 연산자를 제공한다.

 

== (Double Equals) 와 === (Triple Equals) 가 바로 그것이다.

 

둘은 구체적으로 어떻게 다른지 알아본다.

 

 

* Double Equals (==)

먼저 Double Equals 는 두 대상의 Value 만 비교하는 연산자 이다.

 

예를 들면

위와 같이 비교를 했을 때 결과가 전부 true 로 리턴되었는데,

첫번째 123 == '123' 의 경우,

123 은 값의 Type 이 Number 이며, '123' 은 String 이다.

두번째 false == 0 의 경우,

false 는 Boolean Type 이며, 0 은 Number Type 이다.

 

서로가 Type 이 다름에도, 같은 값으로 인식되어 처리됬는데,

 

그 이유는 Double Equals 를 수행할 때, JS 내부에서 Type Coercion(형 변환) 을 수행하기 때문이다.

(형 변환에 대한 자세한 내용은 아래 주소를 보기 바람)

https://sdy-study.tistory.com/36?category=950467

 

첫번째 케이스에선 '123' 이 숫자 타입인 Number 로 변환되고

두번째 케이스에선 0 이 Boolean 타입으로 바뀌어서 처리 됬기 때문이다.

 

근데 왜 0 이 Boolean 타입 중 true 가 아닌 false 로 바뀌었을까

 

 

* Falsy Value

Falsy Value (거짓 같은 값) 은 MDN 문서에 따르면

"A falsy (sometimes written falsey) value is a value that is considered false when encountered in a Boolean context."

이라고 정의가 되어 있다.

(https://developer.mozilla.org/en-US/docs/Glossary/Falsy)

 

false 처럼 취급 되는 값이란 의미이다.

 

JS 에는 이런 Falsy Value 가 6가지가 존재한다.

 

1. false

2. 0

3. ""

4. null

5. undefined

6. NaN

 

그렇다면 이 여섯개 모두 false 로 취급되서 동일한 값으로 취급 받냐

그건 또 아니다

 

 

?

 

 

* Falsy Value Comparison

거짓 같은 값이라 했지만, JS 내부적으로 이 여섯을 전부 같은 값으로 취급하지는 않는다.

 

1. false, 0, ""

이 세개의 falsy value 는 서로 Double Equals 로 비교하면 항상 true 를 리턴한다.

 

 

2. null, undefined

이 두개의 falsy value 는 서로 Double Equals 로 비교하면 항상 true 를 리턴한다.

3. NaN

NaN 은 그 어떤 것과 비교해도 false 를 리턴하고, 자기자신과 비교해도 false 를 리턴한다.

 

 

정확히 왜 이 세개의 그룹으로 나뉘는지는 모르겠으나,

 

중요한 것은 falsy value 에 의해서 0이 false 로 형변환이 되서 0 == false 를 수행할때, true 를 리턴한다는 것이다.

 

다른 프로그래밍 언어에서도 0은 일반적으로 false 처럼 취급되고,

0 이외의 수들은 true 로 취급된다.

 

 

* Triple Equals

=== (Triple Equals) 는 위의 Double Equals 와는 다르게 

비교 대상의 Type 과 Value 도 비교를 한다.

 

Type, Value 둘 중 하나라도 다르면 false 로 취급된다.

 

예를 들면,

 

 

123 === '123' 의 경우

좌측은 Type 이 Number 이고 Value 가 123 이지만,

우측은 Type 이 String, Value 가 123 이기 때문에, Type 이 달라서 false 가 됬다.

 

0 === false, undefined === null, "" === 0, "" === false 도 마찬가지로 Type 이 달라서 false 의 결과를 리턴했다.

 

'77' === '88', 123 === 456, true === false 의 경우 Type 은 서로 같지만 value 가 다르기 때문에 false 로 취급되었다.

 

이처럼 === (Triple Equals) 는 비교 대상의 Type 도 같아야 하고 Value 도 같아야 한다.

 

 

 

 

개인적으로 JS 를 통해서 개발할때, 

== 는 거의 쓴 적이 없는 것 같다.

습관적으로 === 만 주로 쓰다보니 == 와 === 의 차이점에 대해서 

크게 신경 쓰지 않았는데, 

개념 공부한다 생각하고 가볍게 넘어갈 수 있었던 코너였다.