[JavaScript] '=='와 '==='의 차이

'=='와 '==='의 차이점에 대해서 알아보자.

• '==' 연산자는 서로 다른 유형의 두 변수의 값을 비교할 수 있다.
• '===' 연산자는 값과 자료형이 동시에 참이어야 참을 출력한다. 즉, '=='에 비해 엄격한 비교를 한다.
• 웬만하면 '==='를 사용하자! ('=='는 특히 거대한 프로그램에서 버그를 발생시키기 쉬움.) 

 

---

몇 가지 예제를 살펴보자.

 

1 == "1"
true​

​자료형이 다르지만 '==' 연산자는 서로 다른 유형의 두 변수의 값을 비교할 수 있으므로 변환을 거친 후 값이 같아졌으므로 true를 출력한다. 

 

false == "0"
true

false가 0으로, "0"이 0으로 변환된 뒤에 비교를 하여 true를 출력한다.

 

"" == []
true

빈 문자열은 false, 비어있는 배열 []는 false로 변환된 뒤에 비교를 하여 true를 출력한다.

 

0 == []
true

0은 false, 비어있는 배열 []는 false로 변환된 뒤에 비교를 하여 true를 출력한다.

 

---

이번에는 헷갈리는 내용을 한번 살펴보자.

 

이미지를 보면 삼단논법에 의한 논리가 맞지 않는다. 이는 왜 그런 것일까?

 

https://262.ecma-international.org/5.1/#sec-9.1

ECMAScript Language Specification - ECMA-262 Edition 5.1

11.9.3 - 9번을 보면 다음과 같이 나와 있다.

If Type(x) is Object and Type(y) is either String or Number,
return the result of the comparison ToPrimitive(x) == y.

 

x가 Object, y가 String 또는 Number라면 x에 대해 ToPrimitive를 하겠다는 의미이다.

즉, [] == "0" 이었던 것이 [].toString == "0" 으로 바뀌어 연산이 진행되는 것이다.

결국에 ' ' == "0" 와 같고 이의 결과값은 false가 나온다.

 

---

 

다음의 사이트에서 둘의 차이를 잘 정리해놓았으므로 참고해보자.

https://dorey.github.io/JavaScript-Equality-Table/

JS Comparison Table