[JS] 자바스크립트, Optional Chaining

 

휴, 회사 업무 하랴, 공부하랴 요즘 정신이 없다😭

오늘은 어제 업무하다가 새롭게 알게 된 Optional Chaining에 대해서 아주 간략하게 정리해보려고 한다.

(Optional Chaining은 타입스크립트 3.7부터 지원된다!)

 

Summary

Optional chaining은   ?.  operator와 함께 사용한다.

 . chaining operator와 비슷하게 사용이 가능한데,

 ? 를 붙임으로서 그 속성이 존재하는 경우에만 chaining을 계속하고

존재하지 않으면 undefined를 리턴하게 된다.

 

 

Example

const person = {
  name: 'Alice',
  job: {
    companyName: 'abc',
    title: 'developer'
  }
};

console.log(person.job.companyName); // 'abc'
console.log(person.pet.name); // error

만약에 위와 같은 person 객체가 존재한다고 해보자.

 

person.job.companyName을 접근하면 'abc'가 출력될 것이다.

그런데 만약에 person에 존재하지 않는 속성을 체이닝하면 에러가 발생한다.

 

 

const person = {
  name: 'Alice',
  job: {
    companyName: 'abc',
    title: 'developer'
  }
};

console.log(person.job.companyName); // 'abc'
console.log(person.pet?.name); // undefined

이 때 Optional Chaining을 사용하면 에러가 발생하는 대신 undefined가 리턴된다.

 

 

Syntax

이러한 Optional Chaining은 object의 prop뿐만 아니고 배열, 함수에도 적용할 수 있다.

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)

 

Description

let nestedProp = obj.first && obj.first.second;

즉, 그 동안은 객체가 깊게 nested된 경우에 에러를 내지 않기 위해서 위와 같은 방법을 사용했어야만 했다.

 

let nestedProp = obj.first?.second;

그러나 이제는 위와 같이 적용하여 에러 없이 원하는 결과물을 얻을 수 있다! (너무 편리해보인다. 이걸 이제서야 알았다니...)

?. 를 만나면 JavaScript는 알아서 그 속성이 null이나 undefined인지 검사하고, null과 undefined가 아닌 경우에만 체이닝을 계속한다.

 

 

let result = someInterface.customMethod?.();

함수와 함께 사용할때는 위와 같이 함수 이름 뒤에 Optional Chaining을 붙이고 함수를 실행시키면

customMethod라는 함수가 존재하는 경우에만 함수를 실행하고, 존재하지 않으면 undefined를 리턴한다.

 

 

 

 

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Optional chaining