New Feature of ECMAScript 2019 ES10

Posted By :Arun Singh |29th September 2019

                                                                                                


Object.formEntries()

This method convert Map or Array object list key value pairs into an object.
Examples

var obj = { key1: 'val1', key2: 'val2', key3: 'val3' }   var entries = Object.entries(obj); //[ ['key1', 'val1'], ['key2', 'val2'], ['key3', 'val3'] ] var fromEntries = Object.fromEntries(entries) //{ key1: 'val1', key2: 'val2', key3: 'val3' }   var entries = new Map([['name','arun'],['age',25]]); Object.fromEntries(entries); //{name:'arun', age:25}

String.trimStart() & String.trimEnd() 

The String.trimStart() method remove white-spaces from beginning of a string.
The String.trimEnd() method remove white-spaces from end of a string.
Example

var str = '   Hello World    '; console.log(JSON.stringify(str.trimEnd()); //'   Hello World' console.log(JSON.stringify(str.trimStart()); //'Hello World    '

Optional Catch Binding 

ES10 allow developer to use try/catch without unnecessary binding. Now you can make use of catch block without a param.
Example

try{ throw new Error('some error'); } catch { console.log('no params for catch'); }

Function.toString() 

This toString() method returns as it is Function source code without removing whitespace and new Line.
Earlier When you call toString() method after function it returns source code after remove whitespace and new line from source code. 
Example

function sayHello(text){ var name = text; //console.log(name) console.log(`Hello ${name}`); } console.log(sayHello.toString()) //function sayHello(text){ // var name = text; // //console.log(name) // console.log(`Hello ${name}`); //}

Array.Flat() 

This flat() method convert into new array with all sub-array items concatenated into repeatedly up to specific depth.
Example

var arr = [1,2,3,[4,5,6,[7,8,9,[10,11,12]]; arr.flat() // [1,2,3,4,5,6,Array(4)] arr.flat().flat() //[1,2,3,4,5,6,7,8,9,Array(3)] arr.flat().flat().flat() //[1,2,3,4,5,6,7,8,9,10,11,12] arr.flat(Infinity) //[1,2,3,4,5,6,7,8,9,10,11,12]

Array.flatMap() 

flatMap() method first used map for each element which using a mapping function, then flattens convert the results into new array. 
Example

var arr = [1,2,3,4,5] arr.map(x= [x,x*2]) //[Array(2), Array(2), Array(2),] arr.flatMap(v=>[v,v*2]) //[1,2,2,4,3,6,4,8,5,10]

Array.Sort Stability 

Same rating users retain their sorting orders.
Example

var users= [ {name:'arun', rating:14}, {name:'jack', rating:14}, {name:'jhon', rating:14}, {name:'mathew', rating:13}, {name:'kaish', rating:13}, {name:'kunti', rating:13}, {name:'crew', rating:13}, {name:'henry', rating:12}, {name:'dabew', rating:12}, {name:'kumar', rating:12}, {name:'rocky', rating:12}, {name:'tony', rating:11}, {name:'kohli', rating:11}, {name:'ksab', rating:11}, ] users.sort((a,b)=>a.rating - b.rating)

Before Chrome V8 enginge used an unstable QuickSort for arrays with more than 10 elements. Now V8 chrome 70v uses the stable TimSort algorithm.

string.prototype.matchAll()

Before we used string.match with string arguments only returns the first  match element.

let string = “Hello”; let matches = string.match(“l”); console.log(matches[0]); // 'l'

Now we can see result not stored in matches, it stored in matches[0] and 'l' is returned from search for 'l' in the word 'hello'. 
Now let's try search 'l' character in 'hello' word  using regulra expression /l/.

let string = 'Hello'; let matches = string.match(/l/); console.log(matches[0]); // 'l'

Add /g 
String.match() with regular expression and the /g flag does return multiples matches.

let string = 'Hello'; let ret = string.match(/l/g); // (2) [“l”, “l”];

Its multiple matches with regular expression and the /g problem is solved in ES10.
Before we start matchAll function in more detail, let's take a look at capture groups.

Regular Expression Capture Groups
Capture group in regex is easly extracting a pattern from parenthesis (). We can captur groups with /regex/.exec(any string) and with string.match. Regular expression capture group is created by wrapping pattern.
Example string specimen to match: 

Here match.group.color and match.group.bird are created. const string = 'black*raven lime*parrot white*seagull'; const regex = /(?<color>.*?)\*(?<bird>[a-z0-9]+)/g; while (match = regex.exec(string)) {    let value = match[0];    let index = match.index;    let input = match.input;    console.log(`${value} at ${index} with '${input}'`);    console.log(match.groups.color);    console.log(match.groups.bird); } regex.exec method need to be called every time to walk entire set of the search results. Console.Output black*raven at 0 with 'black*raven lime*parrot white*seagull' black raven lime*parrot at 11 with 'black*raven lime*parrot white*seagull' lime parrot white*seagull at 23 with 'black*raven lime*parrot white*seagull' white seagull

How does .matchAll() work
Simple case
Let's try to match all instances of the letters 'e' and 'l' in the word hello. . Because an iterator is returned we can walk it with a for…of loop:
Example 

// Match all occurrences of the letters: 'e' or 'l' let iterator = 'hello'.matchAll(/[el]/); for (const match of iterator)    console.log(match); Now you can skip /g this time it's not required by .matchAll method. [ 'e', index: 1, input: 'hello' ] // Iteration 1 [ 'l', index: 2, input: 'hello' ] // Iteration 2 [ 'l', index: 3, input: 'hello' ] // Iteration 3

Thanks for reading!


About Author

Arun Singh

Arun is a MEAN stack developer. He has a fastest and efficient way of problem solving techniques. He is very good in JavaScript and also have a little bit knowledge of Java and Python.

Request For Proposal

[contact-form-7 404 "Not Found"]

Ready to innovate ? Let's get in touch

Chat With Us