Optional chaining

Optional chaining

optional chaining 연산자 (?.) 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다.

?. 연산자는 . 체이닝 연산자와 유사하게 작동하지만, 만약 참조가 nullish (null 또는 undefined)이라면, 에러가 발생하는 것 대신에 표현식의 리턴 값은 undefined로 단락된다. 함수 호출에서 사용될 때, 만약 주어진 함수가 존재하지 않는다면, undefined를 리턴한다.

따라서 참조가 누락될 가능성이 있는 경우 연결된 속성으로 접근할 때 더 짧고 간단한 표현식이 생성된다. 어떤 속성이 필요한지에 대한 보증이 확실하지 않는 경우 객체의 내용을 탐색하는 동안 도움이 될 수 있다.

optional chaining은 선언되지 않은 루트 객체에 사용할 수 없지만, 정의되지 않은 루트 객체와는 함께 사용할 수 있다.

문법

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

설명

optional chaining 연산자는 참조나 기능이 undefined 또는 null일 수 있을 때 연결된 객체의 값에 접근하는 단순화할 수 있는 방법을 제공한다.

예를 들어, 중첩된 구조를 가진 객체에서 obj가 있다. 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.second에 접근하기 전에 obj.first가 null 또는 undefined가 아니라는 것을 암묵적으로 확인하는 것을 알고 있다. 만약 obj.first가 null 또는 undefined이라면, 그 표현식은 자동으로 단락되어 undefined가 반환된다.

이는 임시 변수가 실제로 생성되지 않는다는 점을 제외하고 다음과 동일하다.

let temp = obj.first;
let nestedProp = 
((temp === null || temp === undefined) ? undefined : temp.second);
//삼황연산자

단락 평가

표현식에서 optional chaining을 사용할 때, 만약 왼쪽에 있는 피연산자가 null or undefined인 경우, 그 표현식은 평가되지 않는다. 예들 들어 :

let potentiallyNullObj = null;
let x = 0;
let prop = potentiallyNullObj?.[x++];

console.log(x); // 0  x는 증가하지 않음

optional chaining 연산자 쌓기

중첩된 구조에서는 optional chaining을 여러 번 사용할 수 있다:

let customer = {
  name: "Carl",
  details: {
    age: 82,
    location: "Paradise Falls" // detailed address is unknown
  }
};
let customerCity = customer.details?.address?.city;

주의할점 !!!

1.존재하지 않아도 괜찮은 대상에만 적용해야합니다. 에러를 피하기 위해서 남용하다가 디버깅이 어려워질 수 있습니다.

만약 사용자 객체는 꼭 있어야하는데 그 안에 info 의 age는 꼭 필수가 아니라면 아래와 같이 코딩을 해주어야 합니다.

console.log(user?.info?.age) // 이렇게하면 user 객체가 꼭 있어야할 필요가 없다는 뜻입니다.

console.log(user.info?.age); // 이렇게하면 user 객체가 없다면 에러를 뱉을 것입니다.

2.?.(optional chaining)앞에 오는 변수는 선언이 되어 있어야합니다.

선언되지 않은 변수에는 옵셔널 체이닝 연산자를 사용하더라도 에러가 뜰 것입니다.

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