[Javascript] optional chaining

References

https://ko.javascript.info/optional-chaining

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining

https://yoo11052.tistory.com/168

 

정의

**옵셔널 체이닝(Optional Chaining)**은 어떠한 요소에 접근하려고 할 때 존재하지 않으면 이를 undefined나 사전에 커스터 마이징 된 값으로 반환하는 기능이다.

 

사용 방법

옵셔널 체이닝은 ?기호를 통해 지정된 평가 대상에서 nullish한 값이 오는 경우 즉시 평가를 멈추어 **반환 값으로 대체(undefined)**하여 에러를 발생시키지 않는다.

let Obj = {
	name: "JohnDoe",
};

// name이라는 key가 존재하므로 value를 호출할 수 있다.
console.log(Obj?.name);

// age라는 key가 없으므로 이를 undefined로 반환한다.
console.log(Obj?.age);

또는 여러가지 방법으로 옵셔널 체이닝을 이용할 수 있다.

// 함수 호출
console.log(Obj.func?.()); // undefined

// 대괄호 표현식(Bracket notation)
console.log(Obj?.['age']); // undefined

// null 병합 연산자(??) 혼용시 undefined 대신 다른 값으로 반환 가능하다
Obj.age = Obj?.age ?? 29;
console.log(Obj.age); // 29

// 배열 요소 접근
let arr = [1, 2, 3];
console.log(arr?.[4]); // undefined

 

주의 사항

옵셔널 체이닝이 적용 되는 범위는 해당 요소가 존재하지 않아도 크리티컬한 상황이 발생되지 않는 경우에만 사용해야한다.

이는 옵셔널 체이닝의 특성상 에러가 아닌 이를 대체할 값으로 반환하기 때문에 문제 발생시 추적의 어려움이 생길 수 있다.

/**
* 예를 들어 통신을 하는 경우 response.data의 중요성을 파악해야 하므로
* 옵셔널 체이닝이 아닌 다른 방법을 선택한다.
*/ 
// 
try {
	...

	fetch('<http://example.com/movies.json>')
  .then((response) => response.json())
  .then((data) => console.log(data));

	...
} catch(error) {
	console.log(error);
}