[모던 자바스크립트 튜토리얼] 4.6 옵셔널 체이닝

개발견 배도르만·2023년 3월 19일

JavaScript Modern-Javascript-Tutorial front end optional chaining

옵셔널 체이닝

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

옵셔널 체이닝이 필요한 이유
user.address.street를 사용해 주소 정보에 접근하는 코드를 실행할 때 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?.는 user가 null이나 undefined인 경우만 처리할 수 있다.

따라서 user의 값이 존재하는 경우, user.address 프로퍼티도 있어야 한다. 그렇지 않으면 user?.address.street의 두 번째 점 연산자에서 에러가 발생한다.

?.는 존재하지 않아도 괜찮은 대상에만 사용해야 한다.(남용X)

위 예시에서 논리상 user는 반드시 있어야 하는데 address는 필수값이 아니기 때문에 user.address?.street를 사용하는 것이 바람직하다.

실수로 인해 user에 값을 할당하지 않았다면 바로 알아낼 수 있도록 해야 한다. 그렇지 않으면 에러를 조기에 발견하지 못하고 디버깅이 어려워진다.

?.앞의 변수가 선언(let, const, var)되어 있지 않으면 에러가 발생한다.
// ReferenceError: user is not defined
user?.address;

단락 평가

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

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

let user = null;
let x = 0;

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

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

?.()와 ?.[]

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

존재 여부가 확실치 않은 함수를 호출할 때 ?.()를 어떻게 쓸 수 있는지 알아보자.

한 객체엔 메서드 admin이 있지만 다른 객체엔 없는 상황이다.

let user1 = {
  admin() {
    alert("관리자 계정입니다.");
  }
}

let user2 = {};

user1.admin?.(); // 관리자 계정입니다.
user2.admin?.();

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

그리고 ?.()를 사용해 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가 존재할 경우 user.name에 값을 쓰려는 의도로 아래와 같이 코드를 작성해 보았습니다.

user?.name = "Violet"; // SyntaxError: Invalid left-hand side in assignment
// 에러가 발생하는 이유는 undefined = "Violet"이 되기 때문입니다.