In es2019 and TypeScript 3.7 we got two new way to check nullish value(null, undefined), these are Optional Chaining & Nullish Coalescing.
Optional Chaining
Optional Chaining stops an expression whenever it encounters null
or undefined
. The syntax for the Optional Chaining is ?.
.
let user = {
name: 'John Doe',
address: {
state: "California"
}
}
let userState = user ?. address ?. state
console.log(userState); // California
We defined user
object, we checked if the user
object has a property/key address
then we checked the state
key. This is equivalent as,
let userState = user && user.address && user.address.state;
console.log(userState); // California
What if any of the key has an empty value?
let user = {
name: 'John Doe',
address: {}
}
let userState = user ?. address ?. state;
console.log(userState); // undefined
We got undefined as expected. Let’s write it without Optional Chaining.
let userState = user && user.address && user.address.state
console.log(userState); // undefined; same result of Optional Chaining
Additionally we can do some more thing. We can extract the value of a specific index in an array.
function showFirstItem(arr) {
return arr ?. [0];
}
console.log(showFirstItem([1, 2, 5])); // 1
So, the purpose of Optional Chaining is to avoid the deeply nested structure of if
condition, in order to increase the readability.
Nullish Coalescing
This is very similar to ||
operator. In a given expression if the left side is not nullish it evaluates the left side, otherwise it evaluates right side. The syntax for Nullish Coalescing is ??
.
let val = 0 ?? 9; // here 0 is a falsy value, so val should be 0
let res = null ?? 9; // here null is a nullish value, so res should be 9
The difference between ||
and ??
is ??
does consider falsy value(eg. “”, 0, false) a valid input where ||
doesn’t.
let val = "" ?? "JS"; // ""
let res = "" || "JS"; // "JS"