Summarising the JavaScript ES6 features 2020!

JavaScript was earlier used mainly for enhancing the interaction of a user with the webpage. However, in recent times it is being used widely in the full-stack development of web and mobile applications. The main advantage is that all modern web browsers and operating systems support JavaScript.

Javascript ES6 has been around for a few years now, and it allows us to write code in a clever way making the code more modern and more readable.

Now in 2020 ES6 has added 10 new features. Let’s explore the changes.

1. BigInt

BigInt is one of the new features in the Number datatype of JS. It actually allows developers to have much greater integer representation in their JS code for data processing & data handling. Currently, the maximum number you can store as an integer in JavaScript is Number.MAX_SAFE_INTEGER but BigInt actually allows you to go even beyond that.

It allows us to do normal mathematical calculations as before but at the end of the Integer, you put ’n’ as a suffix. This ’n’ denotes that this is a BigInt and should be treated differently by the JS engine.

2. Dynamic imports

Dynamic imports introduce a new function-like form of import that unlocks new capabilities compared to static import, it gives us the option to import JS files dynamically as modules in our application natively. Since it returns a promise, it’s possible to use async/await instead of the then-based callback style. You can also conditionally load code in an if-else block if you like.

The good thing is that you actually import a module, and so it never pollutes the global namespace.

3. Nullish Coalescing

The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined and otherwise returns its left-hand side operand.

In JavaScript, a lot of values are false, like empty strings, the number 0, undefined, null, false NaN, and so on.

However, a lot of times you might want to check if a variable is nullish — that is if it is either undefined or null, like when it’s ok for a variable to have an empty string or even a false value, you’ll use the new nullish coalescing operator, ??.

An important note if we club with logical operators ‘&&’ or ‘||’ with ‘??’ it results in syntax errors.

4. Optional Chaining

Optional chaining operator (?.) can be used the same as dot(.) operator, but it provides a very less error-prone and easy to read code. If we point to the non-existing property it simply returns undefined not error.

5. String.matchAll()

matchAll is a new method added to the string prototype which is related to Regular Expressions. This returns an iterator which returns all matched groups one after another.

6. Promise.allSettled

The Promise.allSelected method accepts an array of Promises and only resolves when all of them are settled — either resolved or rejected. In the native level it waits for all the promises to settle which were not available before.

7. globalThis

Say our code runs across the platforms like brower, Node, web-workers. It’s quite a bit difficult to use ‘window’ for browser, ‘global’ for Node, ‘self’ for the web-workers platform.

To make platform independent development the ‘globalThis’ which always refers to the global object and gives us an ability to store or retrieve data in a specific way.

8. Module Namespace Exports

In JavaScript modules, it was already possible to use the import syntax, However, no symmetric export syntax existed, until now.

9. Well defined for-in order

The ECMA specification did not specify in which order for (x in y) should run. Even though browsers implemented a predictable order on their own before now, this has been officially standardized in ES2020

10. Import.meta

The import.meta object was created by the ECMAScript implementation, with a null prototype. You can access meta information about the module using the import. meta object.

It returns an object with a url property indicating the base URL of the module. This will either be the URL from which the script was obtained (for external scripts) or the document base URL of the containing document (for inline scripts).

Conclusion:

JavaScript is among the most flexible programming languages.These additional features will help developers write code that is more readable and has better performance.