ES5 .Intro(5) - '== vs ==='

===

'===' :  엄격한 동등성을 비교, 즉 타입과 값 모두 체크 

 

몇가지 예제를 통해서 알아보자. 

 

1) 숫자 10 두개를 비교 -> Number 타입, 10이라는 값을 가지고 있음

예상대로 true 가 반환된다. 

 

2) 문자 'hello' 두개를 비교 -> String 타입, 'hello' 라는 값을 가지고 있음 

예상대로 true 가 반환된다.

 

3) 숫자 10과 문자열 '10'을 비교

-> 숫자 10은 Number 타입, 10 이라는 값을 가지고 있음

-> 문자열 '10'은 String 타입, 10 이라는 값을 가지고 있음 

타입과 값을 비교하는 '===' 비교 연산자는 false를 반환한다. 

 

'===' -> 타입과 값 모두 비교할 때 사용, 모두 같아야만 true를 반환한다. 

---

==

'==' : 조금은 느슨한 동등 비교를 위한 연산자, 동등 연산자로 비교하기 전, 피연산자들을 공통 타입으로 만드는 강제 형변환을 수행

 

몇가지 예제를 통해 알아보자 

 

1) 숫자 10과 문자열 '10'을 비교

-> 숫자 10은 Number 타입, 10 이라는 값을 가지고 있음

-> 문자열 '10'은 String 타입, 10 이라는 값을 가지고 있음 

'==' 동등 연산자를 사용하면, JavaScript는 동등 연산자로 비교하기 전, 피연사자들을 공통 타입으로 변환 후 비교한다. 

 

위 코드는 문자열 값 '10'이 숫자 10으로 변화됨으로써 true라는 값을 얻게 된다.

 

2) false와 숫자 0을 비교 

-> false는 Boolean 타입, false라는 값을 가지고 있음

-> 숫자 0은 Number 타입, 0 이라는 값을 가지고 있음

이 둘을 비교 했을 때 true 라는 반환 값을 얻는다. 그 이유는 falsy 값들과 관련이 있는 데 falsy를 간략하게 설명하면 다음과 같다. 

---

1) Falsy는 6가지 값을 가진다. 

- false

- 0

- ""

- null

- undefined

- NaN

 

2) Falsy 값을 비교할때 3가지 규칙 

 

(1) false, 0, ""

false, 0, "" 를 "==" 느슨한 동등 연산자로 비교할때, falsy 값은 항상 동일하다는 결과를 나타 낸다. 그 이유는 false 형태로 모두 강제 형변환이 되기 때문이다. 

 

(2) null, undefined 

null, undefined  를 "==" 느슨한 동등 연산자로 비교할때, 그들은 서로 같으며 자기 자신과도 같다. 

 

(3) NaN

NaN을 "==" 느슨한 동등 연산자로 비교할때, 어떠한 값과도 동일하지 않다. 

---

=== 연산자는 == 연산자보다 확실하게 비교를 할 수 있는 기능을 선사한다. 동등함을 비교할 때는 === 연산자를 쓰는 편이 훨씬 좋다. 

다음은 스코프(scope)에 대한 기록이다. 

 

< 참고자료 >

https://github.com/leonardomso/33-js-concepts

 

<ES5 series> chapter 5, '== vs ===' end

---