More new additions to the JavaScript standard ES2019

In our last two articles about the new additions to the ES2019 JavaScript standard, we covered two interesting features: flatMap and fromEntries. But along with these two new JavaScript features, there are a few others worth mentioning. They’re minor and don’t warrant an entire article each, so in this final ES2019 article we’ll examine the remaining features.

A New Method for Removing Spaces

The first is a new trim method. For those of you who need a reminder, the trim method in JavaScript allows us to remove unnecessary spaces from a text string. Here’s how it looks:

const myString = '  Hello World!  ';

let result = myString.trim();

console.log(result); //"Hello World!"

The two additional methods that come free with every type of text-string variable are…

trimStart and trimEnd!!!

OK, did you get over your shock? Then let’s see if we can figure out what’s going on with these two new JavaScript methods. Honestly, it’s pretty simple and you should really be able to understand just by looking at the example: 

const myString = '  Hello World!  ';

let result = myString.trim();

console.log(result); //"Hello World!"

result = myString.trimStart();

console.log(result); //"Hello World!  "

result = myString.trimEnd();

console.log(result); //"  Hello World!"

And for those of you who want to mess around with it, here is the CodePen:

Hold on, hold on. Yeah, I hear you back there shouting “we saw this before in trimLeft and trimRight!!!” You’re right, but the difference is that it was never part of the official standard. The two fun little methods above won’t disappear though—they’ll remain as aliases. That’s good news, especially for all the Node.js programmers out there.  

Descriptions for Symbol Data Type

Another cool new little feature to ES2019 JavaScript standard is the ability to get the description of the primitive data type Symbol. For those of you who don’t remember, here is our article about symbol in JavaScript. We create a symbol, we can also create a description for it. Now, in ES2019, we can relatively easily access that description via the description property. Take note:

const mySymbol = Symbol('This is a description');

console.log(mySymbol.description);  //"This is a description"

Pretty sweet, right?

But again, I hear you back there shouting “we did that too when we converted a symbol to a string!” OK, right again you are. You can also do something along these lines:

const mySymbol = Symbol('This is a description');

console.log(String(mySymbol)); // "Symbol(This is a description)"

But (you knew there’d be a ‘but’) that’s not really a very elegant solution. It’s better like this—check out the CodePen:

Try/Catch without Declaring an Argument

Our third addition to the new JavaScript standard is not having to pass an argument to try/catch. Why would this be important? For static code analysis. There’s a widespread rule that states one cannot pass a variable without using it. Hmmm? So if I do something like this:

try {

   ··
} catch {

   ··
}

Nope—it’s not going to work. Except that now, it is going to work! (Happy, happy. Joy, joy!)

try {

   throw(new Error('This is error'));

} catch {

   console.log('error occured'); // "error occured"

}

Stable Array Sorting

Another significant addition to the JS ES2019 standard it that when using an array via the sort function, it must be done with stable sorting. In other words, sorting in which the order is saved even if the members are identical. Did I lose you? Come on back—let’s look at an example that’s based on a different article:

const people = [

 {name: 'Ann', age: 20},

 {name: 'Bob', age: 17},

 {name: 'Gary', age: 20},

 {name: 'Sam', age: 17},

 {name: 'Sue', age: 21},

];

// sort people by age

people.sort( (p1, p2) => {

 if (p1.age < p2.age) return -1;

 if (p1.age > p2.age) return 1;

 return 0;

});

console.log(people.map(p => p.name));

// We're expecting people sorted by age, then by the original order (here by name)

// ['Bob', 'Sam', 'Ann', 'Gary', 'Sue']

// But we might get any of these instead, depending on the browser:

// ['Sam', 'Bob', 'Ann', 'Gary', 'Sue']

// ['Bob', 'Sam', 'Gary', 'Ann', 'Sue']

// ['Sam', 'Bob', 'Gary', 'Ann', 'Sue']

What’s going on here? I have an array of objects that contains people. The array is arranged according to their names. If I sort it according to age using the sort function, and two people have the same age, what happens? I would expect that the original order would be saved (if it’s already arranged according to names, then if there are two members with the same age the sort will be according to the original order). That’s what a stable sort does. Up until now, it wasn’t clear that you would get a stable sort in JavaScript. But now it’s in the official standard, so in every browser and even on the server side, the sort should be stable.

And if this never bothered you before, rest assured that it definitely won’t bother you in the future.

About the author: Ran Bar-Zik is an experienced web developer whose personal blog, Internet Israel, features articles and guides on Node.js, MongoDB, Git, SASS, jQuery, HTML 5, MySQL, and more. Translation of the original article by Aaron Raizen