5.4 KiB
Optional chaining '?.'
[recent browser="new"]
The optional chaining ?. is an error-proof way to access nested object properties, even if an intermediate property doesn't exist.
The problem
If you've just started to read the tutorial and learn JavaScript, maybe the problem hasn't touched you yet, but it's quite common.
For example, some of our users have addresses, but few did not provide them. Then we can't safely read user.address.street:
let user = {}; // the user happens to be without address
alert(user.address.street); // Error!
Or, in the web development, we'd like to get an information about an element on the page, but it may not exist:
// Error if the result of querySelector(...) is null
let html = document.querySelector('.my-element').innerHTML;
Before ?. appeared in the language, the && operator was used to work around that.
For example:
let user = {}; // user has no address
alert( user && user.address && user.address.street ); // undefined (no error)
AND'ing the whole path to the property ensures that all components exist, but is cumbersome to write.
Optional chaining
The optional chaining ?. stops the evaluation and returns undefined if the part before ?. is undefined or null.
Further in this article, for brevity, we'll be saying that something "exists" if it's not null and not undefined.
Here's the safe way to access user.address.street:
let user = {}; // user has no address
alert( user?.address?.street ); // undefined (no error)
Reading the address with user?.address works even if user object doesn't exist:
let user = null;
alert( user?.address ); // undefined
alert( user?.address.street ); // undefined
alert( user?.address.street.anything ); // undefined
Please note: the ?. syntax works exactly where it's placed, not any further.
In the last two lines the evaluation stops immediately after user?., never accessing further properties. But if the user actually exists, then the further intermediate properties, such as user.address must exist.
We should use `?.` only where it's ok that something doesn't exist.
For example, if according to our coding logic `user` object must be there, but `address` is optional, then `user.address?.street` would be better.
So, if `user` happens to be undefined due to a mistake, we'll know about it and fix it. Otherwise, coding errors can be silenced where not appropriate, and become more difficult to debug.
````warn header="The variable before ?. must exist"
If there's no variable user, then user?.anything triggers an error:
// ReferenceError: user is not defined
user?.address;
The optional chaining only tests for null/undefined, doesn't interfere with any other language mechanics.
## Short-circuiting
As it was said before, the `?.` immediately stops ("short-circuits") the evaluation if the left part doesn't exist.
So, if there are any further function calls or side effects, they don't occur:
```js run
let user = null;
let x = 0;
user?.sayHi(x++); // nothing happens
alert(x); // 0, value not incremented
```
## Other cases: ?.(), ?.[]
The optional chaining `?.` is not an operator, but a special syntax construct, that also works with functions and square brackets.
For example, `?.()` is used to call a function that may not exist.
In the code below, some of our users have `admin` method, and some don't:
```js run
let user1 = {
admin() {
alert("I am admin");
}
}
let user2 = {};
*!*
user1.admin?.(); // I am admin
user2.admin?.();
*/!*
```
Here, in both lines we first use the dot `.` to get `admin` property, because the user object must exist, so it's safe read from it.
Then `?.()` checks the left part: if the user exists, then it runs (for `user1`). Otherwise (for `user2`) the evaluation stops without errors.
The `?.[]` syntax also works, if we'd like to use brackets `[]` to access properties instead of dot `.`. Similar to previous cases, it allows to safely read a property from an object that may not exist.
```js run
let user1 = {
firstName: "John"
};
let user2 = null; // Imagine, we couldn't authorize the user
let key = "firstName";
alert( user1?.[key] ); // John
alert( user2?.[key] ); // undefined
alert( user1?.[key]?.something?.not?.existing); // undefined
```
Also we can use `?.` with `delete`:
```js run
delete user?.name; // delete user.name if user exists
```
```warn header="We can use `?.` for safe reading and deleting, but not writing"
The optional chaining `?.` has no use at the left side of an assignment:
```js run
// the idea of the code below is to write user.name, if user exists
user?.name = "John"; // Error, doesn't work
// because it evaluates to undefined = "John"
```
## Summary
The `?.` syntax has three forms:
1. `obj?.prop` -- returns `obj.prop` if `obj` exists, otherwise `undefined`.
2. `obj?.[prop]` -- returns `obj[prop]` if `obj` exists, otherwise `undefined`.
3. `obj?.method()` -- calls `obj.method()` if `obj` exists, otherwise returns `undefined`.
As we can see, all of them are straightforward and simple to use. The `?.` checks the left part for `null/undefined` and allows the evaluation to proceed if it's not so.
A chain of `?.` allows to safely access nested properties.
Still, we should apply `?.` carefully, only where it's ok that the left part doesn't to exist.
So that it won't hide programming errors from us, if they occur.