옵셔널 체이닝 '?.'

**스펙에 추가된 지 얼마 안된 문법입니다. 구식 브라우저는 폴리필이 필요합니다.**

 

옵셔널 체이닝(optional chaining) ?. 을 사용하면 properties가 없는 중첩 객체에도 에러없이 안전하게 접근 할 수 있다.

 

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

---

이제 막 자바스크립트를 배우기 시작했다면 옵셔널 체이닝이 등장하게 된 배경 상황을 직접 겪어보지 않았을 것이다.

몇 가지 사례를 재현하면서 왜 옵셔널 체이닝이 등장했는지 살펴보자.

 

사용자가 여러 명 있는데 그 중 몇명은 주소 정보를 가지고 있지 않다고 가정해보자.

이럴 때 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; //TypeError: Cannot read property 'innerHTML' of null

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

 

예시: 

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

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

중첩 객체의 특정 프로퍼티에 접근하기 위해 거쳐야 할 구성요소들을 and로 연결해 

실제 해당객체나 프로퍼티가 있는지 확인하는 방법을 사용했었다.

그런데 이렇게 and를 연결해서 사용하면 코드가 아주 길어진다는 문제가 생긴다.

 

옵셔널 체이닝의 등장

---

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

 

이제 옵셔널 체이닝을 사용해 user.address.street 에 안전하게 접근해보자.

 

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

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

 

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

 

let user = null;

alert( user?.address ); // undefined

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

 

위의 예시를 통해 우리는 ?. 은 문법이 위치해 있는 그 자리에서만 동작하지, 

확장되어 동작하지는 않는 다는 것을 알 수 있다. 

 

user?. 평가가 끝나고 user에 값이 없다는 것이 판별되면 그 즉시 평가를 멈추기 때문에

마지막 두 줄에서 에러가 발생하지 않았다.

평가가 끝나면 나머자 프로퍼티들엔 접근 자체를 하지 않기 때문이다. 

다만 user가 존재하는 경우엔 user.address 같은 중간 프로퍼티들이 평가대상이 되기 때문에 

반드시 값이 있어야 에러가 발생하지 않는다.

 

옵셔널 체이닝을 남용하지 말자

?. 은 존재하지 않아도 괜찮은 대상에서만사용해야한다.
사용자 주소 관련 위 예시에서 논리상 user는 반드시 있어야 하는데, address는 필수값이 아니다.
그러니 user.address?.street를 사용하는 것이 바람직하다.

 

 

단락평가

---

?. 는 왼쪽 평가대상에 값이 없으면 즉시 평가를 멈춘다.

 

따라서 ?. 오른쪽에 있는 함수 호출 등의 부가 동작들은 ?.의 평가가 멈췄을 때 더는 일어나지 않는다.

 

let user = null;
let x = 0;

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

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

 

?.() 와 ?.[]

---

?.은 연산자가 아니고 함수, 대괄호와 함께 동작하는 특별한 문법 구조체(syntax construc)이다.

 

?.()는 존재 여부가 확실치 않은 함수를 호출할 때 쓸 수 있다.

 

예시를 살펴보자. 한 객체엔 메서드 admin이 있지만 다른 객체엔 없는 상황이다.

 

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

 

 

 

출처: https://ko.javascript.info/optional-chaining