Javascript New Features | ES8(ECMA 2017) features
In my previous story, we have gone through ES7 features and NodeJs compatibility. Now, It’s time to look at ES8 features. So, lets embark exploring es8 features.
New features
As Javascript growing ES8 is definitely plays a key role to make it as a game changer. Lets go through new features introduced in
Object.values
Object.entries
String.prototype.padStart
String.prototype.padEnd
Trailing commas in the function parameters
async/await
Object.getOwnPropertyDescriptors
Object.values
The Object.values method returns the enumerable values of given object as an array. See the behaviour of this method below.
Object.values({name: 'Amar', email: 'xyz@gmail.com', phone: '9848986525'}); // ['Amar', 'xyz@gmail.com', '9848986525']Object.values([2, 3, 19, 'Computers']). // [2, 3, 19, "Computers"]Object.values({name: 'Amar', money: [200, 300, '$']}) // ['Amar', [200, 300, '$']]Object.values(NaN); // []Object.values(null); // Throws an error Object.values(undefined) //Throws an error // Uncaught TypeError: Cannot convert undefined or null to objectObject.values(function() { }). // []
Object.entries
This method returns an enumerable array of key and value pairs like [key, value]` same as for...in` loop.
The behaviour of Object.entries is
const obj = {'name': 'Amar', 'email': 'amar@gmail.com'};Example 1:
console.log(Object.entries(obj));
Output: [['name', 'Amar'], ['email', 'amar@gmail.com']]Example 2:
for(const [key, value] of Object.entries(obj)){
console.log(`${key}: ${value}`);
}
Output:
name: Amar
email: amar@gmail.comExample:3
const obj1 = {id:1, name: 'Amar', prices: [23,24,25, '$']};
for(const [key, value] of Object.entries(obj1)) {
console.log(`${key}: ${value}`)
}Output:
id: 1
name: Amar
prices: 23,24,25,$
String.prototype.padStart
This method allows to padding at the starting of the string multiple times until it reaches to the given length
For instance
const str = '5';
console.log(str.padStart(5, 0)); // '00005'const str = 5;
console.log(str.padStart(5, 0)); // Uncaught TypeError: str.padStart is not a functionconst str1 = null;
console.log(str1.padStart(5, 0)); // Uncaught TypeError: Cannot read property 'padStart' of nulllet num = NaN;
console.log(Number.padStart(5, 0)); // Uncaught TypeError: Number.padStart is not a function
String.prototype.padEnd
This method allows to add padding at the end of the string until it reaches to the given length. Let’s see the behaviour of this method
const str1 = '5';
console.log(str1.padEnd(5, 0)); // '50000'Trailing commas in function parameter list
Trailing commas or final commas are functional while adding new elements parameters and properties in Javascript. ECMA 2017 (ES8) allows trailing commas to function parameter list and function calls. So, Let’s crack how to use this.
function sum(a, b,) {
// Write some code here
}(a,b,) => { } // Valid
Now, trailing commas with class methods
class Formulas { sum(a,b,) {
return a+b;
} multiply(a,b,) {
return a*b;
}
}
Usually, trailing commas used to add new property in a new line without modifying the existing line. But, ES8 supports add trailing commas in function parameters too. To know more trailing commas then you guys can refer this link. You can go through plenty of examples given in the link to understand the main use case of trailing commas in Javascript.
Async functions (async and await)
This feature is a game changer to deal with asynchronous functions and methods. This method introduced a pretty new of handling promises. Here, the behaviour of async and await functions.
function getAsyncContent() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hi! How are you ?');
}, 3000);
});
}async function getData(){
const result = await getAsyncContent();
console.log(result); //Hi! How are you ? (After three seconds)
}//Here, the code without using async/await function getData(){
getAsyncContent
.then(result => console.log(result))
.catch(error => console.log(error));
}//IIFE(Immediately Invoked Function Expression) with async/await(async () => {
const result = await getAsyncContent();
console.log(result); // Hi! How are you ? (After 3 seconds)
})();Note: 1) We can use async/await to write unit test cases by using MochaJs, JEST etc.
NodeJs compatibility
Async/Await is a striking change to the Javascript world as it avoid promise callback hell completely.
Object.getOwnPropertyDescriptors
This method returns property descriptors of own properties.
For instance
const object1 = {
property1: 42
};const descriptors1 = Object.getOwnPropertyDescriptors(object1);
console.log(descriptors1);
//Output: {property1: {writable: true, readable: true, value: 42, enumerable}}Note: If the writable is false then we can not replace the value of that key in the object
In case, the purpose of writable, readable and enumerable are not known then please update in comments then we can publish a separate article for this.
NodeJs Compatibility
All ES8 features started supporting from version 8.2.1. To be more specific feature support in NodeJs see below.
Object.values — v7.5.0
Object.entries — v7.5.0
String.prototype.padStart — v8.2.1
String.prototype.padEnd — v8.2.1
Trailing commas in parameters — v8.2.1
Async functions — v7.10.1
Object.getOwnPropertyDescriptors— v7.5.0
As we shown these are main features that ECMA introduced in ES8 version. This is one of the watermark version with its amazing features such as async/await after ES6. Our main focus on this article is about ES8. That’s the reason I could not cover much information about trailing commas use cases, holes in arrays, iterator behaviour with holes in the array. Please mention in comments if you are really interested to know deep details about trailing commas then I will publish a separate article on this topic. Our next article on ES9 will be published soon.
