JavaScript 4.06

옵셔널 체이닝

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

옵셔널 체이닝이 필요한 이유

• 사용자가 여러명 있는데 그 중 몇명은 주소 정보를 가지고 있지 않다고 가정한다.
• 이럴 때 user.address.street를 사용해 주소 정보에 접근하려고 하면 에러가 발생할 수 있다.

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

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

• 자바스크립트를 사용해 페이지에 존재하지 않는 요소에 접근해 요소의 정보를 가져오려고 할때도 에러가 발생한다.

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

• 옵셔널 체이닝이 등장하기 전에는 && 연산자를 사용하곤 했다.

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

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

• 이렇게 AND를 사용해서 연결하면 코드가 아주 길어진다.

옵셔널 체이닝의 등장

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

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

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

• user?.address로 주소를 읽으면 아래와 같이 user 객체가 존재하지 않더라도 에러가 발생하지 않는다.

let user = null;

alert( user?.address ); // undefined
alert( user?.address.street ); // undefined

• ?. 은 ?. 앞 평가대상에만 동작되고, 확장은 되지 않는다.
• user가 null 이나 undefined인 경우만 처리할 수 있다.
  • user에 실제값이 존재하는 경우엔 반드시 user.address 프로퍼티는 있어야 한다.
  • 그렇지 않으면 user?.address.street의 두번째 점 연산자에서 에러가 발생한다.
• 옵셔널 체이닝은 존재하지 않아도 괜찮은 대상에만 사용해야 한다.
  • 사용자 주소를 다루는 위 예시에서 논리상 user는 반드시 있어야 하는데 address는 필수값이 아니다.
  • 그러니 user.address?.street를 사용하는 것이 바람직하다.
• ?. 앞의 변수는 꼭 선언되어 있어야 한다.

단락평가

• ?. 는 왼쪽 평가 대상에 값이 없으면 즉시 평가를 멈춘다.
• 이런 평가 방법을 단락 평가라고 부른다.

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을 삭제합니다.

• 읽기나 삭제하기에는 사용할 수 있지만, 쓰기에는 사용할 수 없다.

요약

• obj?.prop – obj가 존재하면 obj.prop을 반환하고, 그렇지 않으면 undefined를 반환함
• obj?.[prop] – obj가 존재하면 obj[prop]을 반환하고, 그렇지 않으면 undefined를 반환함
• obj?.method() – obj가 존재하면 obj.method()를 호출하고, 그렇지 않으면 undefined를 반환함