[JS] 자바스크립트 옵셔널 체이닝

옵셔널 체이닝 등장 배경

---

비교적 새로 추가된 자바스크립트 문법으로 프로퍼티가 없는 중첩 객체를 에러없이 접근할 때 사용한다. 유저 정보를 담아두는 user 객체에 아무런 정보가 없는 상태에서 address 속성에 접근하려고 하면 아래처럼 타입 에러가 발생한다.

const user = {};
console.log(user.address.street);
// TypeError: Cannot read property 'street' of undefined

 

React나 Vue의 상태관리 라이브러리를 쓸 때 아직 스토어에 있는 정보를 다 불러오지 않은 시점에서 객체의 속성에 접근할 때도 비슷한 타입에러가 발생한다.

// selectedMall은 스토어에서 불러올 정보
// 아직 스토어에서 selectedMall 정보를 조회하지 않은 상태라면
// 아래 코드가 실행될 시점에선 타입에러가 발생한다
watch(
  () => selectedMall.value,
  (newValue, oldValue) => {
    if (oldValue.id === newValue.id) {
      return updateInboxState();
    }
    if (newValue.id) {
      updateInboxState();
    }
  },
);

 

중첩 객체의 특정 프로퍼티에 접근할 때 거치는 속성들을 AND 연산자를 활용해 실제 해당 객체나 프로퍼티가 있는지 확인하여 타입에러를 피할 수 있다. 하지만 이 같은 방식은 코드가 매우 길어지는 단점이 존재한다.

const user = {};
console.log(user && user.address && user.address.street);

 

옵셔널 체이닝 사용법

---

💡 구형 브라우저에선 폴리필 필요

 

옵셔널 체이닝은 속성을 명시하는 온점 앞에 물음표를 ?. 추가하는 방식으로 사용한다. 평가 대상이 undefined거나 null이면 평가를 멈추고 undefined를 반환한다. 즉 접근하는 객체나 객체의 속성이 존재하지 않는다면 undefined를 반환한다.

const user = {};
console.log(user?.address?.street); // undefined

const user = null;
console.log(user?.address); // undefined

 

단락 평가

?. 왼쪽 평가 대상에 값이 없으면 평가를 멈춘다. 이런 평가 방식을 단락 평가(short-circuit)라고 부른다. 왼쪽 ?.의 평가를 멈췄다면 ?. 우측에 있는 부가동작도 실행하지 않는다.

const user = null;
let x = 0;

user?.sayHi(x++); // 아무 일도 일어나지 않는다
console.log(x); // 0
// user?.가 null이어서 평가를 멈춲기 때문에
// ?. 우측에 있는 부가동작은 실행하지 않는다

 

?.() ?.[]

❶ 메서드와 함께 사용

`?.` 은 연산자가 아닌 함수나 대괄호와 함께 동작하는 Syntax Construct다. 아래 코드에서 `user` 객체는 모두 존재하기 때문에 `admin` 속성에만 `?.` 을 사용해서 접근했다.

const user1 = {
  admin() {
    console.log('관리자 계정');
  },
};

const user2 = {};

user1.admin?.(); // 관리자 계정
user2.admin?.(); // undefined

 

`user1` 객체엔 `admin` 메서드가 정의되어 있기 때문에 정상적으로 호출됐다. `user2` 객체엔 `admin`이 정의되어 있지 않은 상태에서 호출했지만 오류가 발생하지 않고 평가를 멈추는 것을 확인할 수 있다.

 

❷ `[]` 대괄호와 함께 사용
`?.[]` 대괄호를 사용해서 객체 속성에 접근할 수도 있다. 작동 방식은 동일하다. 

const user1 = { firstName: "John" };
const user2 = null;
const key = "firstName";

console.log(user1?.[key]); // John
console.log(user2?.[key]); // undefined

 

❸ `delete` 연산자와 함께 사용

delete user?.name; // user 객체가 존재하면 user.name 삭제

 

주의 사항

❶ 옵셔널 체이닝의 `?.`은 존재하지 않아도 괜찮은 대상에 사용하는 것이 가장 좋다(디버깅을 위해). 위 예시에서 사용자 주소를 다루는 `user`는 반드시 있어야 하지만 `address` 속성은 필수가 아니다. 따라서 아래처럼 사용하는 것이 가장 바람직하다.

user.address?.street

 

❷ 가장 앞의 `?.` 물음표가 들어가는 변수는 꼭 선언되어 있어야 한다. 만약 `user` 객체가 `let` `const` 등으로 선언되어 있지 않으면 평가시 아래처럼 에러가 발생한다. 

console.log(user?.address);
// ReferenceError: user is not defined

 

❸ `?.` 은 읽기나 삭제엔 사용할 수 있지만 쓰기엔 사용할 수 없다. 때문에 아래처럼 할당 연산자 왼쪽에선 사용할 수 없다. 아래처럼 `user`가 존재할 경우 `user.name`에 새로운 값을 할당하려는 의도로 작성한 코드는 에러가 발생한다. 

user?.name = 'John'; // SyntaxError: Invalid left-hand side in assignment
// 위 에러는 자바스크립트가 undefined = "John"로 해석하기 때문에 발생한다

 

참고

---

옵셔널 체이닝 '?.'

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요