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.

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 is the flat() function. This creates a new array and flattens the nested 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

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Learn More

The Complete JavaScript Course 2019: Build Real Projects!

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

JavaScript Bootcamp - Build Real World Applications

The Web Developer Bootcamp

What JavaScript Framework You Should Learn to Get a Job in 2019?

10 JavaScript Charting Libraries for Every Data Visualization Need

18+ JavaScript Libraries for Creating Beautiful Charts

3 JavaScript libraries to replace jQuery

Prototype-based Inheritance and Prototype chain in JavaScript (ES5)

A Beginner’s Guide to JavaScript’s Prototype

What is prototype in Javascript?

Best JavaScript Frameworks, Libraries and Tools to Use in 2019