회고록 블로그
[공부 필기] 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이 될 가능성이 있다고 판단된다면, 이를 따로 처리하는 코드를 추가하는 것이 좋다.
'2. 프로그래밍 언어 공부 > JavaScript' 카테고리의 다른 글
[공부 필기] JavaScript 문법 공부 13일차 (0) | 2022.04.28 |
---|---|
[공부 필기] JavaScript 문법 공부 12일차 (0) | 2022.04.27 |
[공부 필기] JavaScript 문법 공부 10일차 (0) | 2022.04.24 |
[공부 필기] JavaScript 문법 공부 9일차 (0) | 2022.04.24 |
[공부 필기] JavaScript 문법 공부 8일차 (0) | 2022.04.23 |