Javascript ES2019 Features
Let us taste some of the laddoos about es10 features 😃
In the 2019 edition of the ECMAScript specification, I saw some of the addition of many new features, and here I’ll cover some of these new features. I personally love how javaScript keeps evolving and improving on a regular basis.
1. flat()
flat() is a method that is used to flatten the array. There are some situations and conditions that the elements of an array are array inside that an array and so on... These types of arrays are called nested arrays.
Before es10, if we want to flatten this nested array we have to use some recursion concept. Now with the help of the flat() method, we can able to flat this array with the specified depth values.
Syntax — let arr = arr.flat([depth])
Returns — flattened array
Excited about this feature!. Let’s jump right into our code editor to see more about it.
Example:
let arr = ["a", ["b", "c", ["d", "e", ["f", "g"]]]]console.log(arr.flat(3))
In the above example, the array is of depth 3. To flatten this nested array, we can make use of the flat() method. The output will be as,
Suppose, if we put the depth as ‘2’, the output will be as
2. flatMap()
flatMap() is used to flatten the nested array and to change the values according to a function as a map() function. This function works on an array and takes a callback as an argument. The callback dictates how the array has to be flattened. It works just like a map, but in addition, it also flattens it.
flatMap() can be used to flatten an array of depth of 1 only.
Syntax — let array = arr.flatMap(callback(value))
Returns — A flattened array with manipulated values, Just like a map.
map()+flat()=flatmap()
Let us see some code samples of flatMap()
Example:
let arr = [1, 2, 3, 4]console.log("map", arr.map(x => [x * 2]))console.log("flatMap", arr.flatMap(x => [x * 2]))
In this example, map and flatMap are shown to differentiate these two functions. map() returns an array of arrays that contained the values, while the output of flatMap() was the same as the map, in addition to the flattening of the array.
3. Object.fromEntries()
Another very helpful method of es10 is Object.fromEntries(). This Object.fromEntries() is used to form the objects with the provided key-value pair. It takes a list of key-value pairs and returns an object and those values are given by the entries. It functions just as opposite to Object.entries().
Parameter — an array of key-value pairs
Returns — It returns an object with the given key-value pairs.
Example:
const myEntries = new Map([['frontEnd', 'ReactJS'],['backEnd', 'NodeJS']])const myObj = Object.fromEntries(myEntries)console.log("myObj", myObj)
Output:
4. trimStart()
The trimStart() method removes whitespace from the beginning of a string.
Syntax — str.trimStart()
Returns — It returns a string with the white spaces from the front.
Example:
let str = " Hello World! "console.log(str.trimStart())
Output:
5. trimEnd()
The trimEnd() method removes whitespace from the end of a string.
Syntax — str.trimEnd()
Returns — It returns a string with the white spaces from the end.
Example:
let str = " Hello World! "console.log(str.trimEnd())
Output:
please note the difference in the output of trim start and trim end. trimStart() will remove whitespace from the beginning of the string whereas, in the case of trimEnd(), the whitespace remains the same at the beginning of the string, only at the end it gets removed.
6. Symbol Description
When we create a Symbol in JS, it is possible to specify a description that can be used for debugging later. The process of getting back this description is a bit tedious. We have to re-construct the Symbol again and with the help of the toString() method to access the description.
ES10 adds a new read-only property known as description, which returns the description of the Symbol.
Example:
const symbol = Symbol("Hello, This is my new symbol!")console.log(symbol.toString())console.log(symbol.description)
In the example mentioned, we can directly get the description of the symbol using the .description property of the Symbol.
Wrap up
These were some of the features that are introduced in the ES10 standard. I hope you enjoyed the article!. If you have enjoyed don’t forget to 👏. Will see you all soon in the next article.
