자바스크립트-옵셔널 체이닝 '?.'

옵셔널 체이닝

옵셔널 체이닝(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, 에러가 발생하지 않습니다.

이렇게 AND 연산자를 사용하면 코드가 아주 길어지는 단점이 있다.

 

-옵셔널 체이닝의 등장

?.은 ?. 앞의 평가 대상이 undefine나 null이면 평가를 멈추고 undefined를 반환한다.

 

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

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

?.을 쓰면 객체가 없어도 에러가 발생하지 않는다.

 

• ?.은 존재하지 않아도 괜찮은 대상에만 사용해야 한다.

?.을 남발하면 에러를 조기에 발견하지 못하고 디버깅도 어려워진다.

 

-단락 평가

?.은 왼쪽에 값이 없으면 즉시 멈춘다. 이런 방법을 단락 평가라고 한다.

그렇기에 멈추면 오른쪽 부가 동작은 일어나지 않는다.

let user = null;
let x = 0;

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

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

 

-?.()와 ?.[]

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

대괄호를 사용하여 사용

 

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

delete를 사용하여 삭제가 가능하다.

 

• ?.은 읽기나 삭제에는 사용가능 하지만 쓰기에는 사용 불가능하다.