TypeScript 3.7 RC implements one of the most highly-demanded ECMAScript features yet: optional chaining and nullish coalescing!
It is crazy! 🙂
Optional Chaining
So what is optional chaining? Well at its core, optional chaining lets us write code where we can immediately stop running some expressions if we run into a null or undefined. The star of the show in optional chaining is the new ?. operator for optional property accesses. When we write code like
let x = foo?.bar.baz();
That code snippet is the same as writing the following:
let x = (foo === null || foo === undefined) ?
undefined :
foo.bar.baz();
Note that if bar is null or undefined, our code will still hit an error accessing baz. Likewise, if baz is null or undefined, we’ll hit an error at the call site. ?. only checks for whether the value on the left of it is null or undefined – not any of the subsequent properties.
You might find yourself using ?. to replace a lot of code that performs intermediate property checks using the && operator.
// Before
if (foo && foo.bar && foo.bar.baz) {
// ...
}
// After-ish
if (foo?.bar?.baz) {
// ...
}
Nullish Coalescing
The nullish coalescing operator is another upcoming ECMAScript feature that goes hand-in-hand with optional chaining.
You can think of this feature – the ?? operator – as a way to “fall back” to a default value when dealing with null or undefined. When we write code like:
let x = foo ?? bar();
this is a new way to say that the value foo will be used when it’s “present”; but when it’s null or undefined, calculate bar() in its place.
the above code is equivalent to the following:
let x = (foo !== null && foo !== undefined) ?
foo :
bar();