DEV Community

loading...
Cover image for 10 New JavaScript Features in ES2020 That You Should Know
World In Dev

10 New JavaScript Features in ES2020 That You Should Know

garvitmotwani profile image Garvit Motwani Updated on ・4 min read

I am starting this new series called Tip Tuesday in which I will write an article which includes some tips & tricks every Tuesday. So please follow me to stay updated!!

Hey Devs, the new ES2020 features have been up for a while now, but not everybody knows them, so here are some cool features to try out!

It would be really helpful if you like, share and comment

Tip Tuesday - 30/3/2021

1. BigInt

BigInt, one of the most anticipated features in JavaScript, is finally here. It actually allows developers to have a much greater integer representation in their JS code for data processing for data handling.

At the moment the maximum number you can store as an integer in JavaScript is pow(2, 53) - 1. But BigInt actually allows you to go even beyond that.
Code Image

However, you need to have an n appended at the very end of the number, as you can see above. This n denotes that this is a BigInt and should be treated differently by the JavaScript engine (by the v8 engine).

This improvement is not backward compatible because the traditional number system is IEEE754 (which cannot support numbers of this size).

2. Dynamic import

Dynamic imports in JavaScript give you the option to import JS files dynamically as modules in your application natively. This is just like how you do it with Webpack and Babel at the moment.

This feature will help you ship on-demand-request code, better known as code splitting, without the overhead of webpack or other module bundlers. 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.

Code Image

3. Nullish Coalescing

Nullish coalescing adds the ability to truly check nullish values instead of falsey values. What is the difference between nullish and falsey values, you might ask?

In JavaScript, many values are falsey, like empty strings, the number 0, undefined, null, false, NaN, and so on.

However, you might want to check an immense number of times if a variable is nullish – that is if it is either undefined or null, like when it's okay for a variable to have an empty string or even a false value.

In that case, you'll use the new nullish coalescing operator, ??

Code Image

You can clearly see how the OR operator always returns a truthy value, whereas the nullish operator returns a non-nullish value.

4. Optional Chaining

Optional chaining syntax allows you to access deeply nested object properties without worrying if the property exists or not. If it exists, great! If not, undefined will be returned. This works on object properties but also on function calls and arrays. Super convenient! Like this example:

Code Image

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.

Code Image

6. String#matchAll

matchAll is a new method added to the String prototype which is related to Regular Expressions. This returns an iterator that returns all matched groups one after another. Take a look at this example:

Code Image

7. globalThis

If you wrote some cross-platform JS code that could run on Node, in the browser environment, and also inside web-workers, you'd have a hard time getting hold of the global object.

This is because it is window for browsers, global for Node, and self for web workers. If there are more runtimes, the global object will be different for them as well.

So you would have had to have your own implementation of detecting runtime and then using the correct global. Hence, ES2020 brought globalThis which always refers to the global object, no matter where you are executing your code:

Code Image

8. Module Namespace Exports

In JavaScript modules, it was already possible to use the following syntax:

import * as utils from './utils.mjs'
Enter fullscreen mode Exit fullscreen mode

However, no symmetric export syntax existed, until now:

export * as utils from './utils.mjs'
Enter fullscreen mode Exit fullscreen mode

This is equivalent to the following:

import * as utils from './utils.mjs'
export { utils }
Enter fullscreen mode Exit fullscreen mode

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 consistent 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.

Consider a module, module.js:

<script type="module" src="module.js"></script>
Enter fullscreen mode Exit fullscreen mode

You can access meta information about the module using the import.meta object:

console.log(import.meta); // { url: "file:///home/user/module.js" }
Enter fullscreen mode Exit fullscreen mode

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).


Thank you very much for reading this article.

Comment any features that you like of javascript and a feature that you think should be improved in the next ES

PLEASE LIKE, SHARE AND COMMENT

Follow me on Dev and Twitter

Discussion (15)

pic
Editor guide
Collapse
jwenjian profile image
Jiang Wenjian

Love 'globalThis' ~

Collapse
omril321 profile image
Omri Lavi

Thanks for sharing!
I really wonder how Dynamic import works behind the scenes. Do you have some resources you can recommend?

Collapse
garvitmotwani profile image
Garvit Motwani Author

dev.to/nialljoemaher/dynamic-impor... I think this article can help you. Thanks For Reading!!

Collapse
warioneila86 profile image
Mario

Nullish coalescing & optional chaining are my favs! 😬

Collapse
garvitmotwani profile image
Garvit Motwani Author

They are useful in real world!

Collapse
ceofred profile image
Johnson awah Alfred

The import.meta has to be the most useless

Collapse
tujoworker profile image
Tobias Høegh • Edited

Actually, it’s something that we will use more in future. It will be a good replacement for Node.js process.env == import.meta.env

Vite, the bundler, does use this already. Webpack will follow I think. At least v5 does not ship the process polyfill by default anymore.

Collapse
garvitmotwani profile image
Garvit Motwani Author

Yep It can be used in the future, it has scope

Collapse
garvitmotwani profile image
Collapse
bestape profile image
Kyle MacLean Smith

I'm very happy about optional chaining!

Collapse
garvitmotwani profile image
Collapse
akatsukilevi profile image
Akatsuki Levi

the export * one truly got me hyped

Collapse
afthabanees profile image
Collapse
tbecerrp profile image
tbecerrp

Great post!

Collapse
garvitmotwani profile image
Garvit Motwani Author

Thank You Very Much!!