Hey everyone, recently, Optional Chaining and Nullish Coalescing were promoted to Stage 4 on the TC39 process. That got me very excited about what’s to come to JavaScript next year.

This article covers current proposals on Stage 4 with the expected publication year 2020.

Using sticky or global regular expressions that end up having multiple captures groups on a string can be tricky. String.prototype.match doesn’t return capturing groups if the global flag is included, and if it is only the first complete match and it’s capturing groups are returned.

String.prototype.match

The output of String.prototype.match with global flag.

The output of String.prototype.match without global flag.

Using the String.prototype.matchAll guarantees that all the matches and capturing groups are returned.

String.prototype.matchAll

The output of String.prototype.matchAll

Until the introduction of BigInt, the largest number that JavaScript could accurately represent with the Number primitive was 2⁵³-1 (MAX_SAFE_INTEGER).

With the introduction of BigInt, JavaScript now has a new primitive that allows representing numbers larger than 2⁵³

You can create a BigInt by appending an ‘n’ to the end of your number or using the BigInt() function.

Using a BigInt

BigInt is not strictly equal to Number but can be coerced to.

When doing operations like division, it will always round to 0.

Cannot be interoperated with Number.

Trying to interoperate BigInt with Number

The output of attempting to interoperate BigInt with Number

Accessing global objects has always been a headache in the JavaScript world. Depending on the environment you are using, you would have to be familiar with syntax use. This situation has always caused some difficulties writing portable code and often led to patterns like getGlobal.

getGlobal function

With globalThis, now you can stop worrying about what environment you’re on and access your global objects.

globalThis

Imagine that you had multiple promises and wanted to take any action after they all ended, despite if they got fulfilled or rejected. Promise.allSettled gives you a promise that when all of the given promises are settled (fulfilled or rejected), returns an array with the outcome of each promise.

Promise.allSettled

Promise.allSettled output

Ever wanted to load a module at runtime, depending on a certain condition? With dynamic import, you can.

All you have to do is call the import giving it a specifier. Afterward, it will return a promise for that module.

Dynamic Import

Unlike the static import, where you had to provide a string literal as a specifier with the dynamic import since all the work is done in the runtime, you can pass it a template literal.

Dynamic Import using a template literal

If I asked you to access a property and to give me a default value in a case where that property access result is null or undefined, what would you do?

Typically we would leverage the ‘||’ operator like the following example:

pre-Nullish coalescing

What is the problem with this? Imagine that instead of null or undefined, you receive a falsy value.

pre-Nullish coalescing Falsy issue

Output for the pre-Nullish coalescing Falsy issue snippet

In cases like these, we would want to get the property output but, since they are falsy values, then instead, we would get the right-side expression output.

Nullish coalescing fixes this. If the property is null or undefined, then the right-side expression is returned; if not, then it ignores if it is evaluated as falsy or truthy and returns it.

Using Nullish coalescing

Output using Nullish coalescing

Trying to access property values can have some constraints. One of them is guaranteeing that the given property exists. Until now, if we want to verify if properties existed, we would have to check some conditions.

Pre Optional Chaining

With Optional Chaining, you can use ‘?.’ to perform an optional property access. The example below will have the exact same output as the one above which is undefined.

Optional Chaining

Amazing, right? Optional Chaining opens the doors for some more readable code and I can’t wait to use it on a daily base.

Conclusion

If you want to give these proposals a shot, some of them can already be found on some engines, while others are now starting to be implemented, so they are not available there. But, if you are interested, you can use some babel plugins that allow you to try the proposal.

I hope you enjoyed and stay tuned for the next article.

Have a great weekend!