JS - Optional chaining

옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있습니다.

등장 배경

• 여러 사용자들 중 주소 정보가 없는 사용자가 한명이라도 있으면, 다음 코드는 에러를 발생한다.

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

alert(user.address.street); 
// TypeError: Cannot read property 'street' of undefined

• 옵셔널 체이닝 등장 이전엔, 다음과 같이 && 연산자를 사용했음

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

alert( user && user.address && user.address.street );

• 코드가 길어지는 문제점

옵셔널 체이닝 ?.

• ?. 는 ?. 앞의 대상이 undefined or null이면 평가를 멈추고, undefined를 반환한다.

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

alert( user?.address?.street );
// undefined, 에러가 발생하지 않습니다.

• 옵셔널 체이닝을 남용하면 안됨.
• 존재하지 않아도 괜찮은 대상에게만 사용해야 한다.
 

응용 - ?.() / ?.[]

• ?.()는 해당 메서드가 존재하는 객체면 실행하고, 그렇지 않으면 아무일도 일어나지 않는다.

let user1 = {
  admin() {
    alert("관리자 계정입니다.");
  }
}

let user2 = {};

user1.admin?.(); // 관리자 계정입니다.
user2.admin?.();

• ?.[] 는 해당 key 값이 존재하면 value를 반환하고, 그렇지 않으면 undefined를 반환한다.

let user1 = {
  firstName: "Violet"
};

let user2 = null; // user2는 권한이 없는 사용자라고 가정해봅시다.

let key = "firstName";

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

• 다음과 같이 delete 와 조합해 사용할 수 있다.

delete user?.name; 
// user가 존재하면 user.name을 삭제합니다.