험난 했던 지난 겨울에 했던 프로젝트 작업중 '옵셔널 체이닝 사용 지양해주세요!' 라는 말을 들었다. 걱정할게 없었지.. 왜냐 난 옵셔널 체이닝을 써본적이 없으니까! 껄껄. 그래서 이게 뭔지 프로젝트 끝나고 한달이 지난 후에아 파악해 보기로 결심 했다.

⛓️ Optional chaining 넌 뭔데

Optional chaning인 ?. 을 사용하면 프로퍼티가 없는 중첨 객체를 에러 없이 접근 가능하다. 즉 nullish한 경우 에러를 발생하지 않고 undefined 를 반환한다.

👍🏻 Optional chaining의 필요성

사용자가 여러명인 경우 그 중 몇명은 주소를 가지고 있지 않을 때 user.address.street를 사용해 주소 정보에 접근을 하면 에러가 발생한다.

let user = {}; // 주소 정보가 없는 사용자

alert(user.address.street); 
// 이러한 경우에는 street가 정의되어 있지 않다고 type error 나옴

하지만 옵셔널 체이닝을 사용하면 ?. 앞의 평가 대상이 undefined나 null 이면 평가를 멈추고 undefined를 반환한다.

let user = null

alert(user?.address.street); 
// undefined 나옴

🚧 Optional chaining 사용시 주의 사항

• 위의 예시에서 user가 null이나 undefined가 아니고 실제 값이 존재하는 경우엔 반드시 user.adress 프로터티는 있어야 한다. user는 필수값 이지만 adress는 필수 값이 아니기 때문에 user.adress?.street를 쓰는것이 바람직 하다.
• 브라우저 호환성 체크
• null과 undefined에서만 동작하기 때문에 다른 falsy 값에서는 연산의 결과가 아니라 그대로 반환 됨.
• 배열 항목에 접근이 가능하지만 사용은 불가능.

🔑 ?.은 연산자가 아님

?.은 연산자가 아니다. 함수나 대괄호 같은 문법 구조체이다. . 대신 대괄호 []를 이용해 객체 프로퍼티에 접근하는 경우네 ?.[]를 사용할 수 있다. 이렇게 사용하게 되면 객체 여부가 확실하지 않은 경우에도 안전하게 프로터피를 읽을 수 있다.

let user1 = {
  firstName: "Violet"
};

let user2 = null; // user2는 권한이 없는 사용자

let key = "firstName";

alert( user1?.[key] ); // Violet
alert( user2?.[key] ); // undefined

alert( user1?.[key]?.something?.not?.existing); // undefined

🪄 nullish operator와 사용하기

null 병합 연산자와 함께 사용하면 기본값을 주기 용이하다.

const user = {};
const userAddress = user.info?.address ?? '모르는 주소'; // '모르는 주소'