It’s 2019 and there are a bunch of Javascript features that are approved by the TC39 committee and soon will become part of the Javascript standard. And ES10 is short for the ECMAScript 10th edition. If you think it’s the next version of ES9 then well, you’re correct. Q: But what is ECMAScript anyway? A: It is a scripting language, specification standardized by Ecma International. It’s the language spec that Javascript is based on. In other words, Javascript is just an implementation of this spec.
What Is ECMAScript (ES2019)?
There are other implementations out there, but by far, Javascript is the most popular.
Q: But why do they have to come up with that?
A: As you know, there are a lot of browsers out there. Each has its own Javascript Engine for executing JavaScript code. For example: With Microsoft Edge, we have Chakra, with Firefox we have SpiderMonkey and with Chrome we have V8. If each of them has its own way to run Javascript code then it will be really messy. One website might be working perfectly in this Chrome but completely broken in Microsoft Edge. At the end of this article, we will show you how to always be well informed and up to date about all the newest Javascript features. Let’s start reading.
Recommended read: Best Javascript Tutorial for Beginners
The 5 Latest ECMAScript Features
So let’s check them out by taking a look at some of the new features of ES10.
1. Array.flatMap()
This method is quite similar to the ES6 map method with a little extra work. Don’t be confused with another very similar method .flatten() which basically flattens array by given depth (if you use Underscore, you’ve already familiar with this method). This method combines map and flat and allows you to map through the item of the array. First, it will try to map every element of the array using the old mapping function. After that, it flattens the returned result into a brand new array which is quite useful in some cases. For example:
2. Object.fromEntries()
It will map or transform key-value pairs into a new object. It only accepts the iterable data structure as the input. Let’s say we have an array of entries, it’s pairs of key and value as arrays. When you call this new method, it will make an object from that given array. Before all of this, we only have Object.entries() that do the opposite of what would take the object and return the array of key-value pairs. For example:
3. Optional Catch Binding
It allows us to use try and catch without having supplied the error parameter within the catch block. Before ES10, we use to write code like this: You have some try/catch statement, and let’s say you don’t want to catch the error or you don’t care what kind of error that you’re getting there. You could see that the error parameter here is required. In the previous version, it doesn’t really matter where you use this param or not, it will always be needed. It seems nice at first glance but it’s also quite controversial. We would recommend you research deeper on some related posts but since it’s out of scope for this article, we will keep it simple. However, with ES10, we could be more flexible by writing code like this with try/catch: As you can see, there is not a single parameter on the catch method. It makes sense when you know you’re not going to use the exception object.
4. String.trimStart() & String.trimEnd()
Strings also got some makeover. As you might guess, trimStart() will remove any white space from the beginning of a given string. For example, we have a string with a bunch of white spaces at the beginning: The trimEnd() does the same thing but at the end of our string. Having the two methods will be extremely helpful when you deal with string. You might use them to remove a string from inputting data from the client such as email, username, or name.
5. Function.toString()
You can tell from reading the method name that it will return the whole function as a string. In other words, it will give you the source code of that function or representation of it.
When possible, it could read your source code, otherwise, it will return some “placeholder”. The idea is that this “placeholder” should not be evaluable. So if you try to make this “placeholder” to behave like a real function by calling it or passing arguments to it, it will return a syntax error. In the future, you could not guarantee that this “placeholder” wouldn’t become syntactically valid in some coming versions of Javascript. Also, please keep in mind that white spaces or newlines, or event comments will not appear in the result. In real-world scenarios, we might rarely have to use that, but it would add more power for us as developers for debugging purposes.
Always Stay Up to Date with Javascript
Q: There are a lot of new features and many more will be coming in the future. So how are we going to keep ourselves up to date in this changing world?
A: There is a TC39 ECMAScript proposals repository on Github. TC39 is a committee responsible for Javascript evolution. In this repo, you will find the document for the ECMAScript proposals in 4 stages starting from stage 0 which is a strawman.
When a proposal gets some illustrative example and gets some high-level API to describe, it can transition to stage 1. At stage 1, it’s actually a proposal. Then proposal transitions to stage 2 where it has to have the least initial text spec. In stage 3, it’s already a candidate and its spec should be completed, reviewed, and approved. Finally, stage 4 is the finished line. If a proposal gets to this stage, it means that it will be included in the next edition of the next ECMAScript standard. Just check out the repo from time to time, read the proposals, and be on the bleeding edge of Javascript!
We at Designveloper hope you can find out what is ECMAScript in this article! Besides update the 5 latest ECMAScript Features for your work!
Also published on
Share post on
