by Flavio H. Freitas

ES2018: Javascript's new features in 2018

Our friends from TC39 have released new updates for our beloved JavaScript language.

bocZipyVNaJoZ43Q0DuUVShsFUBtYgbmhOAH

If you want to follow the process of the new releases by the committee, you can access this link. The process of approving and making a change goes through five stages:

  • Stage 0: Strawman — Allow input into the specification
  • Stage 1: Proposal — Make the case for the addition; Describe the shape of a solution; Identify potential challenges
  • Stage 2: Draft — Precisely describe the syntax and semantics using formal spec language
  • Stage 3: Candidate — Indicate that further refinement will require feedback from implementations and users
  • Stage 4: Finished — Indicate that the addition is ready for inclusion in the formal ECMAScript standard

More details can be seen here. If you want to learn more about the previous changes, check out ES6, ES7 and ES8.

So let’s see what they have added or updated in the past year:

1. Lots of Regex changes

We have four modifications for regex. Let’s see them:

s (dotAll) flag for regular expressions

While using regular expressions, you expect that the dot . matches a single character, but it’s not always true. One exception is with line terminator characters:

/hello.bye/.test('hello\nbye') // prints false

The solution is the new flag /s (from singleline):

/hello.bye/s.test('hello\nbye')  // prints true

RegExp named capture groups

This is the old way of getting the year, month, and day from a date:

const REGEX = /([0-9]{4})-([0-9]{2})-([0-9]{2});const results = REGEX.exec('2018-07-12');console.log(results[1]); // prints 2018console.log(results[2]); // prints 07console.log(results[3]); // prints 12

And if you are working with a long regex, you know how hard it is to keep track of the groups, parentheses, and the indices. With the new named capture group, it's possible to:

const REGEX = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2});const results = REGEX.exec('2018-07-12');console.log(results.groups.year);  // prints 2018console.log(results.groups.month); // prints 07console.log(results.groups.day);   // prints 12

RegExp Look behind Assertions

There are two versions of look behind assertions: positive and negative.

a) Positive (?<=…)

'$foo #foo @foo'.replace(/(?<=#)foo/g, 'XXX')// prints $foo #XXX @foo

This (?<=#)foo/g regex says that the word must start with # and it doesn’t contribute to the overall matched string (so it won't replace the # character).

b) Negative (?<!…)

'$foo #foo @foo'.replace(/(?<!#)foo/g, 'XXX')// prints $XXX #foo @XXX

On the contrary, this assertion guarantees that it doesn't start with #.

RegExp Unicode Property Escapes

Now we can search for characters by mentioning their Unicode character property inside of \p{}

/\p{Script=Greek}/u.test('μ') // prints true

You can check out more of the properties by clicking here.

2. Rest/Spread Properties

The rest operator (...) copies the remaining property keys that were not mentioned. Let's look at an example:

const values = {a: 1, b: 2, c: 3, d: 4};const {a, ...n} = values;console.log(a);   // prints 1console.log(n);   // prints {b: 2, c: 3, d: 4}

3. Promise.prototype finally

This new callback will always be executed, if catch was called or not.

fetch('http://website.com/files').then(data => data.json()).catch(err => console.error(err)).finally(() => console.log('processed!'))

4. Asynchronous Iteration

Finally!

Now we can use await on our loops declarations.

for await (const line of readLines(filePath)) {  console.log(line);}

And these are all the changes from this year. Let’s wait to see what they will bring us next year.

If you enjoyed this article, be sure to like it give me a lot of claps — it means the world to the writer ? And follow me if you want to read more articles about Culture, Technology, and Startups.

Flávio H. de Freitas is an Entrepreneur, Engineer, Tech lover, Dreamer and Traveler. Has worked as CTO in Brazil, Silicon Valley and Europe.