자바스크립트 동등 연산자, 일치 연산자 그리고 데이터 성질의 이해

1. 개요

공격자는 생각하지도 못한 방법으로 연산을 수행하여 결과를 도출한다. 한 기술을 정리하는 과정에 ![] 연산의 불린값이 생성되는 과정에 의문을 품게 되었다. 브라우저 개발자 도구를 통해 몇가지 테스트해보았다.

[ ] 불린 테스트

그러면 흔히 반대를 의미하는 ! 기호를 쓰면 결과가 달라진다. 예를 들면 true인 경우 false를 출력하고, false 인 경우 true를 출력한다. 이러한 연산을 자바스크립트 내부에서는 == false 를 연산한다. 그러면 ![]는 true가 출력되어야 한다. 하지만 실제 테스트하면 어떠할까?

그림 2. ![ ] 불린 테스트

결과는 의외의 결과로 false가 출력된다. 왜 그럴까?

2. 동등 연산자와 일치 연산자

동등 연산자는 느슨한 비교 연산자(Loose Equality Operators) 또는 더블 이퀄 연산자(Double Equals Operator)로 불리며 사용하는 방법은 == 연산자를 사용한다. 자바스크립트에서 동등 연산자는 자동 형변환을 제공한다. 다음 그림을 보면 동등 연산자가 자동 형변환을 사용하는 것을 알 수 있다.

그림 3. 동등 연산자를 통해 자동 형변환 테스트

이러한 이유로 "자동 형변환에 의해 []의 형태가 변환되고, 이로 인해 ![]이 false가 출력되지 않을까?" 가정을 세워보았다. 하지만 자동 형 변환되는 0과 ""는 false 값을 가지기에 !0과 !""는 true을 출력한다.

그림 4. 0과 ""의 반대 불린 연산 수행 결과

[] 오브젝트에는 다른 형변환이 있지 않을까? 다음 그림을 보면 다른 형변환 요소는 존재하지 않는 것을 볼 수 있다.

그림 5. 동등 연산 테이블

실험에 의미는 없지만, 동등 연산자와 다른 개념이 일치 연산자이다. 일치 연산자는 엄격한 비교 연산(Strict Equality Operators) 또는 트리플 이퀄 연산자(Triple Equals Operator)로 불리며, 동등 연산자와 달리 자동 형변환 기능을 사용하지 않고 비교 연산을 수행한다.

그림 6. 일치 연산 테스트

일치 연산 테이블은 다음과 같다.

그림 7. 일치 연산 테이블

3. 조건 연산을 통한 데이터 성질 이해

본론으로 돌아와서 왜 ![]이 false를 출력하는지 그 이유를 찾아야 한다. 그 이유를 조건문 사용에서 찾을 수 있었다. []는 false이기 때문에 if([ ]){ source code }; 형태로 사용하게 되면 분명 source code 부분은 동작하지 않아야한다. 하지만 실제 사용해보면 어떻게 될까?

그림 8. [ ]을 조건 구문에 사용한 테스트

조건 구문이 실행되는 것을 볼 수 있다. 그렇다면 조건문에서는 [] 는 true로 동작하는 것이 증명된 것이다. 이 또한 다음과 같은 테이블로 표현할 수 있다.

그림 9. 조건 구문을 통한 자료의 성질 테이블

이러한 이유로 ![]는 false로 출력된다.

4. 결론

왜 그렇게 동작하는지는 찾았지만, 왜 그렇게 만들어졌는지는 잘 모르겠다. 아마도 자바스크립트를 설계하고 개발한 사람만 알고 있지 않을까? 처음 ![]이 false로 출력되는 물음을 해결하는게 상당히 어려웠지만, 이정도 결론으로 만족한다. 향후에 ECMA-262 6th 문서를 한번 뒤져봐야겠다.

5. 참조 사이트

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