What’s new in ECMAScript 2019 (ES2019)?

by | Aug 19, 2019 | Javascript, News

Every year since 2015, new ECMAScript features are released. Creating a new ECMAScript standard has four stages, from stage 0 to stage 3 it is mostly planning, and drafts and stage 4 is final. It’s possible to use the newest features in Google Chrome version 72. Let’s take a look at what exactly ES2019 brings us:

  • Object.fromEntries(),
  • trimStart() and trimEnd(),
  • flat(),
  • flatMap(),
  • Symbol object description property,
  • catch optional binging,
  • well formatted JSON.stringify,

Let’s go one by one and check how we can use this brilliant new features.

1. Object.fromEntries();

Converting data in Javascript is very common, and almost every update of ECMAScript brings new, simple methods to do it. In ES2017 creators brought a new method Object.entries(), used to convert objects into arrays. But there was no way to do it in an opposite way, to convert key-value pair array into an object with one simple method.

And here it is, ES2019 brings us new feature, Object.fromEntries() which allows transforming an array of key-value pairs into an object.

Let’s check out how it’s possible to revert Object.entries method using ES2019 new feature Object.fromEntries():

var car = {
make: 'Volvo',
seats: 4,
year: 2018,
}

console.log(Object.entries(car)); // [['make', 'Volvo], ['seats', 4], ['year', 2018]];

var carArr = [['make', 'Volvo], ['seats', 4], ['year', 2018]];
console.log(Object.fromEntries(carArr)); // { make: 'Volvo', seats: 4, year: 2018 };

From the above code, we can see that now reversing Object.entries result is very easy.

2. trimStart() and trimEnd()

String manipulations are very common when working with Javascript on front-end. Sometimes we need to adjust strings to needed format, and we need to trim part of the string. ES2019 brings us two useful features which may be used for this purpose: trimStart() and trimEnd(). trimStart() method removes whitespaces from the beginning of the string, and trimEnd() obviously trims whitespaces from the end of the string.

Let’s take a look at a code example:

var string = '    string to trim     ';

console.log(string.trimStart()); // 'string to trim     '
console.log(string.trimEnd()); // '    string to trim'

This one looks pretty simple, right?

3. flat()

New array .flat() method creates new array with sub-arrays elements concentrated in a recursive way until specific depth. The depth is one by default, but it may be set as a parameter, or it may be set to Infinity be sure that all the sub-arrays will be flattened.

Let’s see a code example:

var array = [1, 2, [4, 4, [4, 7, [20, 1]]]];

console.log(array.flat()); // [1, 2, 4, 4, [4, 7, [20, 1]]]; 
console.log(array.flat(2)); // [1, 2, 4, 4, 4, 7, [20, 1]];
console.log(arra.flat(Infinity)); // [1, 2, 4, 4, 4, 7, 20, 1];

In the first usage of .flat() method, it concentrates only one level array as this is the default depth. In another console.log I defined two depth, and it concentrates two-level sub-arrays and the last console.log we set depth level to Infinity, and it concentrates all levels of our array.

4. flatMap()

If you work with an array a lot probably, you know how useful is .map() method, which allows to iterate through the array and perform any function on every element. The .flatMap() method is a combination of .map() and .flat().

Let’s take a look at a code example:

var array = [1, 23, [10, 43]];
console.log(array.flatMap(item => item + 2)); // [3, 25, 12, 45];

It seems like a very useful method.

5. Symbol object description property

Symbol was introduced as a new feature in ES6. Description in Symbols is added mainly for debugging purposes, but until now developers had to convert it to string to be able to access description with console.log. Now with the version from 2019 its possible to access description by Symbol.description.

var symbolDesc = 'This is Symbol';
var symbolObj = Symbol(symbolObj);

console.log(symbolObj.description); // 'This is Symbol';

6. Catch optional binding

Lots of developers use try…catch statement, and until now usage of binding in catch was required to avoid SyntaxError, but it wasn’t used in some cases. Let’s take a look at the code example before ES2019:

try {
  ...
} catch (value) {
  ...
}

After ES2019:

try {
  ...
} catch {
  ...
}

In the above example, we can see that value in the catch statement is not needed, and in this case, it’s a great possibility to skip it with the newest version of ECMAScript.

7. JSON.stringify superset

Usage of JSON.strignify is quite common when using Javascript. This change in ES2019 was introduced to prevent JSON.stringify() method from returning ill-formed Unicode strings. Now JSON.stringify() will present surrogate code points as strings and while we use JSON.parse() it will be transformed to the original representation.

Let’s take a look at some example:

JSON.stringify('\uDF06\uD834'); // '"\\udf06\\ud834"'
JSON.stringify('\uDEAD'); // '"\\udead"'

Conclusion

ES2019 brings us lots of useful features which will make our development process much more pleasant. In this article, I’ve gone through the most important ones: Object.fromEntries(), trimStart() and trimEnd() string methods, flat() and flatMap() array methods, new description property for Symbol, catch optional binding and JSON.stringify() superset.

If you are not familiar with any of the updates from previous years, I encourage you to check out our last article https://www.blog.duomly.com/the-most-useful-features-in-the-latest-javascript-since-es6/ and start developing your code with the newest features.

Have a nice coding!

Thank you for reading.

The article was created by our teammate Anna.

Start learning now!

Angular tutorial

Some time ago, I created the first tutorial about React.js where I showed you how to create an easy React.js application using an existing API and Bootstrap for styling. The positive response for this article brought me to the idea of creating a series of simple...

What skills you need to be a good developer?

Every profession has special requirements; for example, to be a doctor, you have to know biology, finish medical university, but besides the hard skills, as a doctor, you have to be emphatic. As a teacher, you need to have qualifications to work with kids, but you...

Angular tutorial

Angular tutorial

Some time ago, I created the first tutorial about React.js where I showed you how to create an easy React.js application using an existing API and Bootstrap for styling. The positive response for this article brought me to the idea of creating a series of simple...

React.js performance tutorial

React.js performance tutorial

Building applications sometimes can be a bit challenging, especially when we need to build a fast and good-quality application. These times it can be necessary, especially when search engines can give bonus SEO points for faster working apps, and it can help us to...

Vue.js tutorial: How to create Vue.js app in 5 minutes?

Vue.js tutorial: How to create Vue.js app in 5 minutes?

Vue.js is getting more and more popular, becoming a meaning competitor to frameworks like Angular or React.js. As a beginner-friendly front-end framework, it successfully conquers the hearts of junior front-end developers and people who just started to learn front-end...

8 CSS image filters with code examples

8 CSS image filters with code examples

Using images, we can create an atmosphere, arouse happiness, smile, sadness, or any different emotion. With images, we can show a lot, and tell a lot as well; that’s why pictures are so widely used in the websites and applications. Designers take care of how users...

CSS Grid tutorial

CSS Grid tutorial

When we build front-end, always we need to create a structure of our page, and very often, we need to create any grid. We can position elements in a few ways. For example, in the previous article I showed you how we could do it via flexbox. So, today, I would like to...

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Share This