Optional Chaining

JavaScript is a good language planned to be very asynchronous and flexible but those features made that JS breaks itself very easy. This Optional Chaining is a good option to call properties from an Object but without everything exploding. For example if you do this:

Instead of use a typeof validation or hasOwnPropery() to handle the existence of the words in pt (Portuguese) before use it, just calling the new operator would be enough to handle better the undefined or null values without dying.

console.log(lang?.pt?.words)

// undefined but everything else is ok

It will not return TypeError: Cannot read property ‘pt’ of Object error but only undefined or null value. Even this would be useful and in if statements:

if(lang?.en?.words){

// Do something

}else{

// Do another thing

}

The real power of this feature comes when we are working with large nested objects to not get overwhelmed by the complexity, we can save ourselves with this:

console.log(lang?.en?.words?.rudeWords?.['a bad word'])

On the 79 Chrome version this feature is available only on experimental but you can keep the track of the status here and see when is fully implemented in the majority of browsers.

Nullish coalescing operator

Keeping in the line where we want improved data validation, JavaScript bring us the ?? operator to validate data existence. It works similar to the OR operator but doesn’t fail with falsy values, look this example:

As we can see, when the OR operator will take the zero as false even when zero is a valid number, our nullish friend does not ignore it at all. To return false is necessary have a null or undefined data values. The first case that comes to my mind that this operator will solve is the counters for likes, clicks, views… where the zero it’s important to be taken in count.

Right now is not available at all but in the next Firefox v72 and Chrome v80 updates will be fully supported.

This API is the kind of API’s that comes to open a new world of possibilities for developers giving the chance to interact with files in the user’s local device. Creating IDE’s, creating own office software like Microsoft Office library, develop file editors, text viewers, image editors, more integrated game engines or even the possibility that Apps like Medium can save in the local machine the drafts of stories… All running directly in our browsers, it is at least very interesting.

One of the big problems with this API is the security breach that it opens and even when Chrome would not let the user select sensitive paths like System32, this doesn’t mean that users are fully safe. That’s why maybe this one will take a little bit of time to be fully implemented, by now only chrome supports this feature but you have to enable the file-system-api flag.

Numeric Separators

You can read fast this 23 number, isn’t you?, well but what about this another 1143484622 number?. Certainly I’m sure that you can but what about to have many other similar large numbers?, we know the numbers but is a little hard to read them fast inside a script codes and sometimes can even be confusing as the original proposition says:

Well, to help us to read easier the numbers, has been introduced the numeric separators:

Ignore the red highlight, is a valid JS syntax

If you’ve once worked with API’s like Stripe, managed money amounts in your apps, worked with mathematical syntax… You can find this notations very useful and you can be using them right now but check the compatibility chart for better reference.

Dynamic import

A few years ago calling an external JS file in our script was full impensable and practically impossible because all the bad people out there, right now the times have changed, bad people still there but our browsers have an standard and are prepared to execute the dynamic import inside a JavaScript file/tag.

Simple as calling the method Import, then solve the promise and you’ll have the module in your hands ready to be used. In the first place this can improve so much the website’s loading speed.

The static imports already was with us a little more time ago but load modules dynamically is relative new, Chrome supports this feature natively since v77 but is until this days that has been gained more relevance.

Conclusion

You can keep an eye to the TC39 proposals for the ECMAScript new features to be fully in knowledge of what path JS will take in the near future. Always keep your skills improving and prepare for the next years that JavaScript only will keep growing and growing.