Important Javascript ES8 Features

ES8

Javascript ES8 Features

In this blog, we will discuss the coolest new Javascript ES8 features. I will cover the one that you guys probably should know and things that you should use in your everyday javascript world. Almost all modern browsers support ES8. You can even view our ES9,  ES10 and ES11 for the latest update on EcmaScript.

Async/Await

It is often referred to as syntax sugar. Basically, we are not going to get new functionality but we are going to have different ways to write an Asynchronous Function that returns a Promise.

If a function return promise then we can await till Promise is resolved using Async/Await. Await is only Valid inside the async function. The await keyword is used with promises.

async function getAfter10Second(){
    await delay();
    console.log("After Delay!");
}

function delay(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log("Output After 10 Second");
            resolve();
        },10000)
    })
}
getAfter10Second();
Javascript ES8
Javascript ES8

In the above Example delay function is resolved after 10 Seconds so await operation wait for Promise to resolve. After Promise gets resolved “After Delay!” is Printed.

Object:entries() and values()

Object keys(), values() and entries() let you turn any object into an iterable object.

What is an Iterable Object?

In Arrays, you can step through an index But in Objects we have properties but there is no way to know which is the first element, second element and so on. There is no index on an object and there is no length property. Array, String, Maps, Sets etc are iterable objects because you can find the length and iterate using loops.

let detail = {
website : "InfoHubBlog",
type : "Tech"
}
console.log(Object.keys(details));  //OUTPUT: ["website", "type"]
console.log(Object.values(details)); //OUTPUT: ["InfoHubBlog", "Tech"]
console.log(Object.entries(detail)); //OUTPUT: [["website","InfoHubBlog"],["type","Tech"]]

In above example Object.keys() fetch all the key element of Object and turn into Array, Object.values() fetch all Property Value and turn into array and Object.entries() turn into Array of Array[Key,Value]. After converting into an array the element can be accessed using index hence now they are converted to Iterable Objects.

Object.getOwnPropertyDescriptors() :This method returns an object containing all own property descriptors of an object. It can return an empty object if no such property is associated with an object.

Trailing Commas

Trailing comma in javascript allows you to add a comma after the last element of the array. Javascript Compiler ignores the trailing comma.

Javascript ES8
Javascript ES8

ES8 allows you to add trailing comma in function parameter and function call.

function abc(a,b,){
console.log(a+" : "+b); //OUTPUT : 1 : 2
}
abc(1,2,);

Advantage of Trailing Comma

1. It enables to easily add elements to the last line. We can simply copy the last element and create a copy of that in the last line.

2. Git Comparison makes cleaner with final commas.

String Padding Method

If we want to add string to an existing string and return a new String then we can use padStart and padEnd.

string padStart(destinationLength,\[,padString\])
string padEnd(destinationLength,\[,padString\])

Parameter

  1. destinationLength: It must be greater than actual string length inorder to pad new string.
  2. padString: This is the string that need to be added to original String.
let str = "InfoHubBlog";
str=str.padStart(19,"Website ");
str=str.padEnd(27," Is Best");
console.log(str) //OUTPUT: "Website InfoHubBlog Is Best"

In Above Example in padStart, destinationLength Specified is 19 which is the sum of the length of str + length of padString. So Website got inserted at the beginning of str. In padEnd destinationLength Specified is 27 which is the sum of the length of str + “Website ” and padString. So Is Best got appended to String End.

Hope you like our Javascript ES8 Features blog. Please subscribe to our Blog for upcoming blogs.

Happy Coding!

Read more: Important ES9 Javascript Feature, Important Javascript ES10 FeaturesTop ES11 Features | JavascriptDifferent types of While For Loop Javascript ES6ECMAScript

Leave a comment

Your email address will not be published.


*