비교 연산자

Boolean형 반환

다른 언어와 마찬가지로 비교 연산자도 값을 반환합니다. 반환 값은 Boolean형

• true를 반환하면, 비교 연산자가 참, 긍정, 사실이다.
• false를 반환하면, 비교 연산자가 거짓, 부정, 사실이 아님이다.

console.log(1>2) // false
console.log(1<2) // true
console.log(1==2) // false
console.log(1!=2) // true

재밌는 사실

밑에 두 비교연산은 같은 0인데 왜 false를 반환하는 것일까?

• 자바스크립트의 Boolean형 변환에서 0, null, undefined, NaN, ""(빈문자열) 외에는 전부 true로 반환한다.
• 따라서, "0"은 문자열이므로 true를 반환한다.

console.log(Boolean(0)==Boolean("0"));  // false
console.log(Boolean(0)) // false
console.log(Boolean("0")) // true

문자열 비교

• 자바스크립트는 '사전’순으로 문자열을 비교한다. '사전편집(lexicographical)'순 이라고 불리기도 하는 이 기준을 적용하면 사전 뒤쪽의 문자열은 사전 앞쪽의 문자열보다 크다고 판단됩니다.
• 첫 글자를 비교 -> 같으면 두 번째 글자를 비교 -> 같으면 세 번째 글자를 비교 ... 이런식으로 비교가 끝날 때 까지 비교한다.

정확하게는 사전순이 아니라 유니코드 순서로 문자열을 비교한다. 자바스크립트는 대·소문자를 따진다는 것이다. 대문자 'A'와 소문자 'a'를 비교했을 때 소문자 'a'가 더 크다. 자바스크립트 내부에서 사용되는 인코딩 표인 유니코드에선 소문자가 대문자보다 더 큰 인덱스를 갖기 때문이다.

console.log('a'>'A') // true
console.log('a'<'A') // false
console.log('abz'>'aba') // true
console.log('abcd'>'abc') // true

다른 형을 가진 값들의 비교

• 비교하는 값의 자료형이 다를 경우 자바스크립트는 이 값들을 숫자형(Number type)으로 변환한다.

console.log("3">2);     // true, 문자열 "3"을 숫자형 3으로 변환 후 비교
console.log("02"==2);   // true, 문자열 "02"을 숫자형 2으로 변환 후 비교
console.log("0022"==22); // true, 문자열 "0022"을 숫자형 22으로 변환 후 비교

• Boolean형은 trure는 1, false는 0으로 변환 후 비교한다.

console.log(true==1);     // true, 불린형 true를 숫자형 1으로 변환 후 비교
console.log(false==0);   // true, 불린형 false를 숫자형 0으로 변환 후 비교
console.log(true>false); // true, 불린형 true, false를 숫자형 1과 0으로 변환 후 비교
console.log(2>true); // true, 불린형 true를 숫자형 1으로 변환 후 비교

일치 연산자

• 동등 연산자(equality operator) ==은 0과 false를 구별하지 못한다.

console.log(0 == false) // true
console.log(1 == true)  // true

console.log(typeof 1) // "Number"
console.log(typeof true) // "boolean"

• 빈 문자열도 마찬가지이다.

console.log("" == false) // true

이런 문제는 ==가 형이 다른 피연산자를 비교할 때 피연산자를 숫자형으로 바꾸기 때문에 발생한다. 빈 문자열과 false는 숫자형으로 변환하면 0이 된다.

0과 false는 어떻게 구별할 수 있을까?

일치 연산자(strict equality operator) ===를 사용하면 형 변환 없이 값을 비교할 수 있다.

일치 연산자는 엄격한(strict) 동등 연산자이다. 자료형의 동등 여부까지 검사하기 때문에 피연산자 a와 b의 형이 다를 경우 a === b는 즉시 false를 반환한다.

console.log(0 === false) // false
console.log(1 === true)  // false
console.log("" === false) // false

console.log(0=="0") // true
console.log(0==="0") // false

일치 연산자 ===가 동등 연산자 ==의 엄격 버전인 것처럼, 불일치 연산자 !==는 부등 연산자 !=의 엄격 모드이다. 일치 연산자는 동등 연산자보다 한 글자 더 길긴 하지만 비교 결과가 명확하기 때문에 에러가 발생할 확률을 줄여준다.

null과 undefined와 비교하기

일치 연산자 ===를 사용하여 null과 undefined를 비교

console.log( null === undefined ) // false

• 동등 연산자 ==를 사용하여 null과 undefined를 비교 동등 연산자를 사용해 null과 undefined를 비교하면 특별한 규칙이 적용돼 true가 반환된다. 동등 연산자는 null과 undefined를 '각별한 커플’처럼 취급합니다. 두 값은 자기들끼리는 잘 어울리지만 다른 값들과는 잘 어울리지 못한다.

console.log( null === undefined ) // true

산술 연산자나 기타 비교 연산자 <, >, <=, >=를 사용하여 null과 undefined를 비교

null과 undefined는 숫자형으로 변환된다. null은 0, undefined는 NaN으로 변한다.

console.log( null > 0 );  // (1) false
console.log( null == 0 ); // (2) false
console.log( null >= 0 ); // (3) true

위의 결과를 보면 (3) true이기 떄문에 (1)과 (2) 둘 중 하나는 참이어야 맞는데 왜 false로 반환한 것일까?

그 이유는, 동등 연산자 ==와 기타 비교 연산자 <, >, <=, >=의 동작 방식이 다르기 때문이다.

(1)에서 null > 0이 false을, (3)에서null >= 0이 true을 반환하는 이유는 (기타 비교 연산자의 동작 원리에 따라) null이 숫자형으로 변환돼 0이 되기 때문이다.

그런데 동등 연산자 ==는 피연산자가 undefined나 null일 때 형 변환을 하지 않는다. undefined와 null을 비교하는 경우에만 true를 반환하고, 그 이외의 경우(null이나 undefined를 다른 값과 비교할 때)는 무조건 false를 반환한다. 이런 이유 때문에 (2)는 false을 반환한다.

console.log( null == undefined ) // true, 형 변환을 하지 않고 undefined와 null을 비교하는 경우에만 true를 반환
console.log( null >= undefined ) // false, 비교 연산자는 숫자형으로 변환되기 때문에 null은 0, undefined은 NaN으로 변환하여 비교

정리 및 요약

• 비교 연산자는 불린값(true, false)을 반환한다.
• 문자열은 문자 단위로 비교되는데, 이때 비교 기준은 사전순이다. 정확하게는 유니코드 순서
• 서로 다른 타입의 값을 비교할 때는 숫자형으로 형 변환이 이루어지고 난 후 비교를 한다. (일치 연산자는 제외)
• null과 undefined는 동등 비교(==) 시 서로 같지만 다른 값과는 같지 않다.(일치연산자===도 다름)
• 일치 연산자 ===를 제외한 비교 연산자의 피연산자에 undefined나 null이 오지 않도록 특별히 주의해야한다.
• undefined나 null이 될 가능성이 있는 변수가 <, >, <=, >=의 피연산자가 되지 않도록 주의해햐한다.
• 만약 변수가 undefined나 null이 될 가능성이 있다고 판단되면, 이를 따로 처리하는 코드를 추가하길 바란다.