JavaScript 동치연산자 ==와 ===의 차이점

이번에 입사를 하게 되면서 CoffeeScript를 사용하게 되었다. 그래서 CoffeeScript에 대해서 개인적으로 공부를 했는데, 그러다 알게 된 사실이 CoffeeScript가 JavaScript로 컴파일 되면서 ==가 ===으로 바뀐다는 것이다.

그 전까지는 먼저 배웠었던 다른 언어(C나 Java)의 영향으로 쭉 ==만 사용해왔었기에 이 사실이 영 꺼림칙했었는데, 게으른 죄로 오늘에서야 그 이유를 찾아봤다.

Equality

==와 !=는 Equality 연산자이다. Equality라고 해봤자 사실 영어로는 그 뉘앙스가 제대로 와닿지 않는다. 중요한 점은 JavaScript에서 ==를 사용하면 연산이 되기 전에 피연산자들을 먼저 비교할 수 있는 형태로 변환시킨다는 것이다.

따라서 ==를 사용하면 다음과 같은 사실이 성립한다.

1
2
3
4
5
6
7

254 == '254'                // return true
true == 1                   // return true
undefined == null           // return true
'abc' == new String('abc')  // return true
null == false               // return false
'true' == true              // return false
true == 2                   // return false

개인적으로 5-7번째 줄은 true가 될 수도 있을 것 같아 시도해봤는데 false를 리턴했다.

Identity

===와 !==는 Identity 연산자이다. 이 녀석은 ==와는 반대로 형변환을 하지 않고 연산한다.

1
2
3
4

254 === '254'               // return false
true === 1                  // return false
undefined === null          // return false
'abc' === new String('abc') // return false

그럼 CoffeeScript가 is를 ===로 변환하는 이유는 뭐지?

그 이유는 여기에 잘 나와있다. 비루한 영어 실력으로 번역해보자면,

== 연산자는 작업자가 원치 않는 강제 형변환을 실행하고 그것이 다른 언어의 ==연산자와는 차이가 있는 동작이므로 ==를 ===로 컴파일한다는 것이다.

아무래도 명시적인 형변환을 자주 사용해야 할 것 같다.

참고링크

• Does it matter which equals operator (== vs ===) I use in JavaScript comparisons? - StackOverflow
• JavaScript tutorial:Comparison Operators
• CoffeeScript - Operators and Aliases
• JavaScript Equality Table