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

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

 

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

 

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

이때 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로 연결해 실제 해당 객체나 프로퍼티가 있는지 확인하는 방법을 사용했다.

하지만 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

 

 

# ?. 앞의 변수는 꼭 선언되어 있어야 한다.

 

 

단락평가

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

그렇기 때문에 함수 호출을 비롯한 ?. 오른쪽에 있는 부가 동작은 ?.의 평가가 멈췄을 때 더는 일어나지 않는다.

 

let user = null;
let x = 0;

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

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

 

 

 

?.()와 ?.[]

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

한 객체에는 메서드 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

 

 

?. 은 delete와 조합해 사용할 수도 있다.

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

 

 

요약

옵셔널 체이닝 문법 ?.은 세가지 형태로 사용할 수 있다.

1. obj?.prop - obj가 존재하면 obj.prop를 반환하고 그렇지 않으면 undefined를 반환

2. obj?.[prop] - obj가 존재하면 obj[prop]를 반환하고 그렇지 않으면 undefined를 반환

3. obj?.method - obj가 존재하면 obj.method()를 호출하고, 그렇지 않으면 undefined를 반환

 

?. 왼쪽 평가 대상이 null 이나 undefined인지 확인하고 null이나 undefined가 아니라면 평가를 계속 진행

 

?. 를 계속 연결해서 체인을 만들면 중첩 프로퍼티들에 안전하게 접근할 수 있다.

?.은 ?. 왼쪽평가 대상이 없어도 괜찮은 경우에만 선택적으로 사용해야 한다.

 

꼭 있어야 하는 값인데 없는 경우 ?.를 사용하면 프로그래밍 에러를 쉽게 찾을수 없다. 남용 자제

 

 

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