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 err
parameter. 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.