If you haven't ever heard or used Nullish coalescing operator and Optional chaining operator then this post is for you. Both of the them are short-circuit operators introduced in ES2020.
Optional Chaining operator ?.
It makes it easy to get deeply nested data of an object without the need to manually validating null or undefined references.
without ?. operator:
const user = {
name: 'Akhil',
email: 'email@example.com',
address: {},
};
console.log(user.name);
//=> Akhil
console.log(user.address.city.pin);
//=> Uncaught TypeError: Cannot read property 'pin' of undefined
To get rid of the above error, we can validate the object on every access.
console.log(user && user.address && user.address.city && user.address.city.pin);
//this can be thought of:
// if user exists,
// then check if user.address exists,
// then check if user.address.city exists
// and then only access user.address.city.pin
This looks cumbersome and it is frustrating to write if you have it at multiple places.
with ?. operator:
console.log(user?.address?.city?.pin);
// undefined
This looks sleek and returns undefined whenever it finds a nullish(null, undefined) reference.
Nullish Coalescing operator ??
Nullish coalescing operator is yet another newly introduced operator that expects two operands(can be two expressions). It is meant to return the right operand if the left operand/expression evaluates to either null or undefined. If the left operand is anything other than null or undefined, the left operand itself is returned.
const user = { address: null }
user.address ?? "User's address is not available."
//=> User's address is not available.
In this case, user.address is null and that is why the right operand was returned.
Let's see the problem that ?? solves:
Before Nullish Coalescing operator, we could have achieved the above result using || logical OR operator.
const user = { address: null }
user.address || "User's address is not available."
//=> User's address is not available.
But wait, there is a problem when the address has empty strings. So in case we are only restricting null and undefined, the || operator will fail to detect "" and 0 and will result in an unexpected result.
const user = { address: "" }
user.address || "User's address is not available."
//=> User's address is not available.
Though the above block looks okay, but it is returning the right side operand. And hence Nullish Coalescing operator comes to rescue which returns the right side operand only when the left side is either null or undefined.
Check support here:
- Optional chaining operator: caniuse.com/mdn-javascript_operators_option..
- Nullish coalescing operator: caniuse.com/mdn-javascript_operators_nullis..
That is it in this post. I will cover more interesting ESNext features that we should starting using as they are supported by a majority of the existing web browsers.