[JavaScript] '?' 옵셔널 체이닝은 무엇일까?

* 구식 브라우저에는 폴리필이 필요합니다.

 

Optional Chaining은 ES2020에서 등장한 새로운 연산자로서 '?.'의 형태로 사용하며 체인으로 이루어진 각 참조가 유효한지 명시적으로 검증하지 않고 연결된 객체 체인 내에 깊숙히 위치한 속성 값을 읽을 수 있는 연산자이다. 체이닝 연산자와 비슷하게 동작하지만, 만약의 참조가 null 혹은 undefined여도 에러식을 뱉지 않고 undefined값을 리턴한다. 함수 호출시에도 마찬가지로 값이 없다면 undefined를 리턴한다.

 

Optional chaining을 사용하므로써 문법의 가독성이 올라가고 한결 간결한 표현식으로 작성할 수 있게 된다. 속성값이 존재한다는 확실한 보증이 없을 경우 그 객체를 탐색하는 데 도움을 준다.

 

const animals = {
	cat: {
    	name: "나비"
    },
    lion: {
    	name: "호랑이"
    }
}

const dogName = animals.dog?.name;

console.log(dogName); // 결과는??

 

위 코드에서 찍히는 console.log는 undefined이다. 문법의 종류에는 obj?.prop / obj?.[expr] / arr?.[index] / func?.(args)가 있고 object, array, function에서 중첩된 속성값을 읽을 때 도움이 된다.

 

 

const nestedProps = obj.first && object.first.name

이처럼 중첩구조를 가진 object에서 객체의 속성값을 찾기 위해선 이런식으로 참조를 확인하여야 했었다.  논리 연산자 &&를 이용하여 좌항 연산자가 truty한 경우에만 object.first.name을 불러올 수 있었다.

 

하지만 이를 간단이 하여서 

 

const nestedProps = obj.first?.name;

으로 표현하여 first의 값이 존재하면 name을 반환하고 없으면 undefined를 반환한다. 이를 풀어서 해석하면

 

const nestedProp = ((obj.first === null || obj.first === undefined) ? undefined : obj.first.name);

이런 식이 될 수 있겠다.

 

 

함수의 경우

 

함수의 경우는

 

let result = inference.customMethod?.();

라고 표현한다. 메서드를 찾을 수 없는 경우에 예외를 발생시키는 것 대신에 그 표현식은 자동으로 undefined를 반환한다.

 

주의할 점은 해당 이름은 존재하는 데 함수가 아니라면 Type error가 발생한다.

 

 

 

 

예제

 

let example = new Map();
myMap.set("a", {name: "b", biological_type: "ingan"});

let nameBar = myMap.get("bar")?.name; // undefined

 

 

참고자료

 

Optional chaining MDN

 

모던 JS tutorial

옵셔널 체이닝 '?.'