13 JS 옵셔널 체이닝 '.?'

 - ?.를 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접슬 할 수 있습니다.

 

  정보가 를 호줄 수 주소 정보가 없다면 에러가 발생하는데 그것을 막기 위해선 &&를 이용해 모든 과정의 수를 다 입력해야 한다.

 예)

let user = {}; // 주소 정보가 없는 사용자
alert(user.address.street); // TypeError

let user = {}; // 주소 정보가 없는 사용자
alert( user && user.address && user.address.street ); // 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?.();

  두 상황 모두에서 user 객체는 존재하기 때문에 admin 프로퍼티는 .만 사용해 접근합니다.

  그리고 난 후 ?.()를 사용해 admin의 존재 여부를 확인한 후 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와 조합해 사용할 수 있지만 쓰기에는 사용할 수 없다.

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