Book/모던 자바스크립트 Deep Dive
9-2장, 단축 평가
떼굴펜
2024. 4. 19. 16:23
표현식을 평가하는 도중에, 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다.
(1) 논리 연산자
논리곱(&&)과 논리합(||)를 이용한 평가 결과는 불리언 값이 아닐 수 있다.
단축평가 규칙
표현식 | 평가 결과 |
true || anything | true |
false || anything | anything |
true && anything | anything |
false && anything | false |
// 예시
'Cat' && 'Dog'; // "Dog"
'Cat' || 'Dog'; // "Cat"
응용 1. 변수가 null 또는 undefined가 아닌지 확인할 때
var elem = null;
var value = elem && elem.value;
응용 2. 함수 매개변수에 기본값을 설정할 때
// 예시 1.
function getStringLength(str) {
str = str || '';
return str.length;
}
// 예시 2.
function getStringLength(str = '') {
return str.length;
}
(2) 옵셔널 체이닝 연산자
논리연산자(&&) 이용 | var value = elem && elem.value; |
옵셔널 체이닝 연산자 | var value = elem?.value; |
(3) null 병합 연산자
논리연산자(||) 이용 | var value = elem || elem.value; |
null 병합 연산자 이용 | var value = elem?.value; |
주로 변수에 기본값을 설정할 때 유용하다. null 병합 연산자가 도입되기 전에는 논리연산자(||)를 이용했다.
하지만 논리합(||) 연산자와 null 병합 연산자가 조금 다른 부분이 있어, 아래 예시에 적는다.
// string 의 빈값도 유효한지에 따라 조금 다르게 써야한다.
// 논리연산자(||) 이용 시
var foo = '' || 'hello';
console.log(foo); // "hello" (우측값)
// null 병합 연산자 이용
var foo = '' ?? 'hello';
console.log(foo); // "" (좌측값)
- 논리합(||) 연산자의 Falsy 값 : undefined, null, false, 0, -0, NaN, 빈 문자열('')
- null 병합 연산자의 Falsy 값 : undefined, null