ECMAScript 8 (ES8) or ECMAScript 7 (ES7) was officially released the last year-end of June by TC39 (what is TC39? Technical Committee 39 which is the official committee for the evolution of Javascript. This committee conducts meeting regularly and usually the members are browser vendors ). Now the standard is to publish new specifications once a year. ES5 was published in 2009 and after that, the major release was ES6 in 2015, ES7 in 2016, Es8 in 2017, Es9 in 2018, Es10 in 2019.
Es7, Es8, Es9, and Es10 Features: In this article, you will learn how to utilize all the new features of the JavaScript ES7, ES8, ES9, and ES10 have to offer with examples:
Class Properties : You can initialize the class properties outside of constructor!
Example:
class Animal {
constructor() {
this.name = "Lion"
}
age = 0;
}
That will be complied to:
class Animal {
constructor() {
this.age = 0;
this.name = "Lion";
}
}
Especially react developers can relate easily state! and initialProps!:
class Animal {
constructor() {
this.name = "Lion"
}
age = 0;
state = {
}
initialProps = {
}
}
BabelJs.IO can be used for testing all the new features of ECMA, you can configure presets and test. Here is an example run in babeljs.io Example
ES7 ES8 Features
Yes, in the same way, you can use in Javascript now!.
string.padEnd() and string.padStart() functions: This is just a way to add extra characters to the end or to the beginning of a string.
string.padStart() The padStart() method pads the current string with another string (repeated, if needed) so that the resulting string reaches the given length. The padding is applied from the start (left) of the current string.
Example:
ES7 ES8 Features
string.padEnd(): The padEnd() method pads the current string with a given string (repeated, if needed) so that the resulting string reaches a given length. The padding is applied from the end (right) of the current string.
For example :
ES7 ES8 Features
Exponential Operator: The exponentiation operator returns the result of raising the first operand to the power second operand. Exponentiation operator is right-associative. a b c is equal to a (b c).
Example:
ES7 ES8 Features
Trailing comma: Trailing comma is allowed in an array, object and function parameters. Now, this isn’t huge but it’s nice if in case we forget to close off or rather end a comma if we’re listing a bunch of items it doesn’t matter if we include that final extra one.
Example:
var list = [
"one",
"two",
"three", // It is valid
]
var obj = {
one: "1",
two: "2",
three: "3", // It is valid
}
function add(
one,
two,
three, // It is valid
) {
} Object.values() and Object.entries(): This is a way to treat our objects kind of like dictionaries where in which we can get the parameter names and the actual or rather the field names and the actual values associated with them by either values or entries respectively.
Object.values() You are familiar with Object.keys(). This is exactly opposite of Object.keys().
Example:
var fruits = {
apple: 10,
orange: 20,
grapes: 30,
pineapple: 40
}
var totalVegetables = Object.values(fruits).reduce((a, b) => a + b);
console.log(totalVegetables); Output: 100
Object.entries() Object.entries() the method returns an array of a given object’s own enumerable property [key, value] pairs.
Example :
var fruits = {
apple: 10,
orange: 20,
grapes: 30,
pineapple: 40
}
for (var [key, val] of Object.entries(fruits)) {
console.log(key, val);
} Output:
apple 10 orange 20 grapes 30 pineapple 40
array.prototype.includes() This is just yet another array function it is way juiced to just determine if an array contains a value.
Async Functions In es8 we have asynchronous functions, this is again a massive new feature. Asynchronous functions are functions that do not work one after the other that would be synchronous instead they work in parallel and allow us to execute multiple functions all at the same time.
object.getOwnPropertyDescriptors() As a way to print out a big string description of an object in all of its entities.
ES9 Features:
RegEx changes So this is regular expression changes, to be honest, I personally don’t like using regular expressions when possible and I found actually don’t have to use them too much so we won’t really be covering the regular expressions changes so much however if you are super interested you can definitely check those out ES9 has added a bunch of support.
Rest/Spread properties these are really cool they allow us to essentially build up ranges of values through using three ellipses put together this allows the compiler to interpret what values come next in a series of values.
Asynchronous iteration that’s actually the last big one and just lends more powerful support to our asynchronous functionality.
ES10 Features: So Chrome version 72 just rolled out, some new exciting ES10 that is ES 2019 features into its browser for developers to use so let’s take a look at what new features do we have in ES10 to look for.
Array.flat() starting off with flat() and flatmap(), so if you have an array like in below image, this you could see you could just console.log this and you have a bunch of nested arrays.
So if you want to flatten this whole array you have to use recursion or you know you have to do something using some sort of algorithm well.
Fortunately now JavaScript provides it by default by making use of .flat() which would recursively flatten your array up to the level you specify. So, flat().
Just specify levels, it flattens it to one level if you do it twice it would flatten it to two levels.
If you want to flatten the whole array you could pretty much just pass an infinity and it will flatten your whole array from nested arrays to a cleaner way.
Array.flatmap() Similarly, we do have flatmap() which works pretty much just like a map if you do map X and return let’s say (x, x*2) if you console.log your result you’re gonna see that you get an array which looks something like shown in the below image nested.
but if you’re gonna make you the flatmap() there, you didn’t get a nice flatten array for your result.
object.fromentries() coming to number two we have object.fromentries() which basically you know from object dot entries we could go ahead and create these nice little key-value pairs of arrays of key-value right but now you could just go ahead and get your original
object back from this particular array by using object of form entries and if you can’t lock your object original object you’re gonna see that we get our key-value object back to us.
String.trimstart() and String.trimend() Again this brings us to our number three which is our .trimstart() and .trimend(). So if you have a string which has long spaces you could just go ahead and do
console.log(string.trimstart()) and hit save.
They’re gonna see actually let’s just json dot stringify this so that we are able to see the spaces so you see only are backspaces remain similarly if you have trim end right here you’re gonna see only your front spaces remain and if you just have trim right here you’re gonna see all your spaces are gone
Optional catch binding This brings us to our optional binding for try-catch that pretty much means now you’re not constrained to give catch an error right here if you don’t want it so if you throw a new error here right you could pretty much access it right there using error.
But if somehow you do not want it you’re free to just go ahead and make use of something like hey something went wrong right so this is completely fine.
toString() ES9 also revises the function.toString() method so if you have a
function my function here and if you do console dot log of my function the two string what you’re gonna see is your original source code of that particular function earlier these white spaces these new lines if you had any commands here these would be removed when you do console.log my function door to string but now they are retained and you pretty much get back your original source code of the function which you have written.
sym.description Coming back to the next proposal that is symbol description getter. So recently earlier what you have to do is if you want to compare a symbol you have to convert it into a string and then compare it by a symbol and then whatever your description was right?
Because if you take a look to add the symbol right there you can see that it basically just a symbol. But now what you could do is access the symbol description with the sym.description and you could check that if this is equal to your description which was originally passed.
Looking for Free Budget Estimation Report for ReactJs Development Services ?