What’s coming to JavaScript in 2020?

Reviewing TC39 Stage 4 proposals

Daniel Afonso
Dec 13, 2019 · 4 min read
Photo by MontyLov on Unsplash

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.

String.prototype.matchAll

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

BigInt

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

globalThis

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

Promise.allSettled

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

Dynamic Import

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

Nullish coalescing

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

Optional Chaining

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!

JavaScript in Plain English

Learn the web's most important programming language.

Daniel Afonso

Written by

Software Engineer. Nerdy, loves to code and wants to learn everything.

JavaScript in Plain English

Learn the web's most important programming language.

More From Medium

More from JavaScript in Plain English

More from JavaScript in Plain English

More from JavaScript in Plain English

You Must Understand These 14 JavaSript Functions

More from JavaScript in Plain English

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade