[Javascript] Optional Chaining

 

Syntax

---

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

 

?.은 해당 객체가 nullish 즉, undefined나 null인 경우에 TypeError 대신에 undefined를 얻게 해준다. 기존에 && 연산자를 사용하거나 lodash라이브러리를 사용하는 것보다 편리하다. 프로퍼티, 메서드, 배열 모두 사용이 가능하다.

단, ?.은 할당 연산자 왼쪽에서 사용할 수 없다. 따라서 값을 읽거나 삭제할 때만 사용한다(값 쓰기x).

 

예시

---

const adventurer = { name: 'Alice', cat: { name: 'Dinah' } }; 

console.log(adventurer.dog?.name); 
// undefined 

console.log(adventurer.someNonExistentMethod?.()); 
// undefined

console.log(adventurer.cat?.name);
// Dinah

 

?? 연산자와 함께 사용

---

undefined값을 리턴하기 때문에 디폴트 값을 정하기 위해서 nullish coalescing을 위해 사용하는 ?? 연산자와 함께 쓰기 유용하다.

const adventurer = { name: 'Alice', cat: { name: 'Dinah' } }; 
console.log(adventurer.dog?.name ?? 'no dog'); // no dog

 

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

Optional chaining - JavaScript | MDN