What’s new in ES2019 (ES10)

Hey folks! 👋

Every once in a while (once a year to be precise) we’re given an opportunity to experience a thrill from what’s new in JavaScript world.

Yes, I am talking about releasing a new major version update of our favourite language, JavaScript, this time called ES2019 or ES10.

Photo by Markus Winkler on Unsplash

So, what’s the new JavaScript update bringing to the world? Well, it is a little bit of everything so to say. There are updates for Array, String, Object, Function and code syntactic sugar as well.

Let’s have a closer look:

Table of contents:

  1. Array changes
    1. Array.flat()
    2. Array.flatMap()
    3. Array.prototype.sort stability
  2. String changes
  3. Object.fromEntries()
  4. Function.toString
    1. How does Function.toString() work?
    2. What’s changed?
  5. Other changes
    1. try {} catch {} without a variable
    2. Symbol.description

1. Array changes

1.1 Array.flat()

So, the first update concerns flattening an array. let’s say, you have an array like this:

const items = [1, 2, 3, [5, 9, 7]];

And in order to merge the subarray with the main array, you would need to do some looping or similar crazy stuff, so that’s why this .flat() method exists, so it does that for you, like on the example below:

const items = [1, 2, 3, [5, 9, 7]];
items.flat();

console.log(items); // => [1, 2, 3, 5, 9, 7]

Interesting, right? And also, one compelling fact, as like with most of javascript functions is that you can chain them and the same applies to .flat() method as well, consider the example below:

const items = [1, 2, 3, [5, 9, 7, [11, 13, [20, 100]]]];
items.flat().flat().flat().flat();

console.log(items); // => [1, 2, 3, 5, 9, 7, 11, 13, 20, 100]

1.2 Array.flatMap()

Very similar to the .flat() is the new method .flatMap() that does basically the same as .map() and .flat() combined.

Consider the following example:

const items = [1, 4, 100];

const item2 = items.map(item => [item, item*2]);
console.log(items2); => // => [[1,2],[4,8],[100,200]]
items2.flat();
console.log(items2); // => [1, 2, 4, 8, 100, 200]

So, after looking at the aforementioned example you’ve got an idea, what .flatMap() does, great then! And just to confirm, it is basically like calling .map() and then .flat() on a variable – and in order for you not to have a need to calling those two methods, there is one method for this called .flatMap().

And if it seems to you there is something strange about naming of this function, then I have the same opinion. The function could have been called .mapFlat() – because that’s the exact order of what it really does! 😂

1.3 Array.prototype.sort stability

This update certainly does not ring any bell to you. Nor did to me, but stay with me, it’s really interesting change.

So, what’s the problem?

Imagine, you have a multidimensional array filled with objects containing information about puppers and their age and you need to sort the dogs by their age, what would you do? You would write a simple sorting function that compares the age of the individuals doggos and that’s it, right?

const doggos = [
{ name: 'Abby', age: 12 },
{ name: 'Bandit', age: 13 },
{ name: 'Choco', age: 14 },
{ name: 'Daisy', age: 12 },
{ name: 'Elmo', age: 12 },
{ name: 'Falco', age: 13 },
{ name: 'Ghost', age: 14 },
];
// Sort the dogs by age in descending order.
// (This updates doggos in place.)
doggos.sort((a, b) => b.age - a.age);

Well, what happens, if there are dogs that have different names, but the same age? There needs to be something there that does sorting for that kind of use case. Up until now it was basically random and there was no guarantee, that for example a dog named Fred aged 12 would be sorted before a dog called Manfred aged 12.

And making “sort function stable” basically means, that when the javascript engine will be executing your function it will guarantee, that that kind of sort will be correct.

If you’re into this nerdy stuff, I recommend you continue reading, it’s really interesting. You can find out more information on the following links:

2. String changes

JavaScript String interface got its update as well. It is a very simple, but useful feature.

There are two new functions:

  • .trimStart()
  • .trimEnd()

What they do is basically very similar to the .trim() string method that has been available all along.

The only difference is, that .trimStart() will remote whitespace from the beginning of the string and the .trimEnd() will remove whitespace from the end of the string.

Pretty straightforward, right? 🙂

3. Object.fromEntries()

Remember Object.entries() from ES8/ES2017?

Well this function does basically the same this from the other end, consider the following example:

const entries = [
    ["name_0", "Ivan"],
    ["name_1", "Julie"],
    ["name_2", "Martin"],
];

const items = Object.fromEntries(entries);
console.log(items); // => {name_0: "Ivan", name_1: "Julie", name_2: "Martin"}

4. Function.toString

Well, this change is very negligible change to the way of how .toString() worked on functions.

4.1 How does Function.toString() work?

It’s real simple. A method .toString() called on a function returns a string representing the source code of the function, consider the following example:

const doMyAFavour = () => {
    console.log("logging");

    setTimeout(() => {
        document.body.hidden = true;
    }, 2000);
};

console.log(doMyAFavour.toString()); => //prints "() => { console.log("logging"); setTimeout(() => { document.body.hidden = true; }, 2000); }"

4.2 What’s changed?

The only change is, that up until this point the javascript engine removed whitespace from the source code returned, and this ES10 means, that the whitespace will be preserved 🙂 .

5. Other changes

There are a couple of more changes in this JavaScript update so let’s go through them real quick.

5.1 try {} catch {} without a variable

How many times have you written code like this:

try {
   callAction();
} catch(err) {
      hideLoaders();
      anyOtherFunction();
}

Do you see the variable err declared by the catch {} block used anywhere?

No, it’s not used at all in the code above and me personally, I encountered such situation dozens of times in my career and I guess you have too.

So the new JavaScript update bring an option to completely skip declaring the variable within the catch {} block, smooth right?

Example:

try {
   callAction();
} catch {
      hideLoaders();
      anyOtherFunction();
}

5.2 Symbol.description

When you are creating a javascript Symbol, you can also include a description of the Symbol – just for debugging purposes 😊

Consider the following example:

const mySymbol = new Symbol("symbol122_1");

console.log(mySymbol.description); // => "symbol122_1"

Wrap up

That’s it guys. That’s what ES2019 update brought to the table.

What do you say? Like it? Or maybe not so much? Or is there anything you’d like to see in upcoming version of javascript? Let me know in the comments below!

Also, if you’d like to dig deeper into the whole ECMAScript 2019 specification,, you can check out the full official document here:

Or, if you’d like to check out the older major JavaScript language updates, you can check them out in the links below:

ne more things guys, liked this article, don’t forget to share it with people you like (or maybe also people you don’t like, maybe you’ll became friends! 😆 ).

Lastly, it is only matter of time till we see an interesting update in JavaScript as well, so if you be the first ones to know, subscribe to my newsletter right here, I am sending regularly industry news, best practises and tips for your JavaScript coding.

Anyways, thanks for reading and I’ll see you in the next article! 🤓

Yours in coding,

Ivan