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.
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' 
Top comments (0)