단축평가, 옵셔널체이닝연산자, null병합연산자 (ES11)

단축평가(short-circuit evaluation)

---

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

 

true || anything   // true
false || anything  // anything
true && anything   // anything
false && anything  // false 

 

단축 평가를 사용하면 if문을 대체할 수도 있다. 어떤 조건의 결과값이 truthy일 때 무언가 동작하게 만들고 싶다면 && 연산자를 사용해 if문을 대체해보자!

 

let done = true;
let message = '';

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

 

반대로 조건의 결과값이 falsy일 때 무언가 동작하게 하고 싶다면 || 연산자를 사용해 if문을 대체해보자!

 

let done = false;
let message = '';

if (!done) message = '아직';
message = done || '아직';

 

변수가 null, undefined가 아닌지 확인한 후에 하위 속성을 참조할 때, 단축 평가를 통해 에러를 방지할 수도 있다.

let el = null;
let val = el && el.val;

 

함수의 매개변수로 들어온 변수에 기본값을 설정해주고 싶을 때도 사용 가능하다.

 

function func(str) {
    str = str || '';
}

 

 

옵셔널 체이닝 연산자 (optional chaining)

---

ES11부터 도입된 연산자이다. 표기 방식은 ?. 이런식으로 쓰는데, 왼쪽 피연산자가 null이나 undefined면 undefined를 반환하고, 그렇지 않으면 오른쪽의 프로퍼티 참조를 실행해 반환한다. 

 

let el = null;
let val = el?.val;
console.log(val);  // undefined

 

기존처럼 && 연산자를 사용할 경우, 왼쪽이 false로 평가되면 그 즉시 왼쪽 피연산자를 반환했다. 하지만 옵셔널 체이닝 연산자(?.)는 왼쪽 결과값이 falsy여도 null이나 undefined가 아니면 오른쪽까지 평가하고 결과를 반환한다. 덕분에 속성여부를 판단할 때 좀 더 간단히 표현이 가능해졌고, 참조 에러 가능성도 낮아지게 되었다.

 

let str = '';
let length = str && str.length;
console.log(length);  // ''

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

 

 

null 병합 연산자(nullish coalescing)

---

null 병합 연산자도 ES11부터 도입되었다. ?? 이렇게 사용하는데, 왼쪽 피연산자가 null이나 undefined면 오른쪽 피연산자를 반환하고, 아닌 경우에는 왼쪽의 피연산자를 반환한다. 변수에 기본값을 설정할 때 유용하게 쓸 수 있다.

 

let str = null ?? 'default';
console.log(str);  // 'default'

 

기존처럼 || 연산자로 기본값을 설정했을 때를 생각해보자. ||는 왼쪽 피연산자가 falsy값이면 오른쪽 피연산자를 반환했는데, falsy값으로 취급되는 0 이나 ''(빈문자열)을 넣으면  예상치 못한 결과가 나오기도 했다. 하지만 ?? 연산자를 사용하면 이런 경우를 방지할 수 있다.

 

let str = '' || 'default';
console.log(str);  // 'default'

let str = '' ?? 'default';
console.log(str);  // ''