ES2019: Javascript’s new features in 2019 🎉

More amazing changes in our beloved ECMAScript, a.k.a. Javascript. The TC39 (Technical Committee) just released the 10th edition of the specification. If you feel brave and want to read the original specification with hundreds of pages this is the link.

Do you have the latest version of Chrome? Open the Javascript console and let’s code together.

1. Optional catch binding

Forget about writing catch(err) {} and not treating the errparameter. Now it is optional:

try {
  // some crazy code
} catch {
  // take an action
}

2. Subsume JSON

ECMAScript claims JSON as a superset in JSON.parse (in mathematics, JSON ⊂ ECMAScript):

After parsing, JSON objects are realized as ECMAScript objects. JSON arrays are realized as ECMAScript Array instances. JSON strings, numbers, booleans, and null are realized as ECMAScript strings, Numbers, Booleans, and null

But this was not true (until now). There were some characters that could be contained in JSON, but not in ECMAScript strings like line separator (U+2028) and paragraph separator (U+2029).

// before you would receive SyntaxError
JSON.parse('"\u2028"')

3. Symbol.prototype.description

Now you can access the description of a Symbol, without the need to call toString():

const sym = Symbol('Hello')
sym.description // 'Hello'

4. Function.prototype.toString revision

Calling toString() of a function returns its source code. With this change, the returned value won't strip white spaces, comments, and new lines like before.

function /* some comment here */ foo () {}
// before
foo.toString() // function foo() {}
// now
foo.toString() // function /* some comment here */ foo () {}

5. Object.fromEntries

Object.fromEntries performs the reverse of Object.entries. Let's see:

const obj = { color: 'yellow', size: 20 }
Object.entries(obj)
// [[“color”,”yellow”],[“size”,20]]
Object.fromEntries([[“color”,”yellow”],[“size”,20]])
// { color: ‘yellow’, size: 20 }

6. Well-formed JSON.stringify

We have now a more friendly and safer way of using UTF-8 code points (U+D800 to U+DFFF).

// before
JSON.stringify('\uD800') // “�”
// now
JSON.stringify('\uD800') // “"\ud800"”

Now these code points can be represented as strings usingJSON.stringify(), and transformed back into their original representation using JSON.parse().

7. String.prototype.{trimStart,trimEnd}

We can remove the whitespaces from the beginning (trimStart) or from the end (trimEnd) of a string.

const text = '     hello     '
text.trimStart() // 'hello     '
text.trimEnd()   // '     hello'

8. Array.prototype.{flat}

Array.prototype.flat(depth) flattens arrays recursively up to the specified depth and returns a new array. The default value depth is 1.

const array = ['🍇', ['🍉', ['🍌', ['🍒']]]]
array.flat()         // ['🍇', '🍉', ['🍌', ['🍒']]]
array.flat(2)        // ['🍇', '🍉', '🍌', ['🍒']]
array.flat(Infinity) // ['🍇', '🍉', '🍌', '🍒']

9. Array.prototype.{flatMap}

Array.prototype.flatMap(depth) maps each element of an array and flattens the result into a new array. It's similar to map().flat()

const phrases = ['I like', 'rock music']
// with map and flat:
const words = phrases.map(x => x.split(' '))
// [['I', 'like'], ['rock', 'music']]
words.flat()
// ['I', 'like', 'rock', 'music']
// with flatMap: 
phrases.flatMap(x => x.split(' '))
// ['I', 'like', 'rock', 'music']

And that's it. Simple as that.

Follow me if you want to read more of my articles 😘 And if you enjoyed this article, be sure to like it give me a lot of claps — it means the world to the writer.

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