[JS] 옵셔널 체이닝(optional chaining)

옵셔널 체이닝(optional chaining)이란?
개발자들이 속성이 정의되지 않았거나 null일 경우 오류를 발생시키지 않고 객체의 속성에 안전하게 접근할 수 있는 기능

Optional Chaining이 해결하는 문제

let user = {
  name: "John",
  age: 30
};

let street = user.address.street;
console.log(street);

위 코드에서 사용자 객체의 속성인 address 객체의 street 속성에 접근하려고 한다
그러나 주소가 정의되지 않았거나, null인 경우에 이 코드는 TypeError: 정의 되지않은 속성 'street'를 읽을 수 없습니다'라는 오류를 발생시킨다

이 문제를 해결하기위해 속성에 엑세스하기 전에 주소가 있는지 확인하는 몇가지 코드를 추가할 수 있는데,

let user = {
  name: "John",
  age: 30
};

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

위 코드에서 먼저 user.address 와 address.street프로퍼티가 있는지 먼저 확인하는데, 이것은 작동하지만 중첩된 개체와 여러 속성을 처리할 때 번거롭고 읽기 어려울 수 있다

하지만 여기서 optional chaining이 나오는데, 옵셔널 체이닝을 사용하면 위의 코드를 다음과 같이 단순화 할 수 있다

let user = {
  name: "John",
  age: 30
};

let street = user.address?.street;
console.log(street);

위 코드에서 ?를 사용한다.
주소가 있는 경우 주소의 거리 속성에 엑세스하는 연산자이다
주소가 정의되지 않았거나 null이면 거리도 정의되지 않는다
?연산자는 속성에 엑세스하기 전에 속성이 있는지 확인하고, 없으면 undefined를 반환한다

여러 옵셔널 체이닝 연산자를 연결하여 중첩된 속성에 엑세스

let user = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St.",
    city: "Anytown",
    state: "CA",
    zip: "12345"
  }
};

let zip = user.address?.zip;
console.log(zip);

위의 코드에서 address의 zip속성에 접근하기 위해
옵셔널 체이닝(?) 연산자를 두번 사용하는데 주소가 정의되지 않았거나 null인 경우 zip도 정의되지 않는다

옵셔널 체이닝으로 함수 호출하기

let user = {
name: "John",
age: 30,
getAddress: function() {
return this.address;
}
};

let street = user.getAddress?.()?.street;
console.log(street);

옵셔널 체이닝을 사용하여 getAddress 함수를 호출한다음
반환 값의 street 속성에 엑세스한다
getAdress 또는 반환 값이 undefined거나 null이면 street도 정의 되지 않는다

결론?

JavaScript Optional Chaining은 개발자가 정의 되지 않았거나
null값에 대해 걱정하지 않고 객체의 속성에 안전하게 엑세스할 수 있는 기능
특히 중첩된 객체와 여러 속성을 처리할때 코드를 크게 단순화하고 가독성을 높여준다!