[JS] 옵셔널 체이닝, null 병합 연산자

일러두기

• 본 글은 ‘모던 자바스크립트 Deep Dive’ 09장, 타입변환과 단축평가를 참고하여 작성되었습니다.
• 글에 틀린 점이 있다면 댓글로 피드백 부탁드립니다

---

옵셔널 체이닝

옵셔널 체이닝은 객체의 값을 optional하게 참조하기 위해 ES11에 도입된 문법이다. 자바스크립트에서 존재하지 않는 객체를 참조하려고 할 때에는 에러가 발생하는데, 옵셔널 체이닝은 해당 객체가 존재할 때에만(옵셔널) 프로퍼티를 참조하는 과정을 이어가도록 (체이닝)해서 이러한 에러를 효과적으로 방지해줄 수 있다!

기본문법

프로퍼티를 참조할 객체가 없다면(= null, undefined라면) undefined를 반환한다.

var elem = null;

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

null 병합 연산자

null 병합 연산자는 || 논리연산자를 통한 단축평가와 그 형태와 쓰임새가 비슷하다.

기본 문법

null 병합 연산자

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

|| 논리 연산자를 통한 단축평가

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

하지만 논리연산자를 통한 단축 평가를 할 경우에는 좌항이 falsy한 값이라면 모두 우항을 반환하고, null 병합연산자의 경우에는 좌항이 null 또는 undefined인 경우에만 우항을 반환한다. null과 undefined은 falsy 한 값의 일종이므로 null 병합 연산자는 || 보다 깐깐히 (?) 단축평가를 해야할 때 사용하는 연산자라고 이해하고 사용하면 될 것 같다. 👍