[Javascript] 자바스크립트의 단축 평가

1. 단축 평가

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

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

// 단축 평가의 규칙
true || anything  // true
false || anything // anything
true && anything  // anything
false && anything // false

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

'Cat' && 'Dog' // "Dog"
'Cat' || 'Dog' // "Cat"

논리곱(&&) 연산자는 좌항에서 우항으로 평가가 진행되며 두 개의 피연산자가 모두 true로 평가될 때 true를 반환한다. 그렇기 때문에 두 피연산자의 논리 연산 결과를 결정하는 두 번째 피연산자 'Dog'를 그대로 반환한다.

 

하지만 논리합(||) 연산자는 좌항에서 우항으로 평가가 진행된다는 점은 같지만 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환한다. 그렇기 때문에 첫 번째 피연산자 'Cat'이 참일 경우 두 번째 피연산자까지 평가해 보지 않아도 true가 반환된다.

false || 'Dog'  // "Dog"
'Cat' || false  // "Cat"

false && 'Dog'  // false
'Cat' && false  // false

1.2. 논리 연산자를 사용한 단축 평가의 활용

단축 평가를 사용하면 if문을 대체할 수 있다.

// 논리곱(&&) 연산자로 if문 대체하기
const done = true;
const message = '';

if (done) message = '완료';

message = done && '완료';
console.log(message); // 완료


// 논리합(||) 연산자로 if문 대체하기
const done = false;
const message = '';

if (done) message = '미완료';

message = done || '미완료';
console.log(message); // 미완료

객체를 가리킬 때 단축 평가를 활용하면 타입에러를 방지할 수 있다.

// 객체에서의 활용
const elem = null;
const value = elem && elem.value; // null

// 논리곱을 사용하지 않은 경우
const elem = null;
const value = elem.value;  // TypeError: Cannot read property 'value' of null

함수를 호출할 때 단축평가를 활용하면 undefined로 인해 발생할 수 있는 에러를 방지할 수 있다.

function getStringLength(str) {
  str = str || '';
  return str.length;
}

getStringLength();     // 0
getStringLength('hi'); // 2

1.3 옵셔널 체이닝 연산자

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

const elem = null

// elem이 null 또는 undefined면 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
const value = elem?.value;
console.log(value); // undefined

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

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

1.4 null 병합 연산자

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

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

null 병합 연산자는 좌항의 피연산자가 false로 평가되는 값(false, undefined, null, 0, -0, NaN, ' ')이라도 null 또는 undefined가 아니면 좌항의 피연산자를 그대로 반환한다.

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

 

 

 

참고: 모던 자바스크립트 Deep Dive