/

The ES2019 Guide: Everything You Need to Know about ECMAScript and its Latest Features

The ES2019 Guide: Everything You Need to Know about ECMAScript and its Latest Features

ECMAScript (ES) is the standard that JavaScript is built upon. The most recent version of ES is ES2018, which was released in June 2018. Now, with the anticipation of ES2019, let’s dive into the features that will be added in the upcoming release.

Introducing ESNext and ES2019

ESNext refers to the next version of JavaScript, which is currently ES2019. The development of JavaScript editions is usually standardized during the summer, so we can expect ES2019 to be released this summer. At the time of writing, ES2018 is the current version, and ESNext represents ES2019.

Features at Stage 4

The proposals for the ECMAScript standard are categorized into different stages, with Stage 4 representing features that are finalized as part of the new standard. In this section, we will explore some of the features that are currently at Stage 4, which means they should already be implemented in the latest versions of major browsers. These features include:

  • Array.prototype.{flat,flatMap}
  • Optional catch binding
  • Object.fromEntries()
  • String.prototype.{trimStart,trimEnd}
  • Symbol.prototype.description
  • JSON improvements
  • Well-formed JSON.stringify()
  • Function.prototype.toString()

While some of these changes are primarily for internal use, it’s always good to stay updated with the progress of the language.

Features at Stage 3 and Beyond

Aside from the Stage 4 features, there are also features at Stage 3 that may be promoted to Stage 4 in the coming months. To keep track of these features, you can refer to the proposals in the GitHub repository: https://github.com/tc39/proposals.

Now let’s take a closer look at some of the notable features at Stage 4.

Array.prototype.{flat,flatMap}

The flat() method is a new array instance method that can create a one-dimensional array from a multidimensional array. By default, it only flattens the array up to one level, but you can specify the number of levels you want to flatten by passing a parameter. You can also set it to Infinity for unlimited levels.

The flatMap() method combines the functionality of flat() and map(). It’s useful when you want to call a function that returns an array in the map() callback and then flatten the resulting array.

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
;['Dog', ['Sheep', 'Wolf']].flat()
//[ 'Dog', 'Sheep', 'Wolf' ]

;['Dog', ['Sheep', ['Wolf']]]
 .flat(2)
//[ 'Dog', 'Sheep', 'Wolf' ]

;['Dog', ['Sheep', ['Wolf']]]
 .flat(Infinity)
//[ 'Dog', 'Sheep', 'Wolf' ]


;['My dog', 'is awesome']
 .map((words) => words.split(' '))
 .flatMap((words) => words.split(' '))
//[ 'My', 'dog', 'is', 'awesome' ]

Optional catch binding

The try/catch block allows you to catch JavaScript errors. Previously, even if you didn’t need to use the caught error parameter, you had to include it in the catch block. With ES2019, you can simply omit it if it’s unnecessary.

Before:

1
2
3
4
5
try {
 //...
} catch (e) {
 //handle error
}

After:

1
2
3
4
5
try {
 //...
} catch {
 //handle error
}

Object.fromEntries()

ES2019 introduces the Object.fromEntries() method, which allows you to create a new object from an array of [key, value] pairs obtained using the entries() method. This provides a convenient way to convert arrays of properties into objects.

Example:

1
2
3
4
5
const person = { name: 'Fred', age: 87 }
const entries = Object.entries(person)
const newPerson = Object.fromEntries(entries)

person !== newPerson // true

String.prototype.{trimStart,trimEnd}

The trimStart() and trimEnd() methods are part of ES2019 and have been available in v8/Chrome for some time. They remove white space from the start and end of a string, respectively.

Example:

1
2
3
4
5
6
7
8
9
'Testing'.trimStart() //'Testing'
' Testing'.trimStart() //'Testing'
' Testing '.trimStart() //'Testing '
'Testing '.trimStart() //'Testing '

'Testing'.trimEnd() //'Testing'
' Testing'.trimEnd() //' Testing'
' Testing '.trimEnd() //' Testing'
'Testing '.trimEnd() //'Testing'

Symbol.prototype.description

In ES2019, you can retrieve the description of a Symbol by accessing its description property directly, instead of using the toString() method.

Example:

1
2
const testSymbol = Symbol('Test')
testSymbol.description // 'Test'

JSON improvements

ES2019 introduces improvements to JSON parsing and stringification. Before this change, certain symbols like line separators and paragraph separators were not allowed in JSON strings, leading to syntax errors. Now, these symbols parse correctly, following the JSON standard.

Furthermore, the JSON.stringify() method now handles surrogate UTF-8 code points (U+D800 to U+DFFF) correctly. Previously, calling JSON.stringify() with surrogate code points would result in malformed Unicode characters. Now, these code points can be safely represented as strings using JSON.stringify() and transformed back using JSON.parse().

Function.prototype.toString()

The toString() method of functions has always existed in JavaScript, returning a string representation of the function’s code. In ES2019, there is a change to the return value of toString() to preserve comments, whitespace, and other characters, providing an accurate representation of the function as it was defined.

Example:

Before:

1
2
function /* this is bar */ bar() {}
bar.toString() // 'function bar() {}'

After:

1
2
function /* this is bar */ bar () {}
bar.toString() // 'function /* this is bar */ bar () {}'

Stay tuned for the release of ES2019, and make sure to keep an eye on the upcoming features at Stage 3. This guide provides an overview of the latest features and changes that will be introduced in ES2019. Stay updated and continue exploring the world of ECMAScript.

Tags: ES2019, ECMAScript, JavaScript, programming, web development