[JS] 단축 평가

var str = ''; // Falsy값.

var length = str && str.length;
// 문자열의 길이를 참조하지 못함 ㅠㅠ 
console.log(length); // ''

 

논리 연산자를 사용한 단축 평가

논리합(||) 또는 논리곱(&&) 연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있다.

논리합 또는 논리곱 연산자 표현식은 언제나 2개의 피연산자 중 어느 한 쪽으로 평가된다.

아래 예제가 이번 포스팅의 핵심이다.

'Cat' && 'Dog' // -> "Dog"
'Cat' || 'Dog' // -> "Cat"

단축평가는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다.

논리곱 연산자 단축 평가

논리곱 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환하므로, 좌항에서 우항으로 평가가 진행된다.

그리고 논리 연산의 결과를 결정하는 두 번째 피연산자가 표현식의 평가 결과를 결정한다.

논리합 연산자 단축 평가

논리합 연산자는 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환한다.

논리합 연산자도 좌항에서 우항으로 평가가 진행된다.

그리고 논리 연산의 결과를 결정하는 첫 번째 피연산자가 표현식의 평가 결과를 결정한다.

 

사용 예제

1. 쉬운 예시

조건 달성 시 ‘완료’ 메세지 출력

let done = true;
let message = '';
message = done && '완료';

미달성 시 ‘미완료’ 메세지 출력

let done = false;
let message = '';
message = done && '미완료';

달성 시 ‘완료’ 미달성 시 ‘미완료’ 출력

let done = true;
let message = '';
message = done ? '완료' : '미완료';

 

2. 변수가 null, undefined 일 때

객체를 가르키는 변수가 null 또는 undefined 일 경우 타입 에러가 발생한다.

var elem = null;
var value = elem.value; // TypeError: Cannot read property 'value' of null

이 때 단축 평가를 사용하면 에러를 발생시키지 않는다.

var elem = null
// elem이 null이나 undefined와 같은 Falsy 값이면 elem으로 평가되고,
// elem이 Truthy 값이면 elem.value로 평가된다.
var value = elem && elem.value; // -> null

3. 매개변수 기본값 설정할 때

함수를 호출할 때 인수를 전달하지 않으면 undefined가 할당된다.

단축평가를 이용하면 undefined로 인한 에러를 방지할 수 있다.

// 1. 단축 평가를 사용한 매개변수 기본값 설정
function getStringLength(str) {
	str = str || '';
	return str.length;
}
getStringLength();      // -> 0
getStringLength('abc'); // -> 3

// 2. ES6의 매개변수 기본값 설정
function getStringLength(str = '') {
	return str.length;
}
getStringLength();      // -> 0
getStringLength('abc'); // -> 3

 

 

옵셔널 체이닝 연산자

ES11(ECMAScript2020)에서 도입된 옵셔널 체이닝 연산자 ?.는 좌항의 피연산자가 null 도는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

 

1. null인 경우

var elem = null;
var value = elem?.value;
console.log(value); // undefined

2. 그냥 단축 평가만 쓰면?

var elem = null;
var value = elem && elem.value;
console.log(value); // null

3. 단축 평가 이용 시 문제점(좌항이 Falsy값일 경우)

-> 옵셔널 체이닝 연산자를 이용하면 해결된다.

var str = '';

var length = str?.length;
console.log(length); // 0

☝🏻 옵셔널 체이닝 연산자는 Falsy값(false, undefined, null, 0, -0, NaN, ‘’)이라도 null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다.

 

null 병합 연산자

ES11(ECMAScript2020)에서 도입된 null 병합 연산자 ??는 좌항의 피연산자가 null 또는 undefined인 경우에 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.

기본값을 설정할 때 유용하다!

 

1. 기본 예시

var foo = null ?? 'default string';
console.log(foo); // "default string"

 

2. 널 병합 연산자 이전에는.. 단축 평가를 썼다.

var foo = '' || 'default string';
console.log(foo); // "default string"

단축 평가를 쓰면 좌항이 Falsy값일 경우 우항을 반환한다.

엇… 난… 이걸 ‘’(빈 스트링) 원한건데.. 'default string'이 출력됐다.

-> 이러한 경우 널 병합 연산자를 쓰면 해결된다.

var foo = '' ?? 'default string';
console.log(foo);

☝🏻 null 병합 연산자는 Falsy값(false, undefined, null, 0, -0, NaN, ‘’)이라도 null 또는 undefined가 아니면 좌항을 그대로 반환한다.