loading...

Optional Chaining, Null Coalescing and how they will change the way you write code

sedighian profile image Sam Sedighian Originally published at Medium Updated on ・4 min read

If you have been following the TypeScript releases recently you already know that in TypeScript 3.7 Optional Chaining and Nullish Coalescing were introduced. They are both part upcoming features of the JavaScript and as of the time of publishing this article, they are in stage 4 and stage 3 respectively.

UPDATED: As of Babel 7.8.0 These features are also included by default.

Optional Chaining

Quite often we find ourselves working deep into an object to get the value of a property and if you have written more than 100 lines of code in JavaScript you know that this is the root of a well common error Uncaught TypeError when not done right
Uncaught TypeError

We are going to use this mock response for the rest of the examples:
Sample data response

In order to avoid the common Uncaught TypeError and get the value of id from the response above, we need to do some dance in JavaScript. The way we approach this today is by checking the truthiness of the object at each depth as we work our way to id. This pattern looks more like a conditional statement that should result in a boolean rather than being a property accessor statement but it is, the cleanest and safest native way we have today.
How we access property values today

Or if you prefer object destructuring:
Accessing property values by deconstructing objects
Basically what is happening here is the code block on the left side of the && Logical and operator is being evaluated similar to Boolean(data) and if the value is true it moves to evaluate the right side.

There are more ergonomic ways of doing this if you use Lodash or Ember
Using lodash.get or EmberObject.get
So how do we do the same thing using the new Optional Chaining?
Accessing property values using Optional Chaining


Null Coalescing

It is common practice to have a default value when the value of the property we access is null or undefined. Currently the common way to accomplish this is by using the || Logical or operator

If we are looking to get the Github username which is the login property and set a default to the current user's username, sedighian in this case, we will do so as below:
Setting default/fallback value three different ways

the second and third examples look very similar so why is Null Coalescing useful? Simply put Null Coalescing evaluates the right side of the ?? operator only if the result of the left side is undefined or null and this gives us some protection against unintended results when dealing with valid but falsy values in our data.

For example, in many cases, we wish to an empty string '' , false and 0 to the value returned rather than resulting in a falsy value and hence moving to evaluate the right side of the || Logical-or-operator. Now, we can use the Null Coalescing and we will not have these issues any longer as seen in the examples below:
Why falsy values are bad for Logical or operator and we should use Null Coalescing
For coming up with fallback/default values when accessing an object there are alternative ways in the form of third party libraries and in Ember's case a built-in utility.
Using lodash.get or EmberObject.getWithDefault
Do not forget that Null Coalescing is for more than coming up with a default value to assign to a variable, it is a new alternative way to execute a code block given a null or undefined value. For example:
executing the right side of Null Coalescing operator

What to watch out for...

Order matters when using ? in Optional Chaining
Order of the ? matters otherwise you will get SyntaxError
Optional Chaining does not protect you against incorrectly invoking a non-function
Still need to watch out for Uncaught TypeError not a function
Null Coalescing is not an apple to apple to lodash.get or EmberObject.getWithDefault. The main difference is in how Null Coalescing treats null vs. these two utilities.
default value gotcha when using Null Coalescing

Resources

TypeScript 3.7 release notes
Babel 7.8.0 Release notes
Optional Chaining for JavaScript Proposal
Nullish Coalescing for JavaScript Proposal
lodash.get
EmberObject.get
EmberObject.getWithDefault

Discussion

pic
Editor guide
Collapse
makdeniss profile image
Deniss M

These are very nice features!