선택적 연결(객체 및 배열)

선택적 연결은 개체의 속성에 액세스할 때 잠재적인 오류를 해결하는 데 매우 유용할 수 있습니다. 속성 중 하나가 null인 경우( null 또는 undefined ) 오류 위험 없이 객체 내부의 속성에 액세스할 수 있습니다.

선택적 연결은 존재하거나 존재하지 않을 수 있는 속성에 액세스하는 데 사용됩니다.

Reference: MDN docs

선택적 연결(객체)

구문은 점 표기법을 사용하지만 점 앞에 ?가 있습니다. 다음은 예입니다.

const user = {
  name: 'Joe',
  age: 27,
  settings: {
    theme: {
      mode: 'dark',
      text: '#d7e0ff',
      background: '#f87070',
      font: 'Kumbh Sans, sans-serif'
    },
  },
  friends: ['Brandon', 'Brian', 'Isaac'],
}

console.log(user?.settings?.theme) /* => { mode: 'dark', text:
'#d7e0ff', background: '#f87070', font: 'Kumbh Sans, sans-serif' }
*/

옵셔널 체이닝(어레이)

배열에 대한 선택적 연결의 이점은 결과가 null이거나 정의되지 않은 경우 코드가 중단되지 않는다는 것입니다. 단락되고 정의되지 않은 값을 반환합니다.

const user = {
  name: 'Joe',
  age: 27,
  settings: {
    theme: {
      mode: 'dark',
      text: '#d7e0ff',
      background: '#f87070',
      font: 'Kumbh Sans, sans-serif'
    },
  },
  friends: ['Brandon', 'Brian', 'Isaac'],
}

/*
// variable to hold the data
let firstArrayValue = '';

// instead of using an if condition 
if (user.friends) {
  firstArrayValue = user?.friends?.[0];
}
*/

// use optional chaining 
const firstArrayValue = user?.friends?.[0]
console.log(firstArrayValue) // => 'Brandon'

중요 사항

존재하는 개체에 대해서만 선택적 연결을 사용할 수 있습니다.

선택적 연결은 읽기에만 사용됩니다. 할당에 사용할 수 없습니다.

// profile is not defined 
console.log(profile?.settings?.theme)

// Syntax error (Optional chaining cannot appear in left-hand side)
user?.settings?.theme = 'light'