8 JavaScript Features in ES2019 That You Should Know

1. Array.prototype.{flat,flatMap}

Array.prototype.flat() proposed to flatten arrays recursively up to the specified depth and returns a new array.

Syntax: Array.prototype.flat(depth)
depth — Default value 1, Use Infinity to flatten all nested arrays.

const numbers = [1, 2, [3, 4, [5, 6]]];
// Considers default depth of 1
numbers.flat(); 
> [1, 2, 3, 4, [5, 6]]
// With depth of 2
numbers.flat(2); 
> [1, 2, 3, 4, 5, 6]
// Executes two flat operations
numbers.flat().flat(); 
> [1, 2, 3, 4, 5, 6]
// Flattens recursively until the array contains no nested arrays
numbers.flat(Infinity)
> [1, 2, 3, 4, 5, 6]

Array.prototype.flatMap() maps each element using a mapping function and flattens the result into a new array. It’s identical to the map operation followed by a flat of depth 1.

Syntax: Array.prototype.flatMap(callback)
callback: function that produces an element of the new Array.

const numbers = [1, 2, 3];
numbers.map(x => [x * 2]);
> [[2], [4], [6]]
numbers.flatMap(x => [x * 2]);
> [2, 4, 6]

2. Object.fromEntries

Object.fromEntries performs the reverse of Object.entries . It transforms a list of key-value pairs into an object.

Syntax: Object.fromEntries(iterable)
iterable: An iterable like Array or Map or objects implementing the iterable protocol

const records = [['name','Mathew'], ['age', 32]];
const obj = Object.fromEntries(records);
> { name: 'Mathew', age: 32}
Object.entries(obj);
> [['name','Mathew'], ['age', 32]];

3. String.prototype.{trimStart, trimEnd}

trimStart() removes whitespace from the beginning of a string and trimEnd() removes whitespace from the end of a string.

const greeting = ` Hello Javascript! `;
greeting.length;
> 19
greeting = greeting.trimStart();
> 'Hello Javascript! '
greeting.length;
> 18
greeting = 'Hello World!   ';
greeting.length;
> 15
greeting = greeting.trimEnd();
> 'Hello World!'
greeting.length;
> 12

4. Optional Catch Binding

Prior to the new specification, it was required to have an exception variable bind to a catch clause. ES2019 made it optional

// Before
try {
   ...
} catch(error) {
   ...
}
// After
try {
   ...
} catch {
   ...
}

This feature is useful when you want to completely ignore the error. Best practice is to consider handling an error.

There are cases where you know the possible error that could trigger on operations. You can ignore the catch block handling.

5. JSON ⊂ ECMAScript

The line separator (U+2028) and paragraph separator (U+2029) symbols are now allowed in string literals. Previously, these were treated as line terminators and resulted in SyntaxError exceptions.

// Produces invalid string before ES2019
eval('"\u2028"');
// Valid in ES2019
eval('"\u2028"');

6. Well-formed JSON.stringify

Instead of unpaired surrogate code points resulting in single UTF-16 code units, ES10 represents them with JSON escape sequences.

JSON.stringify('\uD800');
> '"�"'
JSON.stringify('\uD800');
> '"\\ud800"'

7. Function.prototype.toString

.toString() now returns exact slices of source code text, including whitespaces and comments.

function /* a comment */ foo () {}
// Previously:
foo.toString();
> 'function foo() {}'
             ^ no comment
                ^ no space
// Now:
foo.toString();
> 'function /* comment */ foo () {}'

8. Symbol.prototype.description

Read-only property that returns the optional description of a Symbol Object:

Symbol('desc').toString();
> "Symbol(desc)"
Symbol('desc').description;  
> "desc"
Symbol('').description;      
> ""
Symbol().description;
> undefined