다음 두 연산의 결과를 어떻게 예측해 볼 수 있나?
[] == true
null == 0
이미 알고있는 사람들도 있고, 예측이 모두 틀린 사람도 있을것이다. 결론부터 말하자면 둘 다 false
가 나온다. 우리는 동등 비교연산==
을 하게되면 양쪽의 피연산자의 값을 형변환을 이용한 뒤 일치연산을 하는 것으로 알고있다. 그렇다면 일반적으로 아래와 같은 방식으로 비교할 것이라고 기대한다.
[] == true // []를 boolean으로 형변환 한다
true == true // true를 반환한다
null == 0 // null을 0으로 형변환 한다
0 == 0 // true를 반환한다
그런데 왜 둘 다 false
가 나오는 것일까? 정답은 자바스크립트는 동등 비교 연산시에 ECMAScript에서 지정한 동등 비교 연산 알고리즘을 통해 형변환을 진행하기 때문이다. 그 중에는 다음과 같은 내용이 있다.
그렇다. 양쪽의 피연산자 중 하나가 boolean일 경우 number로 형변환을 한 뒤 비교한다는 내용이다. 왜 동등 비교연산에서 이런 짓을 하는지는 브렌던 아이크씨가 알겠지만, 일단은 동등 비교연산에서는 위의 알고리즘을 따른다는 것이다. 그럼 다시 [] == true
가 어떻게 작동하는지 생각 해 보자
[] == true // boolean인 true를 number로 형변환 한다
[] == 1 // true를 number로 바꾸면 1이다. 이제 빈 배열을 number로 형변환 한다
0 == 1 // 빈 배열을 number로 바꾸면 0이 나온다 (1이 아니다) 결국 0과 1을 비교하게 되어서 false가 출력된다.
이런 과정을 거쳐 false
가 출력되는 것이었다. 왜 이따위로 만들었는지는 정말 모르겠다.
그럼, null == 0
이 안되는 이유는? 역시 동등 비교 연산 알고리즘에 답이 있다. 해당 문서에 null
과 undefined
에 대한 정의는 아래의 두개 뿐이다.
즉 null
과 undifined
는 서로 비교했을 때 true
를 반환하고 다른 연산시에는 형변환을 하지 않는다. 그렇기 때문에 null == 0
을 했을 때 null
은 아예 형변환을 하지 않게되고 그대로 비교하게 되기 때문에 false
를 반환하게 된다.
보통 자바스크립트를 학습하면 동등 비교연산==
보다는 일치 비교연산===
을 사용하라고 배우게 된다. 그리고 사실 ===
만 사용하게 되면 위의 문제로 고민할 필요도 없다. 그럼에도 개발자로서 왜? 라는 질문을 해보는 것이 중요하다. 위 사실을 알게 되었든 아니든 ===
만을 사용하면 된다. 그럼에도 나는 이 탐구를 통해 다음과 같은 상황에 대한 처리방법을 생각 할 수 있었다.
만약 어떤 값에 대하여
null
이 들어올지undefined
가 들어올지 확실하지 않은 상황에서,
if (value == null) {}
과 같은 방법으로nullish
한 값에 대한 처리가 가능해 진다.
아무튼, 탐구하는 자세를 잃지 않도록 노력하자!
블로깅이 뜸하시네요 ^^