[TypeScript] 옵셔널 체이닝(Optional Chaining)

타입스크립트 3.7이 릴리즈 되면서 새롭게 사용할 수 있게 된 문법 중에 하나가 바로 "옵셔널 체이닝(Optional Chaining)"이다.

null이나 undefined인 값이 반환되면, 즉시 중단하고 undefined를 반환하는 문법이다.
코드가 즉시 중단 되는 것은 꽤 멋진 것이, 보통의 경우, null이나 undefined에 접근하여 함수를 실행시키는 경우에는 오류가 발생하지만, 이 경우에는 오류 없이 바로 undefined를 반환 한다는 것이다.

 

const apple = garden?.tree.getApple();  

 

위 코드는 아래와 같다.

 

const apple = (garden === nulll || garden === undefined).tree.getApple();

 

위의 코드가 헐씬 간결한 것을 알 수 있다.

이제 아래와 같은 코드를 작성하지 않아도 된다.

 

let apple = null;

if(garden && garden.tree){
   apple = garden.tree.getApple();
}

if(apple === null) console.log('apple is null');

 

위 코드는 아래의 코드로 대치할 수 있다.

 

const apple = garden?.tree?.getApple();

if(!apple) console.log('apple is undefined!');

 

오직 null과 undefined만이 중단시킬 수 있다는 것은 상당한 이점을 제공한다.
예를 들면 0, '', false, NaN과 같은 falsey한 값도 옳바른 경우에는, 기존의 && 이나 if(apple) 같은 문법으로는 null또는 undefined과 구별이 불가능했었다. 하지만 ?.을 사용하면 이와 같은 경우를 구별 할 수 있게 되는 이점이 있다.

이와 같은 경우는 아래의 예시로 알 수 있다.

 

initScrollBar(scrollBarY?: number){
  this.setScrollBar(scrollBarY || 100);
}

 

이 경우에는 scrollBarX가 0인 경우에는 의도와는 다르게 100이라는 값이 들어가게 된다. 이런 경우에는 ??이라는 문법을 사용할 수 있다.

 

initScrollBar(scrollBarY?: number){
  this.setScrollBar(scrollBarY ?? 100);
}

 

이제 scrollBarY가 null이나 undefined인 경우에만 기본 값으로 100이 들어가게 된다.

요약하자면 다음과 같다.

1. null과 undefined만을 다른 'falsey'한 값과 구별하기 위해 옵셔널 체이닝 문법이 생겼다.
2. null 또는 undefined를 만나면 더 이상 진행하지 않고 undefined를 즉시 반환한다.