JavaScript 선택적 연결 '?.'

The optional chaining ?. is a safe way to access nested object properties, even if an intermediate property doesn't exist.

각 사용자가 이름과 주소의 온라인 양식을 작성해야 하지만 대부분의 사용자가 양식을 제출하기 위해 주소 입력 필드를 무시했다고 가정해 보겠습니다.

사용자 중 한 명이 제출한 양식은 아래와 같이 객체로 모델링됩니다.

const user = { name: 'Bello' }

console.log(user, user.address); // { name: 'Bello' } undefined

user.address는 사용자가 채우지 않았기 때문에 undefined를 반환합니다.

또한 각address 개체에 거리가 있어야 한다고 가정해 보겠습니다. 이러한 경우 오류가 발생합니다. 깊게 중첩된 개체, 속성의 경우 오류가 발생합니다.

아래 예를 참조하십시오.

const user = { name: 'Bello' }

console.log(user, user.address.street); 
// TypeError: Cannot read property 'street' of undefined

존재하지 않는 개체에 대해 많은 오류undefined를 원하지 않으면 어떻게 됩니까?

아래 예를 참조하십시오.

const user = { name: 'Bello' }

console.log(user, user.address ? user.address.street : undefined);
// { name: 'Bello' } undefined

아래와 같이 name라는 또 다른 중첩 개체가 있는 경우 어떻게 합니까?

const user = { name: 'Bello' }

console.log(
  user, 
  user.address ? user.address.street ? user.address.street.name 
  : null : null
  );
// { name: 'Bello' } null

위의 코드 스니펫은 아래와 같습니다.

const user = { name: 'Bello' }

console.log(
user, 
user.address && user.address.street && user.address.street.name
);
// { name: 'Bello' } undefined

콘솔에 긴 오류 문자열이 표시되지 않지만 해결해야 할 한 가지 문제가 있습니다. 바로 반복 중첩 obj.obj1...objN 또는 obj.obj1...objN.propN 입니다.





선택적 연결은 반복적인 개체 중첩 문제를 해결합니다. 위의 선택적 연결은 ECMAScript2020에서 릴리스되었습니다.

아래 예를 참조하십시오.

const user = {name: 'Bello'};

document.write(user, user?.address?.street?.name); 
// [object Object]undefined

참고: 위의 예가 작동하려면 먼저 user와 같은 변수가 있어야 합니다.

If you are getting an error, an older JavaScript engine is used by your browser. You need to upgrade the browser.

Edit on Stackblitz

아래에서 사용자 개체를 비워 보겠습니다.

const user = { };

document.write(user?.address?.street?.name); 
// undefined

표현식의 ?.도 단락될 수 있습니다. 논리&& 연산자와 같습니다. 왼쪽에서 오른쪽으로 첫 번째 거짓 값을 찾아 반환합니다(그 뒤의 다른 값은 무시).

The optional chaining ?. is not an operator, but a special syntax construct

아래 예를 참조하십시오.

const user = null;

document.write( user?.address ); // undefined
document.write( user?.address.street ); // undefined

리콜null == undefined

const user = null;
const x = 0;

document.write?.increaseBy1(x++); 
// user value, null is falsy => .increaseBy1(x++) ignored

document.write(x); // 0

구조?.는 함수에서도 작동합니다.

통사론:

functionName?.()

아래 예를 참조하십시오.

const userAdmin = {
  admin() {
    document.write("I am admin");
  }
};

const userGuest = { };

userAdmin.admin?.(); // I am admin

userGuest.admin?.(); // no output, no error

개체 키 값을 검색하기 위한 또 다른 선택적 연결 구문도 있습니다.

통사론:

object?.[key]

아래 예를 참조하십시오.

const key = "firstName";

const user1 = {
  firstName: "Osagie"
};

let user2 = null;

document.write( user1?.[key] ); // Osagie
document.write( user2?.[key] ); // undefined

또한 ?.와 함께 delete를 사용할 수 있습니다.

delete user?.name; // ReferenceError: user is not defined

We can use ?. for safe reading and deleting, but not writing.

아래 예를 참조하십시오.

const user = null;

user?.name = "John"; // error

행복한 코딩