[javascript] 반드시 알아야 할 비교연산 특징

관련 지식
#javascript #comparison-operators

비교연산은 프로그램 언어의 가장 기초입니다. 그러나 자바와 자바스크립트는 문법적 유사성이 있어서 자바스크립트의 비교연산을 지나치는 경우가 있는데 몇 가지 사례를 통해 자바와는 다른 자바스크립트 비교연산 특징을 설명 드리겠습니다.

Equality (==)

가장 기초인 비교 연산입니다. 자바 개발을 익숙하게 하시는 분은 이정도 쯤이야 하고 넘어가는 카테고리죠. 하지만 여기에도 자바스크립트의 특징이 있습니다.

1    ==  1         // true
'1'  ==  1         // true
0    == false      // true
0    == null       // false
var object1 = {'key': 'value'}, object2 = {'key': 'value'}; 
object1 == object2 // false
0    == undefined  // false
null == undefined  // true

위 예제에서는 5번째 줄의 변수 선언을 제외하면 총 7가지의 비교 구문과 주석으로 결과 값이 있습니다. 주석에 본인이 생각하는 것과 같은 결과가 적혀있나요? 아마도 아래 세가지 결과가 조금 당혹스럽게 했을수 있을것 같네요.

'1'  ==  1         // true
0    == false      // true
null == undefined  // true

자바스크립트에서는 변수의 타입이 다른 경우 형변환을 하여 비교하게 됩니다. 문자와 숫자를 비교하는 경우 숫자를 문자로 형변환 후 문자를 서로 비교하는 것이죠. 따라서 “‘1’ == 1”은 true 입니다.
0과 false는 추측하신 분도 많으실것 같습니다. true/false 를 1/0 으로 표현하기도 하죠.
null과 undefined 는 엄밀히 말하면 다른 상태이지만 둘다 값이 없는건 마찬가지죠. 따라서 true 가 되니다.

조금 전 설명에 엄밀히 라고 강조하였습니다. 엄밀히 말하면 “‘1’ == 1” 도 false 가 되어야 하지 않을까요? 문자 1과 숫자 1은 다르니까요. 자바스크립트에는 ==비교 외에 === 비교가 있습니다.

Strict equality (===)

자바에서는 없는 엄격한 비교 연산자 입니다. 앞에서 응? 했던 세가지 비교 구문만 어떻게 될지 해보겠습니다.

'1'  ===  1         // false
0    === false      // false
null === undefined  // false

전부 false 입니다. 문자1과 숫자1, 0과 false, null과 undefined는 엄밀히 말하면 다 다른 값들이니까요. 이러한 비교 연산에 대해 MDN에서는 아래와 같이 설명 되어있습니다.

• 두 문자열의 strictly equal은 두 문자열의 문자가 같은 순서를 가지고, 같은 길이를 가지고, 대응하는 위치의 문자가 같을 때 를 말한다
• 두 숫자의 strictly equal은 두 수가 숫자적으로 같을 때(값이 같을 때)를 말한다.. NaN은 NaN을 포함하여 어떤것과도 같지 않다, 음의 0, 양의 0는 같다.
• 두 부울 피연산자의 strictly equal은 둘다 참이거나 둘다 거짓인 경우를 말한다.
• 서로 다른 두 객체는 strict비교든 abstract비교든 같지 않다.
• 객체를 비교하는 표현은 오직 피연산자가 같은 객체를 참조한 경우만 참이다.
• NULL과 Undefined Type은 자기 자신과 strict equal이고 서로간엔 abstract equal이 적용된다.

출처 : MDN web docs - 비교 연산자

말이 좀 복잡하죠? 하나만 생각하면 됩니다. ==, != 비교는 타입을 무시하는 비교라는 것!