🔐 Q2. 옵셔널 체이닝이란 뭘까요? 어떤 경우에 사용할까요?

옵셔널 체이닝 (optional chaining) ?.

옵셔널 체이닝이란?

문법구조체 ?.

• 함수나 대괄호와 함께 동작하는 syntax construct ?. ?.() ?.[]

단락 평가

• ?.는 왼쪽 평가대상 값이 없으면 즉시 평가를 멈추는 단락 평가(short-circuit)를 차용하고 있습니다.

let user = null;
let x = 0;

// user 에서 평가 종료.
user?.sayHi(x++);
// user에서 평가가 종료되어 x가 업데이트되지 않았음 x = 0
alert(x);

정리

옵셔널 체이닝 문법 ?.은 객체 자료형에 따라 세 가지 형태로 사용 가능합니다.

1. obj?.prop – obj가 true면 obj.prop을 반환, 아니면 undefined 반환
2. obj?.[prop] – obj가 true면 obj[prop]을 반환, 아니면 undefined 반환
3. obj?.method() – obj가 true면 obj.method()를 호출, 아니면 undefined 반환

?. 왼쪽 평가 대상이 null이나 undefined가 아니라면 평가 지속 진행

• ?.를 계속 연결해서 체인을 만들면 중첩 props에 안전하게 접근 가능합니다.
• ?.을 사용하다보면 필수값이지만 없는 데이터를 판별하기 어려워, 프로그래밍 에러를 쉽게 찾을 수 없으므로 ?.왼쪽 평가대상이 없어도 괜찮은 경우에만 선택적으로 사용해야 합니다.

옵셔널 체이닝이 필요한 이유

사례

• 동물병원 환자 데이터

let animals = [happy{name:happy, age:2}, merry{name:merry, age:3, like:apple}]
alert(animal.like); //aminal 객체 내에 like이라는 데이터가 없으므로 오류 발생

// TypeError: Cannot read property 'like' of undefined

animals의 merry는 like라는 프로퍼티를 갖고있지만 happy는 like를 보유하지 않은 경우,
존재하지 않는 요소에 접근하는 것이므로 오류가 발생합니다.

이전에 ?.가 추가되기 전에는 위와 같은 경우 && 연산자를 사용했습니다.

let happy = {name: happy, age: 2}
alert(happy && happy.like); // undefined, 에러 X 

중첩 객체의 특정 프로퍼티에 접근하기 위해 거쳐야하는 구성요소를 AND 연산자로 연결함으로써
실제 해당 객체나 프로퍼티가 있는지 확인하는 방법을 이용하다보면, 코드가 아주 길어진다는 단점이 있습니다.

단락 평가를 진행하는 옵셔널 체이닝이 위와 같은 사례에 적용할 수 있는 해결책이 되어줄 수 있습니다.
단, 옵셔널 체이닝의 개념에서 언급했듯 에러를 잡아내기 어려워질 수 있기 때문에 유의해야 합니다.