ES2020 Important Features | Should be utilized
Many interesting features which we were waiting for, are now the part of ES2020/ES11 specifications.
Its time to understand those features and try to adopt them in our day to day coding activities.
1. Nullish Coalescing (??)
Earlier we had the “||” operator which was used to check falsey values and if one value is falsey then assign the other value.
But falsey value can be null or undefined or false or ‘’ or 0.
There was no operator which can be used to check nullish values.
ES2020 now added “??” operator to solve this problem. Now this operator can be used to check nullish values. (nullish values can be either null or undefined)
Example:
const val = null;
const result = val ?? ‘test’;
console.log(result);
Output: test
2. Optional Chaining (?)
Earlier before access deeply nested object properties we put many checks to make sure that property exists or not and code shouldn’t be broken.
But now ES2020 solved this problem now by adding “Optional Chaining” operator. Now before accessing deeply nested object properties, we don’t have to worry that whether that properties exists or not. If property exists then it return property value otherwise it returns undefined.
Example:
3. globalThis
If we run cross platform Javascript code which could run on Node, Browsers or inside Web Workers then its very hard to get hold on global objects.
Below is the list of global objects of different runtime:
ES2020 has now introduced globalThis object which can be used for different runtimes (browser or node or web workers)
So now we don’t have to write the code to detect global object name for different runtime and can directly use globalThis object.
4. Dynamic import
Dynamic import feature gives us the ability to import a JS files on demand basis. So now we can import JS modules in the application natively without using Babel and Webpack third party dependencies.
Get Suneet Bansal’s stories in your inbox
Join Medium for free to get updates from this writer.
So with dynamic import feature, we can achieve code splitting by shipping code on demand basis.
Good thing with import is that, we import module so it never pollutes global namespace.
We can also use dynamic import to conditionally import JS modules.
Example:
Module Namespace Exports
In JavaScript modules, it was already possible to use the following syntax:
However, no symmetric export syntax existed, until now:
export * as utils from './utils.js';This is equivalent to the following:
import * as utils from './utils.js';
export { utils }5. Promise.allSettled
The Promise.allSettled method accepts an array of Promises and only resolves when all of them are settled – either resolved or rejected.
This was not available natively before, even though some close implementations like race and all were available. This brings "Just run all promises – I don't care about the results" natively to JavaScript.
6. Way to declare private members in a class
ES2020 has now introduced ‘#’ keyword which will be used to declare private members in a class. All these private members can’t be accessed outside the class.
‘#’ keyword need to be prefixed with the class member which need to declared privately.
Example:
I hope this article will help you to understand ES2020 features in the better way and enable you to adopt them in your day to day coding activities and improve your code.
Stay tuned and subscribe to my Medium Channel!!!
Thanks!!!
