● 옵셔널 체이닝 연산자(?.)

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

👾#01

let el = { value: 'value'};
console.log(el?.value); // value

el = { };
console.log(el?.value); // undefined

💡 객체를 가리키기를 기대하는 변수가 null 또는 ubdefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용하다.

👾#02

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

💡 0 과 ''은 객체로 평가될 때도 있다. 문자열의 길이를 참조하는 경우, 논리연산자 &&을 사용한 단축평가 보다는 옵셔널 체이닝 연산자를 사용하는 것이 좋다.

👾#03

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

● null 병합 연산자(??)

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

💡 변수에 기본값을 설정할 때 유용하다.

👾#01

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

💡 0 과 ''이 유효한 값일 경우, 논리 연산자(||)를 사용한 단축평가 보다는 null 병합 연산자(??)를 사용하는 것이 좋다.

👾#02

let a = 0;
let val;

val = a || 'default';
console.log(val); // default
val = a ?? 'default';
console.log(val); // 0

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