ES10-ES2019 New Features For JavaScript Developers

es10_new_features

JavaScript has become the fastest growing programming language in programming history. JavaScript has come out from the traditional browser DOM after the introduction of NodeJS in 2012 from then JavaScript has proved itself in every aspect of programming let be Web, Mobile or Desktop applications. in this post, I am going to discuss some cool new features introduced in JavaScript with the release of Google’s Chrome browser version 72 and ES10 or Ecmascript2019.

1. flat() function for JavaScript arrays

This is the coolest feature for Array introduced in ES10. If you have an array like this,

const myArray = [1,2,3,[4, 5, 6, 7, [8, 9, 10, ], 11, [12, 13]]];

If you want to make a simple array out the multidimensional array like above, in other words, you want to flat out the above array into a single array then you have to some kind of algorithm with loops to achieve that, but fortunately ES10 has come to rescue. Now you can flat out any multidimensional array without any worry like this,

const myArray = [1,2,3,[4, 5, 6, 7, [8, 9, 10, ], 11, [12, 13]]];

console.log(myArray.flat());
Output :
Array.flat() method

array.flat() method output

By default, the flat() method only flattens the array up to one level as you can see in the output but you can specify the depth of the array till you want to flatten out the array or you can chain the flat() like this,

const myArray = [1,2,3,[4, 5, 6, 7, [8, 9, 10, ], 11, [12, 13]]];
console.log(myArray.flat().flat().flat());
Output :
chained_flat_method

Chained flat() method

Noy if you want to just flatten out the whole array without chaining the flat() method, you could just pass Infinity parameter to the flat() method it will flatten out your whole array.

const myArray = [1,2,3,[4, 5, 6, 7, [8, 9, 10, ], 11, [12, 13]]];

console.log(myArray.flat(Infinity));

// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]

BONUS TIP :

You can also remove any empty slots in the array using the flat() method.

var arr = [1, 2, , 4, 5];
arr.flat();
// [1, 2, 4, 5]

2. flatMap() method.

This method can come in handy you want to map out an array but you don’t want to get the nested array, you can use the flatMap() method to flatten out the array. Let’s look at the definition of flatMap() array,

The flatMap() method first maps each element using a mapping function, then flattens the result into a new array. It is identical to a map followed by a flat of depth 1, but flatMap is often quite useful, as merging both into one method is slightly more efficient.

MDN Web Docs

Let’s try to make use of this method. Assume that you have an array like this,

const arr = [1, 2, 3, 4];

Now you want to make an array out that array which contains every next element is square of the previous element. For example, if the first element is 2 then the next element must be the 4 .i.e square of 2.  If you use map() achive like this,

const arr = [1, 2, 3, 4];
const newArr = arr.map(x => [x, x**2]);
console.log(newArr);

Output :

flatMap_method

flatMap() method demo

But, you don’t want the nested array, you can use the flatMap() method to easily achieve that,

const arr = [1, 2, 3, 4];

const newArr = arr.flatMap(x => [x, x**2]);

console.log(newArr);

//[1, 1, 2, 4, 3, 9, 4, 16]

 

3. Object.fromEntries() method.

This is another interesting feature introduced in the ES10. You might be familiar with the Object.fromEntries() which converts an object of key-value pairs into an array. Let’s see it in action,

const myObject = {
    k1: 'v1',
    k2: 'v2',
    k3: 'v3',
    k4: 'v4'
};

const entries = Object.entries(myObject);
console.log(entries);
// [ [ 'k1', 'v1' ], [ 'k2', 'v2' ], [ 'k3', 'v3' ], [ 'k4', 'v4' ] ]

Now if you wanted to convert that array into an object before ES10 you would have to use map() method do that, but now you can easily that with single line code using the Object.fromEntries() method.

const myObject = {
    k1: 'v1',
    k2: 'v2',
    k3: 'v3',
    k4: 'v4'
};

const entries = Object.entries(myObject);

const originalObject = Object.fromEntries(entries);

console.log(originalObject);

// Object { k1: "v1", k2: "v2", k3: "v3", k4: "v4" }
As of writing this post Object.fromEntries() has not been standardized in all the browsers and it is currently supported in the Firefox browser version 63. You can go to this link to check in which browsers you get this support for the future.

MDN Browser Compatibility Check

4. trimStart() and trimEnd() methods.

To remove any spaces inside a string you had only one method trim() which removes any extra spaces from both the end of a string but you have a case where you on;y want to remove the space from the start or from the end you could not do that easily. Now you can use the trimStart() or trimEnd()  to remove spaces from either sides of a string.

const str = "   too many spaces   ";

// Stringify the string to actually see the spaces
console.log(JSON.stringify(str.trimStart())); // removes spaces from the start

console.log(JSON.stringify(str.trimEnd())); // removes spaces from the end

// "too many spaces   "
// "   too many spaces"

5. Optional binding for try/catch.

When you use try/catch in JavaScript if you throw an error inside the try block then you have to catch that error in the catch block and you could access the error there but somehow you do not want that you can just print any message on the console and you are good to go,

try {
    throw Error('Some nasty error occured!');
} catch {
    console.log('Errorrrrrr!!!');
}

// Output -  Errorrrrrr!!!

6. toString() method for JavaScript functions.

When you call the toString() method on a function is used to return the string representation of source code of that function but it also removes any white spaces and comments in the source code. ES10 has revised this method and now you can get the exact source code of the function on which the method is invoked.

function myFun() {
    // This is a comment....
}

console.log(myFun.toString());

// Output 
// function myFun() {
//     // This is a comment....
// }

7. Symbol.description getter in ES10.

Earlier when you want to compare the two Symbol you have to convert that into a string and pass the description to the string to compare it like this,

const desc = 'my symbol';
const sym = Symbol(desc);

console.log(String(sym) == `Symbol(${desc})`);

// true

Now in ES10 you can get the description of the symbol and check if it is the same description originally passed to it like this,

const desc = 'my symbol';
const sym = Symbol(desc);

console.log(sym.description == desc);

// true
As of writing this post Symbol.description has not been supported by Nodejs version v10.15.0. You can go to this link to check compatibility for the future.

MDN Compatibility Check

Tell me which feature did you like the most and your views on these ES10 new features in the comment box…

 

Happy Coding….:)

 

 

Ropali Munshi
Ropali Munshi
Ropali Munshi is fullstack PHP Developer. He is passionate developer who loves to learn and expirement with new programming languages , libraries and frameworks. Nowdays he is more into the JavaScript realm.

Leave a Reply

Your email address will not be published. Required fields are marked *

You Don't Want To Miss It!

Please subscribe to our newsletter. Every week I share tips, tricks, tutorials, free books & video course directly in your inbox.