Optional Chaining (objects & arrays)

Optional chaining can be really useful to help with potential errors when accessing a property of an object. It allows you to access a property deep within an object without risking an error if one of the properties is nullish (null or undefined).

Optional chaining is used to access a property that may or may not exist.

Reference: MDN docs

Optional Chaining (objects)

The syntax is to use dot notation but with a ? in front of the dot. Here's an example:

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' }
*/

Optional Chaining (arrays)

The benefit of optional chaining on an array is that if the results were null or undefined, your code won't break. It will short-circuit and return undefined.

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'

Important notes

• You can only use optional chaining on an object that exists.
• Optional chaining is only used for reading. It cannot be used for assignment.

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

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