JavaScript Optional chaining array work as a short-circuit and returns undefined if accessing the array results was null or undefined, your code won’t break.
user?.friends?.[0]
Using just the ?
alone makes the compiler think you’re trying to use the conditional operator.
Note: Optional chaining is only used for reading not for assignments.
Optional chaining array
Simple example code used with bracket notation like above, but it can also be used with dot notation property access.
<!DOCTYPE html>
<html>
<body>
<script>
const user = {
name: 'JOhn',
age: 25,
settings: {
theme: {
mode: 'dark',
text: '#d7e0ff',
background: '#f87070',
font: 'Kumbh Sans, sans-serif'
},
},
friends: ['Tim', 'Steve', 'Mike'],
}
// use optional chaining
const first = user?.friends?.[0]
console.log(first)
console.log(user?.friends)
</script>
</body>
</html>
Output:
Another example
const person1 = {
name: 'Alice',
hobbies: ['reading', 'painting', 'swimming']
};
const person2 = {
name: 'Bob'
};
// Accessing hobbies using optional chaining
const thirdHobbyPerson1 = person1.hobbies?.[2];
const fourthHobbyPerson1 = person1.hobbies?.[3];
const thirdHobbyPerson2 = person2.hobbies?.[2];
const fourthHobbyPerson2 = person2.hobbies?.[3];
// Logging the results
console.log('Third hobby (Person 1):', thirdHobbyPerson1); // Output: swimming
console.log('Fourth hobby (Person 1):', fourthHobbyPerson1); // Output: undefined
console.log('Third hobby (Person 2):', thirdHobbyPerson2); // Output: undefined
console.log('Fourth hobby (Person 2):', fourthHobbyPerson2); // Output: undefined
In this example, we have two person
objects. person1
has a hobbies
array with three elements, and person2
does not have a hobbies
property. We use optional chaining (?.
) to safely access elements within the hobbies
array, even if the property doesn’t exist or the array is incomplete. This prevents errors from being thrown and allows the code to gracefully handle cases where the property is missing or undefined.
Do comment if you have any doubts or suggestions on this JS array topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version