자바스크립트 동등 비교 연산의 함정

김정원·2021년 5월 16일
0

탐구하기

목록 보기
1/1
post-thumbnail

다음 두 연산의 결과를 어떻게 예측해 볼 수 있나?

[] == true
null == 0

이미 알고있는 사람들도 있고, 예측이 모두 틀린 사람도 있을것이다. 결론부터 말하자면 둘 다 false가 나온다. 우리는 동등 비교연산==을 하게되면 양쪽의 피연산자의 값을 형변환을 이용한 뒤 일치연산을 하는 것으로 알고있다. 그렇다면 일반적으로 아래와 같은 방식으로 비교할 것이라고 기대한다.

[] == true // []를 boolean으로 형변환 한다
true == true // true를 반환한다

null == 0 // null을 0으로 형변환 한다
0 == 0 // true를 반환한다

그런데 왜 둘 다 false가 나오는 것일까? 정답은 자바스크립트는 동등 비교 연산시에 ECMAScript에서 지정한 동등 비교 연산 알고리즘을 통해 형변환을 진행하기 때문이다. 그 중에는 다음과 같은 내용이 있다.

  1. If Type(x) is Boolean, return the result of the comparison ToNumber(x) == y.
  2. If Type(y) is Boolean, return the result of the comparison x == ToNumber(y).

그렇다. 양쪽의 피연산자 중 하나가 boolean일 경우 number로 형변환을 한 뒤 비교한다는 내용이다. 왜 동등 비교연산에서 이런 짓을 하는지는 브렌던 아이크씨가 알겠지만, 일단은 동등 비교연산에서는 위의 알고리즘을 따른다는 것이다. 그럼 다시 [] == true가 어떻게 작동하는지 생각 해 보자

[] == true // boolean인 true를 number로 형변환 한다
[] == 1 // true를 number로 바꾸면 1이다. 이제 빈 배열을 number로 형변환 한다
0 == 1 // 빈 배열을 number로 바꾸면 0이 나온다 (1이 아니다) 결국 0과 1을 비교하게 되어서 false가 출력된다.

이런 과정을 거쳐 false가 출력되는 것이었다. 왜 이따위로 만들었는지는 정말 모르겠다.

그럼, null == 0이 안되는 이유는? 역시 동등 비교 연산 알고리즘에 답이 있다. 해당 문서에 nullundefined에 대한 정의는 아래의 두개 뿐이다.

  1. If x is null and y is undefined, return true.
  2. If x is undefined and y is null, return true.

nullundifined는 서로 비교했을 때 true를 반환하고 다른 연산시에는 형변환을 하지 않는다. 그렇기 때문에 null == 0을 했을 때 null은 아예 형변환을 하지 않게되고 그대로 비교하게 되기 때문에 false를 반환하게 된다.

보통 자바스크립트를 학습하면 동등 비교연산== 보다는 일치 비교연산===을 사용하라고 배우게 된다. 그리고 사실 ===만 사용하게 되면 위의 문제로 고민할 필요도 없다. 그럼에도 개발자로서 왜? 라는 질문을 해보는 것이 중요하다. 위 사실을 알게 되었든 아니든 ===만을 사용하면 된다. 그럼에도 나는 이 탐구를 통해 다음과 같은 상황에 대한 처리방법을 생각 할 수 있었다.

만약 어떤 값에 대하여 null이 들어올지 undefined가 들어올지 확실하지 않은 상황에서,
if (value == null) {}과 같은 방법으로 nullish한 값에 대한 처리가 가능해 진다.

아무튼, 탐구하는 자세를 잃지 않도록 노력하자!

profile
영원히 공부중

2개의 댓글

comment-user-thumbnail
2021년 6월 17일

블로깅이 뜸하시네요 ^^

1개의 답글