Optional Chaining, Null Coalescing and how they will change the way you write code
Tags: javascript, ember, typescript
Published: 2020-01-15 05:36:39

If you have been following the [TypeScript releases](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html) 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](https://github.com/TC39/proposal-optional-chaining) and [stage 3](https://github.com/tc39/proposal-nullish-coalescing) respectively.

UPDATED: As of [Babel 7.8.0](https://babeljs.io/blog/2020/01/11/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](https://thepracticaldev.s3.amazonaws.com/i/h0kwf3y3n34lasxo1z3j.png)

We are going to use this mock response for the rest of the examples:
![Sample data response](https://thepracticaldev.s3.amazonaws.com/i/phne8x3hgopzgj1e7o6h.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/5dlzlxtq15ptkdub3vxt.png)


Or if you prefer object destructuring:
![Accessing property values by deconstructing objects](https://thepracticaldev.s3.amazonaws.com/i/vd1tvlso21387nyw7pyq.png)
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](https://thepracticaldev.s3.amazonaws.com/i/o9fsrkwno0mrw9khpr8d.png)
So how do we do the same thing using the new Optional Chaining?
![Accessing property values using Optional Chaining](https://thepracticaldev.s3.amazonaws.com/i/6v1g2b3wstbqj8apr1im.png)

----

## 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](https://thepracticaldev.s3.amazonaws.com/i/j5dxj8sko64un0kutlec.png)

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](https://thepracticaldev.s3.amazonaws.com/i/scty3t4dk9s8b6380bmy.png)
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](https://thepracticaldev.s3.amazonaws.com/i/gl81fcl85r4u6btx70zd.png)
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](https://thepracticaldev.s3.amazonaws.com/i/r2jzd820sia6rqim89cw.png)

## What to watch out for...
Order matters when using `?` in Optional Chaining
![Order of the ? matters otherwise you will get SyntaxError](https://thepracticaldev.s3.amazonaws.com/i/5j5h0y4nrlgb4yii4qil.png)
Optional Chaining does not protect you against incorrectly invoking a non-function
![Still need to watch out for Uncaught TypeError not a function](https://thepracticaldev.s3.amazonaws.com/i/3807hb6ifs07ewr8lv98.png)
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](https://thepracticaldev.s3.amazonaws.com/i/i0libfj16x5l60dxakcd.png)

### Resources

[TypeScript 3.7 release notes](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html)
[Babel 7.8.0 Release notes](https://babeljs.io/blog/2020/01/11/7.8.0)
[Optional Chaining for JavaScript Proposal](https://github.com/TC39/proposal-optional-chaining)
[Nullish Coalescing for JavaScript Proposal](https://github.com/tc39/proposal-nullish-coalescing)
[lodash.get](https://lodash.com/docs/4.17.15#get)
[EmberObject.get](http://api.emberjs.com/ember/3.15/functions/@ember%2Fobject/get)
[EmberObject.getWithDefault](http://api.emberjs.com/ember/3.15/functions/@ember%2Fobject/getWithDefault)