Important Javascript ES10 Features

1 QnhcYBM1I4reX 0PMo1vjw 1

In this blog, we will discuss the coolest new Javascript ES10 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 ES10.

Javascript ES10 Features

Array.flat()

It flattens the array by given depth. The default depth is 1. If you have used loadash or underscore then must be already familiar with this method. If you have a subarray present inside the array then it can be converted to a simple array by recursively calling Array.flat(). It decreases the depth of the array by 1.

let arr = [1,2,[3,4],[5,6,[7,8]]];
let flattenArray = arr.flat(); 
console.log(flattenArray); //OUTPUT: [1,2,3,4,5,6,[7,8]]
console.log(flattenArray.flat()); //OUTPUT: [1,2,3,4,5,6,7,8]

This method makes sure that you don’t have to use any external library for this simple task.

Array.flatMap()

You can guess from this name that this method is a combination of map and flat. It allows you to map through items of the array and then flatten the result in one go.

let arr = [1,2,3,4];
let word = ["one","two","three","four"];
arr.flatMap((el,index)=>[el,word[index]]) //OUTPUT:  [1, "one", 2, "two", 3, "three", 4, "four"]

String.trimLeft()

We can trim white spaces from the beginning or end of the string using trimRight() and trimLeft methods.

let str = "   InfoHubBlog is Technical Blog.     "
let trimRight = str.trimRight();
let trimLeft = str.trimLeft();
console.log(trimRight) //OUTPUT:"    InfoHubBlog is Technical Blog."
console.log(trimLeft) //OUTPUT:"InfoHubBlog is Technical Blog.  "

Object.fromEntries()

If you have an array of arrays with pair key and value then it can be converted to Object. Previously we have Object.entries() which does the opposite of this method i.e it takes an object and returns an array of arrays with pair key and value.

let arr = [[1,"one"],[2,"two"],[3,"three"],[4,"four"]]
let obj= Object.fromEntries(arr);
console.log(obj); //OUTPUT: {1: "one", 2: "two", 3: "three", 4: "four"}
let newarr = Object.entries(arr) 
console.log(newarr); //OUTPUT: [[1,"one"],[2,"two"],[3,"three"],[4,"four"]]

Optional catch binding

If you don’t want to bind error parameter to catch block. This has mainly two uses

  1. If you are not worried about error and want to completely ignore the error.
  2. If you have idea what error will be so you don’t want to react to it.
try{
throw new Error("Welcome");
}
catch{
console.log("ERROR!");
}
//OUTPUT: ERROR!

My recommendation will be to avoid doing this. At least log in the console them.

Function.toString()

This function was present before ES10 but earlier if there were white spaces, newline or comment in function then this would be removed when you use toString() on Function. Now they are retained and you will get the original source code of the function that you have written.

function /* ERROR */ Fun(){
}
console.log(Fun.toString()); 
javascript es10
OUTPUT

Symbol.description()

Earlier for the comparison symbol, you need to put the description in Symbol and the compare. Look at the below example.

let description = "InfoHubBlog";
let symb= Symbol(description);
console.log(String(symb) == `Symbol(${description})) //OUTPUT True

Now you can access using description key on the symbol.

let description = "InfoHubBlog";
let symb= Symbol(description);
console.log(symb.description == description) //OUTPUT True

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

Happy Coding!

Read more: Top ES11 Features | Javascript, Different types of While For Loop Javascript ES6Promises in JavaScript | 10 Minute | 2021Array Destructuring | Spread Operator | Rest Operator | JavascriptECMAScript

Leave a comment

Your email address will not be published.


*