Optional Chaining 연산자와 nullish 연산자 (?. ??)

📋 선택적 연결 연산자 ?.

객체 내의 키에 접근할 때 참조값이 유효한지 판단할 수 있는 연산자
연산자 ?. 앞의 평가대상이 null, undefined일 경우 평가를 멈추고 undefined 반환

옵셔널 체이닝 사용 이유

아래 코드를 보면 info 객체의 extra 내부에는 location이라는 속성이 존재하지 않아 에러가 발생한다.

const info = { };

console.log(info.extra.age); // Uncaught TypeError: Cannot read properties of undefined (reading 'age')

옵셔널 체이닝을 사용할 경우 에러가 발생되지 않고 undefined가 출력된다.

extra라는 속성의 존재유무를 확인했기 때문에 undefined를 반환할 수 있는 것이다.

값이 누락될 가능성이 있는 상황에서 옵셔널 체이닝을 사용함으로써 안정성을 높일 수 있다.

const info = { };

console.log(info.extra?.age);	// undefined

null 병합 연산자 ??

병합 연산자 ?? 왼쪽 대상이 null, undefined일 경우 오른쪽 대상을 반환. 그렇지 않을 경우 왼쪽 대상을 반환

a ?? b 라는 평가식이 있을 떄 a가 null or undefined면 b, 그 외의 경우 a를 반환한다.

const a = null
const b = undefined;

console.log(a ?? 10);	// 10
console.log(b ?? 10);	// 10

const a = 20;

console.log(a ?? undefined);	// 20