Comments

New ES2019 JavaScript Features You Need To Learn

ES10

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. 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. 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

If you are a beginner to JavaScript, I highly recommend Mosh’s course on JavaScript.

Do share the article if you enjoyed it.

Adhithi Ravichandran is a Senior Software Engineer based in Kansas City. She is currently working on building mobile apps using React Native for critical healthcare scenarios. Adhithi is a regular conference speaker at various tech conferences. Adhithi graduated with a Masters degree in Computer Science from the University of Kansas and has been in the tech industry for over 7 years. She has worked on several technologies over the years, and one of her recent favorite is React Native.
Tags: , ,

3 responses to “New ES2019 JavaScript Features You Need To Learn”

  1. Kevin says:

    Title and description for the trimming function say trimStart() and trimEnd(), code example says trimLeft() and trimRight(). Which is the correct one?

  2. Joshua Deshazer says:

    awesome article and very well explained

Leave a Reply

Connect with Me
  • Categories
  • Popular Posts