항해2주차 - Node.js (8) 비교 연산자

• 보다 큼·작음: a > b, a < b
• 보다 크거나·작거나 같음: a >= b, a <= b
• 같음(동등): a == b. 
• 같지 않음(부등):  a != b

1. 불린형 반환

alert( 2 > 1 );  // true
alert( 2 == 1 ); // false
alert( 2 != 1 ); // true

let result = 5 > 4; // 비교 결과를 변수에 할당
alert( result ); // true

2. 문자열 비교=사전편집(lexicographical)순 : 사전뒤쪽 문자열 >사전앞쪽 문자열

alert( 'Z' > 'A' ); // true
alert( 'Glow' > 'Glee' ); // true
alert( 'Bee' > 'Be' ); // true

***정확히는 사전순 아니고 유니코드 순이라고 함***

자바스크립트는 대,소문자를 따지기 때문에 소문자a > 대문자 A

자바스크립트 내부에서 사용되는 인코딩 표인 유니코드에선 소문자가 대문자보다 더 큰 인덱스를 갖기 때문임.

 

3. 다른 형을 가진 값 간의 비교

alert( '2' > 1 ); // true, 문자열 '2'가 숫자 2로 변환된 후 비교가 진행.
alert( '01' == 1 ); // true, 문자열 '01'이 숫자 1로 변환된 후 비교가 진행.

alert( true == 1 ); // true
alert( false == 0 ); // true

**주의**

let a = 0;
alert( Boolean(a) ); // false

let b = "0";
alert( Boolean(b) ); // true

alert(a == b); // true!  // 숫자 0 == 숫자0 이렇게 된건가?

자바스크립트 관점에선 이런 결과가 아주 자연스러움.

동등 비교 연산자 ==는 (예시에서 문자열 "0"을 숫자 0으로 변환시킨 것처럼) 피연산자를 숫자형으로 바꾸지만, 'Boolean’을 사용한 명시적 변환에는 다른 규칙이 사용되기 때문입니다.

=== 는 엄밀한 (strict) 일치연산자여서 비교하는 두 값의 데이터타입과 값 자체가 정확히 일치해야만 true를 리턴한다.

==과 ===의 차이

console.log(1 === "1") // false를 출력
console.log(1 == "1" // true를 출력

4. 일치 연산자

동등 연산자(equality operator) ==은 0과 false를 구별못함.

alert( 0 == false ); // true

alert( '' == false ); // true

이런 문제는 동등 연산자 ==가 형이 다른 피연산자를 비교할 때 피연산자를 숫자형으로 바꾸기 때문에 발생한다.

빈 문자열과 false는 숫자형으로 변환하면 0이 된다.

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

일치 연산자는 엄격한(strict) 동등 연산자임. 자료형의 동등 여부까지 검사하기 때문에

피연산자 a와 b의 형이 다를 경우 a === b는 즉시 false를 반환한다.

alert( 0 === false ); // false, 피연산자의 형이 다르기 때문.

일치 연산자 ===가 동등 연산자 ==의 엄격한 버전인 것처럼 ‘불일치’ 연산자 !==는 부등 연산자 !=의 엄격한 버전이다.

일치 연산자는 동등 연산자보다 한 글자 더 길긴 하지만 비교 결과가 명확하기 때문에 에러가 발생할 확률을 줄여준다

위의 3번을 참고하자!     ------> 엄격한 버전 이해 완료!

 

5. null 과  undifined

 

• 일치 연산자 === 

alert( null === undefined ); // false

동등 연산자를 사용해 null과 undefined를 비교하면 특별한 규칙이 적용돼 true가 반환된다.

동등 연산자는 null과 undefined를 '각별한 커플’처럼 취급한다.

두 값은 자기들끼리는 잘 어울리지만 다른 값들과는 잘 어울리지 못한다

 

• 동등 연산자 ==

alert( null == undefined ); // true

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

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

 

6. null VS 0

alert( null > 0 );  // (1) false
alert( null == 0 ); // (2) false
alert( null >= 0 ); // (3) true

이런 결과가 나타나는 이유는 동등 연산자 ==와 기타 비교 연산자 <, >, <=, >=의 동작 방식이 다르기 때문임.

(1)에서 null > 0이 거짓을, (3)에서 null >= 0이 참을 반환하는 이유는

(기타 비교 연산자의 동작 원리에 따라) null이 숫자형으로 변환돼 0이 되기 때문이다.

그런데 동등 연산자 ==는 피연산자가 undefined나 null일 때 형 변환을 하지 않는다. 

undefined와 null을 비교하는 경우에만 true를 반환하고,

그 이외의 경우(null이나 undefined를 다른 값과 비교할 때)는 무조건 false를 반환한다.

이런 이유 때문에 (2)는 거짓을 반환한다.----->다시 읽어보자

 

7. undefined : 다른 값과 비교X

alert( undefined > 0 ); // false (1)
alert( undefined < 0 ); // false (2)
alert( undefined == 0 ); // false (3)

(1)과(2)에선 undefined가 NaN으로 변환되는데(숫자형으로의 변환),

NaN이 피연산자인 경우 비교 연산자는 항상 false를 반환한다.

undefined는 null이나 undefined와 같고, 그 이외의 값과는 같지 않기 때문에 (3)은 false를 반환한다.

-------> 다시 읽어보자

 

8. 주의할점

8-1일치 연산자 ===를 제외한 비교 연산자의 피연산자에 undefined나 null이 오지 않도록 주의하자.

8-2 undefined나 null이 될 가능성이 있는 변수가 <, >, <=, >=의 피연산자가 되지 않도록 주의하자.

     명확한 의도 를 갖고 있지 않은 이상말야. 만약 변수가 undefined나 null이 될 가능성이 있다고 판단되면,

     이를 따로 처리하는 코드를 추가하자.   -------> 다시 읽어보자

 

9. 요약

• 비교 연산자는 불린값을 반환한다.
• 문자열은 문자 단위로 비교되는데, 이때 비교 기준은 ‘사전’ 순.
• 서로 다른 타입의 값을 비교할 땐 숫자형으로 형 변환이 이뤄지고 난 후 비교가 진행된다(일치 연산자는 제외).
• null과 undefined는 동등 비교(==) 시 서로 같지만 다른 값과는 같지 않다.
• null이나 undefined가 될 확률이 있는 변수가 > 또는 <의 피연산자로 올 때는 주의할 것.
•  null, undefined 여부를 확인하는 코드를 따로 추가하는 습관을 들이자.

10. 문제

 > 4
"apple" > "pineapple"
"2" > "12"
undefined == null
undefined === null
null == "\n0\n"
null === +"\n0\n"

.

.

.

.

.

.

.

.

.

.

.

5 > 4 → true
"apple" > "pineapple" → false
"2" > "12" → true
undefined == null → true
undefined === null → false
null == "\n0\n" → false
null === +"\n0\n" → false

해설:

1. 명백히 true입니다.
2. 문자열의 비교는 사전순서가 기준이므로 false입니다. "a"는 "p"보다 작습니다.
3. 두 피연산자는 문자열이므로, 사전순으로 비교가 이뤄집니다. 왼쪽 피연산자의 첫 번째 글자 "2"는 오른쪽 피연산자의 첫 번째 글자 "1"보다 큽니다.
4. null과 undefined는 같습니다.
5. 일치 연산자는 형도 체크합니다. 형이 다르면 false가 반환됩니다.
6. (4)와 유사한 문제입니다. null은 오직 undefined와 같습니다.
7. 형이 다르므로 false가 반환됩니다.