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.
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'