자바스크립트는 깊게 공부할수록 헷갈리는 부분이 많아진다. 특히 정말 주의깊게 공부하지 않으면 착각할 수도 있는 부분이 있는데, 그 중 하나를 오늘 블로깅해 보려고 한다.
== 와 === 의 차이도 처음 자바스크립트를 배우는 사람들에겐 헷갈릴만한 문제이다. 하지만 어느정도 배웠다면 이 정도의 개념은 충분히 이해하고 있다.
그렇다면 저 질문 바로 다음에 {} == {} 와 {} === {}의 값은 뭐냐고 묻는다면 헷갈릴 수도 있고, 명확히 안다면 자바스크립트를 정말 잘 이해하고 있다고 생각한다.
이 두개의 비교 연산자의 결정적인 차이는 엄격성의 정도라고 할 수 있다.
먼저 ==(동등 비교 연산자)는 값의 동등함을 비교하며, 암묵적 타입 변환(type coercion)을 통해 타입을 일치시킨 후 값을 비교한다.
// 타입은 다르지만 둘의 값은 같다.
10 == "10"; // true
0 == false; // true
그러면 ===(일치 비교 연산자)과는 무슨 차이일까? === 는 값과 타입을 모두 고려하여 비교하는 연산자이다.
// 타입은 다르지만 둘의 값은 같다.
10 == "10"; // false
0 == false; // false
== 는 타입을 고려하지 않고 값만 비교한다고 했다. 그러면 {} == {} 는 true일까?
정답부터 이야기하자면 false이다.
그 이유는 객체는 number, string 등과 같이 값을 그대로 저장하는 것이 아니라, 객체가 저장되어 있는 메모리 주소인 객체에 대한 참조값이 저장된다.
그렇기 때문에 객체를 비교할 때는 == 와 === 모두 다 false의 값이 나온다는 점을 꼭 유의해야 한다!
{} == {} // false
{} === {} /// false