Here are my Top 5 most anticipated features for ES2020!
window.setTimeout(() => console.log(‘Hi there friend!’),1000)
global.setTimeout(() => console.log(‘Hi there friend!’),1000)
The above can be very annoying, especially if you want to use/build libraries across both environments or if you forget to use the appropriate keyword. Now you may have noticed that you could create a function to return the appropriate global object.
Now the above would work, but you would need to make this function available everywhere in your code and if your site has CSP enabled this code may fail to run in the browser.
This is where globalThis comes in. If you need access to the global object, use globalThis. The above code can be rewritten as
Looks a lot better, and it can be used throughout the application, it’s important to note that you cannot use browser exclusive functions, i.e., alert(). However, this is still a nice feature that will undoubtedly help developers across the board, increasing the portability of their JS code.
4. Class Fields
Here is a simple Counter class with one instance property, count.
For those coming from a C# or Java, this may seem very confusing. The count property was declared and initialized in the constructor by setting the value to “this.” For many, this may seem a little unintuitive.
Class Fields help solve this problem.
3. Private class fields, methods, and accessors
Okay, sure class fields are a nice to have feature that helps with clarity, but private fields? Now we are starting to get into the significant changes! With this new feature, we will be able to declare properties, methods, accessors, and mutators as private. Let’s take this example of a person.
As you can see, we can use getters and setters to set the name values, but we can also ignore them and set/get the firstName/lastName properties directly. That could be dangerous if they were only intended to be changed or accessed in specific ways, and it also makes it more difficult for the developers to know how the class was designed to be used.
Well without further ado here is the above example but with the new private operator.
Now if we wanted to get the person’s name, we would have to use the defined getter; using the private properties would return undefined. Also note that we can also make accessors, mutators, and methods private in the same way! Again another excellent feature for clarity and organization.
Promises have always had their quirks, but one of the most frustrating issues becomes apparent when you want to run multiple promises at once using Promise .all.
Normally it works great for waiting till all the promises have been completed successfully. However, if one of them fails, then the Promise.all call completes early with an error.
Obviously, this is no good in a lot of real-world scenarios. What if the site could still run without that failed call? Alternatively, what if multiple calls failed and you want to know which ones instead of just the first one. This is where Promise.allSettled() comes into the picture. In this context, a promise is considered “settled” once it returns regardless of status. So the above error code would return:
As you can see, we now get a status value for each Promise. Personally I have run into this issue many times, and I am thrilled that in future updates, I will no longer need to work around this issue and can rely on the native API. I don’t see myself using Promise.all much after this at all, unless there is a really compelling reason to use a failure short circuit.
1. Optional Chaining
So to get around this error, you probably had to do something along the lines of this:
The basic rule is, If any of the values after a ? are null or undefined, then the statement will return null or undefined without throwing an error.
In this scenario, the user variable will be checked if it is null or undefined, followed by address, then finally it will return the value for street.
That was all done without having to copy and paste the same thing or create a bunch of temporary values! Now we can also take note that you don’t need to have the “?” operator at every level if you are confident that every user has an address but are concerned if user exists. Then you could use the following:
Also, since the statements will return null or undefined, you can optionally give default values using the || operator or the future null coalescing operator “??”.
I believe this feature will save every developer time and prevent a lot of unnecessary errors. Although simple, this feature is by far the one I see myself taking advantage of the most out of all the future proposals.
If any of these features seemed interesting, make sure to check out the tc39 GitHub where you can look through detailed explanations of all these future proposals and see how you can try them out now!
All right, that wraps up the list of my top 5 most anticipated features for ES2020, what do you guys think? Are there any features you think should have made it into the list? What’s your favorite feature, let us know in the comments below! Thanks for reading!