[공부 필기] JavaScript 문법 공부 11일차

※ 필자는 초초초보자입니다.

※ 틀린 내용에 대한 피드백은 언제든지 환영합니다.

 

 

공부하고 있는 자료 : modern JavaScript tutorial 

https://ko.javascript.info/comparison

비교 연산자

---

✅ 비교 연산자

- 비교 연산자의 반환 값은 "불린형"이다.

- true 또는 false

 

✅ 문자열 비교하기?

- 자바스크립트는 사전 순으로 문자열을 비교한다.

- 사전의 뒤쪽에 있는 문자가 사전의 앞쪽에 있는 문자보다 더 크다가 판단하는 것이다.

- 즉, 'z'가 'a'보다 크다.

- 예시

console.log('Z' > 'a'); // false
console.log('z' > 'a'); // true
console.log('z' > 'A'); // true

console.log('Glow' > 'Glee'); // true
console.log('Gloww' > 'Glow'); // true

- 대문자 Z는 소문자 a보다 더 앞에 있기 때문에 false이다.

   ► 더 뒤에 있는 'a'가 크다는 의미이다.

- 소문자 z는 대문자 A보다 더 뒤에 있기 때문에 true이다.

   ► 더 뒤에 있는 'z'가 크다는 의미이다.

- 보다 보니까 아스키코드 값과 비슷한 것 같다.

- 사실 사전순이 아니라 유니코드 순이라고 한다.

 

✅ 다른 자료형을 비교

- 자료형이 다르다면 자바스크립트는 이 값들을 숫자형으로 바꾼다고 한다.

console.log('2' >= 1); // true
console.log('2F' >= 1); // false
console.log('2F' >= (2+'F')); // true

 

 - 그 외에도 흥미로운 상황들이 있다.

   ► 숫자형 0과 문자형 "0"을 동등 비교할 때 : false 같지만 true이다.

console.log('0' == 0); // true

   ► 숫자형 0을 불린형으로 변환하고 평가를 해보면 : false이다.

   ► 문자형 '0'을 불린형으로 변환하고 평가를 해보면 : true이다.

console.log(Boolean(0)); // false
console.log(Boolean('0')); // true

- 문자형 '0'과 숫자형 0이 동등하다(true)고 했으면서

   논리 평가를 했을 때에는 결과 값이 다른게 웃기게 보일 수도 있지만 JavaScript에서는 아주 자연스러운 결과라고 한다.

   ► 동등 비교 연산자는 문자열 "0"을 숫자 0으로 변환시키지만

   ► Boolean을 사용한 명시적 형변환에는 다른 규칙이 사용되기 때문이라고 한다.

 

✅ 동등 연산자(==) 와 일치 연산자(===)

- 동등 연산자(==)

   ► 0과 false를 구별하지 못한다.

console.log('0' == false); // true
console.log(0 == false); // true
console.log('' == false); // true
console.log('       ' == false); // true
console.log('        0         ' == false); // true

- 동등 연산자에서 이러한 결과가 나오는 이유는 "피연산자를 숫자형으로 변환하기 때문"이다.

   ► 빈 문자열, false는 숫자형으로 변환 시 0이다.

 

- 일치 연산자(===)

   ► 형 변환 없이 값을 비교할 수 있다.

   ► 엄격한 동등 연산자라고 볼 수 있다.

   ► 자료형의 동등 여부도 검사하기 때문에 위의 코드를 예로 들면 다음과 같은 결과가 나온다.

console.log('0' === false); // false
console.log(0 === false); // false
console.log('' === false); // false
console.log('       ' === false); // false
console.log('        0         ' === false); // false

- 불일치 연산자 : !== 와 !=

 

✅ null, undefined 비교

- 동등 연산자와 일치 연산자를 사용하여 null과 undefined를 비교하기

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

   ► 동등 연산자(==)는 null과 undefined를 각별한 커플처럼 취급하기 때문에 true를 반환한다.

   ► 일치 연산자(===)를 사용할 경우, null과 undefined은 자료형이 다르기 때문에 false를 반환한다.

   ► 참고로, 동등 연산자(==)는 보통 문자형, 불린형 등을 숫자형으로 변환시키지만

       null과 undefined는 숫자형으로 변환하지 않는다.

 

- 보통 산술 연산자(+, - 등)나 기타 비교 연산자(<, >, <=, >=)를 사용할 때는

   null과 undefined가 숫자형으로 변환된다.

 

 

✅ 재미있는 에지 케이스1 : null vs 0

- 에지 케이스가 만들어내는 함정에 빠지지 말자.

- null과 0을 비교해보면 어떻게 될까.

"use strict";

console.log(null > 0); // false
console.log(null < 0); // false
console.log(null == 0); // false
console.log(null >= 0); // true
console.log(null <= 0); // true

- null > 0 이나 null < 0 은 그렇다고 해도

   null == 0은 왜 false가 나오는지 이해가 안되는 코드이다.

- 논리적으로 말이 맞지 않아 보인다.

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

 

⚠️ 동등연산자와 기타 비교 연산자

- 기타 비교 연산자는 null을 숫자형 0으로 변환하기 때문에, 위와 같은 결과를 반환한 것이다.

- 동등 연산자(==)는 피연산자가 undefined나 null일 때 형 변환을 하지 않는다.

   ► null과 undefined를 비교할 때는 true를 반환하지만 (일종의 '단짝'처럼 취급한다고 생각)

       그 외의 null/undefined를 다른 값과 비교할 때는 모두 false를 반환한다.

 

✅ 재미있는 에지 케이스2 : 비교가 불가능한 undefined

- 에지 케이스가 만들어내는 함정에 빠지지 말자.

- 그렇다면 undefined는 비교 연산자를 쓸 수 있을까?

"use strict";

console.log(undefined > 0); // false
console.log(undefined < 0); // false
console.log(undefined == 0); // false
console.log(undefined >= 0); // false
console.log(undefined <= 0); // false

- undefined가 기타 비교 연산자(< , > , <= , >=)와 사용했을 때, false가 반환되는 이유는

   undefined가 숫자형으로 변환하면 NaN이 되기 때문이다.

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

- undefined가 자신과 같다고 하는 건 딱 두가지 뿐이다.

   ► null 또는 undefined

 

※ 정리

- 에지 케이스가 만들어내는 함정을 피하려면 이 점을 유의해야한다.

   ► 일치 연산자(===)를 제외한 비교 연산자(==, <=, >=, <, >)를 사용할 때는

        피연산자에 undefined나 null이 오는 상황을 피한다.

   ► undefined, null이 될 가능성이 있는 변수는 비교 연산자를 만나지 않도록(?) 주의한다.

        만약 변수가 undefined나 null이 될 가능성이 있다고 판단된다면, 이를 따로 처리하는 코드를 추가하는 것이 좋다.