[JavaScript] Optional Chaning 연산자 ( ?. )

Optional Chaining

 ?.  체인의 각 참조가 유효한지 검증하지 않고, 속성 값을 읽을 수 있다.

 .  체이닝 연산자와 유사하게 작동하지만, 만약 참조가 null 또는 undefined 이면, 에러가 발생하는 대신에 undefined를 리턴한다.

함수 호출에서 사용할 때, 만약 주어진 함수가 존재하지 않으면 undefined를 리턴한다.

 

참조가 누락될 가능성이 있는 경우 if문을 사용해서 참조가 누락인지를 검증할 수 있지만,

보다 더 짧고 간단한 표현식으로 나타내고자 할 대 사용한다.

 

Syntax

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

Description

optional chaining 없이 하위 속성을 찾으려면, 다음과 같이 확인해야 한다.

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

obj.first 의 값은 obj.first.second 값에 접근하기 전에 null 또는 undefined인지 검증한다.

이것은 obj.first 를 검증하지 않고 바로 obj.first.second 에 직접 접근할 때의 에러를 방지한다.

 

하지만, optional chaining 연산자를 이용해서 obj.first.second에 접근하기 전에 obj.first의 상태에 따라 명시적으로 테스트할 수 있다.

let nestedProp = obj.first?.second;

만약 obj.first가 null 또는 undefined라면, 그 표현식은 자동으로 단락되어 undefined가 반환된다.

 

Examples

const myMap = new Map();
myMap.set("foo", { name: "baz", desc: "inga" });

const nameBar = myMap.get("bar")?.name;

해당 멤버가 없을 때, map 에서 멤버 bar 의 name 속성 값을 찾는다.

결과는 undefined 이다.

 

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