옵셔널 체이닝(Optional Chaining) (?.)

모던 자바스크립트 튜토리얼 내용 정리

• 남용은 금지! 존재하지 않아도 괜찮은 대상에만 사용

등장 배경

• 요소가 없을 때 발생한 에러를 처리하고자 하는 마음

let user = {};
alert(user.address.street); // TypeError 발생

해결 과정

AND(&&) 연산을 사용한다면?

let user = {};
alert(user && user.address && user.address.street); // undefined.

옵셔널 체이닝 등장

• 평가 대상이 undefined, null이면 평가를 멈추고 undefined를 반환

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

주의 사항

1. ?.의 '앞' 평가 대상에만 동작하고 확장되지 않는다. 따라서 앞에서 이미 결과가 끝나면 그 뒤는 보지 않는다.
2. ?.의 앞에는 꼭 변수가 선언되어 있어야한다.

let user = null;
let x = 0;

user?.sayHi(x++); // 아무 일도 일어나지 않습니다.
alert(x); // 0, x는 증가하지 않습니다.

응용

1. ?.()와 ?.[]

• ?.는 연산자가 아닌 함수나 대괄호와 함께 동작하는 문법 구조체(syntax construct)
• ?.()

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

let user2 = {};

user1.admin?.(); // 관리자 계정입니다. 출력
user2.admin?.(); // 아무 일도 없었다.

• ?.[]

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

2. delete

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

// 쓰기는 불가능
user?.name = "Violet"; // undefined = "Violet"이 되는 상황이 될지도 모름