자바스크립트 옵셔널 체이닝 (Optional chanining)

S2020에서 새로 나온 문법. 구식 브라우저는 폴리필이 필요.

 

옵셔널 체이닝 연산자 ?. 는

• 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다.
• 참조가 * nullish라면, 에러 발생하지 않고 undefined를 반환한다.
• 함수가 존재하지 않는다면 undefined를 반환한다.
• 선언되지 않은 루트 객체에 사용할 수 없다.
• 정의되지 않은 루트 객체에 사용할 수 있다.

* nullish : nullish 값은 null이나 undefined이다. 항상 false.

 

문법

obj?.prop

obj?.[expr]

arr?.[index]

func?.(args)

 

예시

중첩된 구조를 가진 객체에서 obj가 있다.

optional chaining이 없이 깊이 중첩된 하위 속성을 찾으려면, 다음과 같이 참조를 확인해야 한다:

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

obj.first 를 실행시켜 nullish 아니라는 것을 검증한다. nullish 가 아니라면 obj.first.second 를 실행한다.

obj.first.second 에 직접 접근할 때 일어날 수 있는 에러를 방지한다.

 

 

?. 연산자를 사용한다면?

let nestedProp = obj.first?.second;

obj.first.second 에 접근하기 전에 obj.first 가 nullish가 아니라는 것을 암묵적으로 확인한다.

obj.first 가 nullish 라면 undefined 를 반환한다. 아니라면 obj.first.second 를 실행한다.

 

위 코드는 (임시 변수 temp가 실제로 생성되지 않는다는 것을 제외하고) 아래의 코드와 동일하게 작동한다.

let temp = obj.first; // 확인을 위해 넣은 코드, 실제로 생성되지 않음
let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);

 

함수의 호출과 옵셔널 체이닝

존재하지 않을 수도 있는 메서드를 호출 할 때 유용하다.

(메서드를 사용할 수 없는 API를사용할 경우, 사용자 장치에서 사용할 수 없는 기능이기 때문에 메서드 사용할 수 없을 경우 등)

 

함수 호출 시 옵셔널 체이닝을 사용함으로써

메서드를 찾을 수 없는 경우에 예외를 발생시키지 않고, 자동으로 undefined 를 반환한다.

let result = someInterface.customMethod?.();

만약 속성에 해당하는 이름이 있지만 함수가 아닌 경우, ?. 를 사용은 여전히 TypeError 예외를 발생시킨다.

TypeError exception (x.y is not a function).

 

someInterface 자체가 nullish 라면, 여전히 TypeError가 발생한다.

someinterface 가 nullish 로 예상된다면, ?. 을 사용해야 한다.

someInterface?.customMethod?.()

 

표현식에서 옵셔널 체이닝

대광호 표기법으로 표현식의 속성에 접근할 때 옵셔널 체이닝을 사용할 수 있다.

const nestedProp = obj?.['prop' + 'Name'];

배열에서 특히 유용하다.

const arr = ['a', 'b', 'c', 'd']
const arrayItem = arr?.[42];

 

옵셔널 체이닝은 할당자의 왼쪽에서는 유효하지 않다.

옵셔널 체이닝 표현식의 결과에 할당하는 것은 유효하지 않다.

const object = {};
object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment

 

단락 평가

표현식에서 옵셔널 체이닝을 사용할 때, 좌측 피연산자가 nullish 라면, 표현식은 평가되지 않는다.

?.는 왼쪽 평가대상에 값이 없으면 즉시 평가를 멈춘다.

const potentiallyNullObj = null;
let x = 0;
const prop = potentiallyNullObj?.[x++];
console.log(x); // 0 as x was not incremented

마찬가지로 뒤에 오는 속성도 평가되지 않는다. (?.은 ?. ‘앞’ 평가 대상에만 동작되고, 확장은 되지 않는다는 사실을 알 수 있습니다.)

const potentiallyNullObj = null;
const prop = potentiallyNullObj?.a.b;
// This does not throw, because evaluation has already stopped at
// the first optional chain

---

🫰🏻 참고 🫰🏻

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