Growth from the root - Vanilla JavaScript - 옵셔널체이닝

옵셔널 체이닝 '?.'

📃 옵셔널 체이닝은 ?. 을 사용하면 프로퍼티가 없는 객체를 에러없이 접근 가능함.

필요한 이유

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

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

// querySelector(...) 호출 결과가 null인 경우 에러 발생
let html = document.querySelector('.my-element').innerHTML;

✏️ 명세서에 ?.이 추가되기 전엔 이런 문제들을 해결하기 위해 && 연산자를 사용하곤 했음.

// querySelector(...) 호출 결과가 null인 경우 에러 발생
let user = {}; // 주소 정보가 없는 사용자

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

✏️ 코드가 길어진다는 단점이 있음.

옵셔널 체이닝의 등장

📃 ?. 는 "앞"의 평가대상이 "undifined" 나 "null" 이면 평가를 멈추고 "undifined"를 반환.

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

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

✏️ user 객체의 값이 없더라고 에러가 발생하지 않음.

단락평가

📃 왼쪽의 평가대상의 값이 없으면 멈춤 : 단락평가, 그 다음의 부가 동작은 일어나지 않음.

// querySelector(...) 호출 결과가 null인 경우 에러 발생
let user = null;
let x = 0;

user?.sayHi(x++); // 아무 일도 일어나지 않습니다.

alert(x); // 0, x는 증가하지 않습니다.

?.()와 ?.[]

// querySelector(...) 호출 결과가 null인 경우 에러 발생
let user1 = {
  admin() {
    alert("관리자 계정입니다.");
  }
}

let user2 = {};

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

✏️ user1는 admin이 정의되어 있어서 값이 나오고, user2는 정의되어 있지 않으나 에러없이 그냥 평가가 멈춤.

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

✏️ 두 상황 모두에서 user 객체는 존재하기 때문에 admin 프로퍼티는 .만 사용해 접근했습니다.
그리고 난 후 ?.()를 사용해 admin의 존재 여부를 확인했습니다. user1엔 admin이 정의되어 있기 때문에 메서드가 제대로 호출되었습니다. 반면 user2엔 admin이 정의되어 있지 않았음에도 불구하고 메서드를 호출하면 에러 없이 그냥 평가가 멈추는 것을 확인할 수 있습니다..대신 대괄호 []를 사용해 객체 프로퍼티에 접근하는 경우엔 ?.[]를 사용할 수도 있습니다. 위 예시와 마찬가지로 ?.[]를 사용하면 객체 존재 여부가 확실치 않은 경우에도 안전하게 프로퍼티를 읽을 수 있습니다.