New ES2019 Features Every JavaScript Developer Should Know

New ES2019 Features Every JavaScript Developer Should Know

In this post, I am going to give you a briefing on some of the cool new features that have been added to the latest ES10/ES2019 standards.

In this post, I am going to give you a briefing on some of the cool new features that have been added to the latest ES10/ES2019 standards.

It’s 2019, and there are some brand new features in the latest *JavaScript *standards. *JavaScript *has come a long way over the years, becoming the most popular language in the world.

Let’s take a look at the new features that were approved by the *TC39 *committee this year.

Array.prototype.flat()

The new addition to the array **[prototype ](https://morioh.com/p/64c45cd0d7a9/a-beginner-s-guide-to-javascript-s-prototype "prototype ")is the *flat() *function. This creates a new [array ](https://morioh.com/p/3ba421a8a63d/top-10-javascript-array-methods-you-should-know "array ")and flattens the nested [array ](https://morioh.com/p/c636e38e9aeb/4-uses-of-javascript-s-array-map-you-should-know "array **")by the given depth. Let’s take a look at a sample on how it works.

const users = [["Adam", 1"], ["Jones", "2"], ["John", "3"]]; const flatUsers = users.flat(); console.log(flatUsers); // ["Adam", "1", "Jones", "2", "John", "3"];

By default, the flattening value is 1. By passing Infinity as a parameter inside the flat() it will run infinite times recursively and flattens the *array *into one single array. This is a very useful addition to the Array prototype. Instead of looking for other libraries, we can now just use the flat() method from the Array.Prototype directly to flatten a nested array.

Array.prototype.flatMap()

Here is another thing you can do with arrays in ES2019. This method is a combination of the *flat *and map methods. It allows you to map through an array of items and flatten the result in one pass. It is the same as using a *map *function followed by a flat with a depth of 1. Combining them together into its own single method is quite useful.

let myArray = [1,2,3,4] myArray.flatMap(x => [x, x+2]) console.log(myArray) //[1, 3, 2, 4, 3, 5, 4, 6]

Notice here that the result is an one dimensional array.

String.prototype.trimStart() or trimEnd()

Before ES2019 **we already had the *trim()* function. It removes blank spaces in a string. Now the new addition is the *trimStart() *and the *trimEnd()*** functions, that help you choose which part of the string needs to be trimmed. This is a very cool addition for string manipulation operations.

const mySample = " Hey There "; console.log(mySample.trimStart()); // "Hey There "; console.log(mySample.trimEnd()); // " Hey There"; 

Object.fromEntries()

The *fromEntries() *method, will transform a list of key-value pairs into an object. The *Object.entries() *function, that we already have converts an object, into key-value pairs. Now the *Object.fromEntries() *does the exact reverse. Let’s take a look at an example with a user-id pair.

const user = [ ["1", "Adam"], ["2", "Jones"], ["3", "John"], ["4", "Smith"] ]; const userObject = Object.fromEntries(user); console.log(userObject); // { // "1": "Adam", // "2": "Jones", // "3": "John", // "4": "Smith" // };

Catch Error Binding is Optional

I personally like this addition. But it is a controversial one since alot of developers don’t think this is a good idea. Nevertheless, in ES2019 the *catch *error binding is optional.

Before ES2019 the error parameter in the catch was required.

try { throw "Some error"; } catch (error) { // Error handling logic }

In ES2019 you can omit the error parameter if you don’t need it.

try { throw "Some error"; } catch { // Some handling logic }

Stable Array.prototype.sort()

The previous implementation of *sort() *method for the array prototype, used the quick sort algorithm. This was an unstable solution.

With ES2019, a stable sorting algorithm has been implemented.

let users = [ { name: "Adam", rank: 4, }, { name: "Jones", rank: 3, }, { name: "Katie", rank: 3, }, { name: "Smith", rank: 2, }, { name: "Ben", rank: 2, }, { name: "Julie", rank: 1, }, { name: "Tyler", rank: 1, } ]; let my_sort = (a, b) => a.rank - b.rank; // Perform stable ES2019 sort: let sorted = users.sort(my_sort); console.log(sorted); //[ //    { name: "Adam", rank: 4 }, //    { name: "Jones", rank: 3 }, //    { name: "Katie", rank: 3 }, //    { name: "Ben", rank: 2 }, //    { name: "Smith", rank: 2 }, //    { name: "Julie", rank: 1 }, //    { name: "Tyler", rank: 1 } //]

Keep in mind that some of the features are still in the proposal stages and will be released only mid 2019. But it is good to know what is coming. If you are interested to learn more about all the new features in ES2019 proposal, checkout https://github.com/tc39

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.

Mobile App Development Company India | Ecommerce Web Development Company India

Best Mobile App Development Company India, WebClues Global is one of the leading web and mobile app development company. Our team offers complete IT solutions including Cross-Platform App Development, CMS & E-Commerce, and UI/UX Design.

For World Class Web Development Services in India visit RB Genie

Do you want excellent and world class web development services for your valuable projects? Contact **RB Genie **now, we have more than 8 years experienced team of web developers, which specializes in overall web design and website development...