The tips and tricks of ES2019

OpenJavaScript 0
Reading Time: 3 minutes 🕑

Last updated: May 6, 2022.

Since ES6 (2015), upgrades to JavaScript have been introduced on a rolling annual basis.

In this article, we review the new features introduced to JavaScript by ES2019:

.flat() array method

Applying .flat() to an array reduces its nesting structure by one level. Applying it several times reduces its nesting by a corresponding number of levels:

let array = [1,2,3,[4,5,[6,[7],8,],9,10]]

array.flat() // (8) [1, 2, 3, 4, 5, Array(3), 9, 10]
array.flat().flat() // (10) [1, 2, 3, 4, 5, 6, Array(1), 8, 9, 10]
array.flat().flat().flat() // (10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

.flatMap() array method

This method combines the .map() and .flat() array methods. First, it applies a map function to each element in the array. Then it flatten the result:

let oneDeepArray = [1,2,3,4,5,6,7,8,9,10]

// The long way
let oneDeepArray1 = oneDeepArray.map(number => [number, number*2])
// (10) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)]

let oneDeepArray2 = oneDeepArray1.flat()
// [1, 2, 2, 4, 3, 6, 4, 8, 5, 10, 6, 12, 7, 14, 8, 16, 9, 18, 10, 20]

// With .flatMap
let oneDeepArray3 = oneDeepArray.flatMap(number => [number, number*2])
// [1, 2, 2, 4, 3, 6, 4, 8, 5, 10, 6, 12, 7, 14, 8, 16, 9, 18, 10, 20]

Object.fromEntries()

This useful method available on the in-build Object object can be used to convert an array of nested key-value pair entries into a JavaScript object:

arrayList= [["key1", "value1"],["key2", "value2"],["key3", "value3"]]

Object.fromEntries(arrayList)
// {key1: 'value1', key2: 'value2', key3: 'value3'}

This does the opposite of the Object.entries method, which converts from a JavaScript object to a nested array of key-value pair entries.

object= {key1: 'value1', key2: 'value2', key3: 'value3'}

Object.entries(object)
// [Array(2), Array(2), Array(2)]

.trimStart() and .trimEnd() String methods

.trimStart() and .trimEnd() remove any whitespace from the beginning or end of string content, respectively:

let myString = "           SOME TEXT           "

let myString2 = myString.trimStart()
// "SOME TEXT           "

let myString3 = myString2.trimEnd()
// "SOME TEXT"

Optional catch parameter

Before ES2019 it was mandatory to specify an error parameter before a catch block:

try {
  throw new Error("Try failed")
} catch(err) {
  console.log(err); // Error: Try failed
}

ES 2019 makes this no longer necessary

try {
  throw new Error("Try failed")
} catch {
  console.log("error"); // error
}

Update to .toString() function method

ES2019 updates the .toString() method that can be applied to functions.

Previously, it would output the function as a string, erasing any white space.

In ES2019, the output includes white space so that the string output mirror the way the function is written in code:

console.log(helloWorld.toString())

function helloWorld() {
  // Define message
  let message = "hello world";
  // Print message
  document.body.append(message);
}

Output:

function helloWorld() {
  // Define message
  let message = "hello world";
  // Print message
  document.body.append(message);
}

Symbol.description

ES2019 makes it possible to access the optional description of symbol data by calling symbol.description:

let sym1 = Symbol('person1')
let sym2 = Symbol
let sym3 = Symbol('person3')

console.log(sym1.description) // person1
console.log(sym2.description) // undefined
console.log(sym3.description) // person 3

Stable .sort() array method

Prior to ES2019, JavaScript used unstable algorithms for sorting long arrays such as QuickSort. In practice, this meant that array elements having the same value on the property sorted may change position between the original and sorted array.

ES2019 implements a stable sorted algorithm so sorted arrays remain stable.

JSON.parse() update

Previously, JSON.parse() would throw a SyntaxError if the string contained the line seperator (\u2028) or paragraph separator (\u2029) symbols.

ES2019 resolves this so these symbols are parsed correctly.

Well-formed JSON.stringify()

In UTF-16 encoding, emojis are represented by two surrogate character codes. For example, the emoji 😎 by \uD83D and \uDE0E. As you can see in the code snippet, JSON.stringify outputs the emoji icon whether input as the underlying code or emoji.

ES2019 introduces a change if one of these surrogate character codes is missing. Previously, the generic “�” icon would be output. In ES2019, a backslash is not introduced so that the character code retains its integrity:

const a = JSON.stringify("\uD83D\uDE0E")
const b = JSON.stringify("😎")

console.log(a); "😎"
console.log(b); "😎"

const x = JSON.stringify("\uD83D")

console.log(x); // \\ud83d

// Pre-ES2019
//  console.log(x) //  �

Summary

In this article, we have covered the updates introduced to JavaScript by ES2019.

Want to learn about the latest JavaScript tips and tricks? Check out our ES6+ section.