JavaScript Objects
JavaScript Optional Chaining
JavaScript optional chaining reads a nested property without throwing when part of the path is missing.
It is written as a question mark before the dot.
If anything along the path is missing, the whole expression gives undefined.
Example
Example
javascript
const user = { name: "Ada" };
console.log(typeof user.address?.city);Without the question mark this would throw an error.
With it, the result is undefined.
What is Optional Chaining?
?. checks whether the value before it is null or undefined.
If it is, the expression stops and gives undefined.
If it is not, the property is read as normal.
Syntax
Syntax
javascript
object?.property
object?.[key]
object.method?.()There are three forms: property, bracket, and function call.
The Problem It Solves
Reading a property of undefined throws a TypeError.
Example
Example
javascript
const user = { name: "Ada" };
const city = user.address ? user.address.city : undefined;
console.log(typeof city);Optional chaining replaces this guard with two characters.
Deep Paths
Each step in the path can be made optional.
Example
Example
javascript
const data = { user: { profile: null } };
console.log(typeof data.user?.profile?.avatar);The chain stops at the first missing value.
With Arrays
The bracket form works for indexes and dynamic keys.
Example
Example
javascript
const data = {};
console.log(typeof data.items?.[0]);No error, even though items does not exist.
Calling a Method That May Not Exist
?.() only calls the function if it is there.
Example
Example
javascript
const api = {};
console.log(typeof api.load?.());Without the question mark this would throw.
It Only Checks null and undefined
Other falsy values such as 0 and empty strings are read normally.
That is usually exactly what you want.
Example
Example
javascript
const data = { count: 0 };
console.log(data?.count);The output is 0, not undefined.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Optional Chaining</title>
</head>
<body>
<h1>JavaScript Optional Chaining</h1>
<p id="result"></p>
<script>
const users = [
{ name: "Ada", address: { city: "London" } },
{ name: "Alan" }
];
let output = "";
users.forEach(function (u) {
output += u.name + ": " + (u.address?.city || "no city") + "<br>";
});
document.getElementById("result").innerHTML = output;
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try removing the question mark:
Change to u.address.city and see the error in the console.
Important Points
?.stops the expression when the value is null or undefined.- The result is
undefinedrather than an error. - There are three forms:
?.,?.[ ]and?.(). - It only guards against null and undefined.
- Zero and empty strings are read normally.
Conclusion
Optional chaining replaces long guard conditions with two characters.
It is essential when working with data from an API that may be incomplete.
It pairs naturally with nullish coalescing, covered next.