ES10 Ecmascript 2019

Introduction

ECMAScript 2019, commonly referred to as ES10, brought forward a collection of enhancements and new features to the JavaScript language. Released in June 2019, ES10 continued the trend of yearly updates, focusing on improving language functionality, adding new methods for existing objects, and enhancing syntax for better usability. These additions were aimed at simplifying certain operations and making the language more robust and flexible.

ECMAScript 2019 Language Specification

Detailed Feature Explanation with Examples

1. Array.prototype.flat and flatMap

Explanation:

• flat() method creates a new array with all sub-array elements concatenated into it recursively up to a specified depth.
• flatMap() method first maps each element using a mapping function, then flattens the result into a new array.

Example:

	let arr = [1, [2, [3, [4]]]];
	console.log(arr.flat(2)); // [1, 2, 3, [4]]
	
	let arr2 = [1, 2, 3, 4];
	console.log(arr2.flatMap((x) => [x, x * 2])); // [1, 2, 2, 4, 3, 6, 4, 8]

2. Object.fromEntries

Explanation:

• This method transforms a list of key-value pairs into an object.
• It’s essentially the reverse of Object.entries introduced in ES8.

Example:

	let entries = [
	  ['a', 1],
	  ['b', 2]
	];
	let obj = Object.fromEntries(entries);
	console.log(obj); // { a: 1, b: 2 }

3. String.prototype.trimStart and trimEnd

Explanation:

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

Example:

	let str = '   ES10   ';
	console.log(str.trimStart()); // 'ES10   '
	console.log(str.trimEnd()); // '   ES10'

4. Optional Catch Binding

Explanation:

• Allows catch clauses in try-catch statements to omit the exception variable if it’s not used.

Example:

	try {
	  // some operation
	} catch {
	  // handle error without needing an error variable
	}

5. Symbol.description

Explanation:

• Provides a read-only description property on Symbol objects.

Example:

	let sym = Symbol('desc');
	console.log(sym.description); // 'desc'

6. BigInt

Explanation:

• BigInt is a built-in object that provides a way to represent whole numbers larger than (2^53 - 1), the largest number JavaScript can reliably represent with the Number primitive.

Example:

	let largeNumber = BigInt(9007199254740991);
	console.log(largeNumber + BigInt(1)); // 9007199254740992n

7. Well-formed JSON.stringify

Explanation:

• JSON.stringify now returns well-formed Unicode strings, ensuring that lone surrogates are properly escaped.

Example:

	console.log(JSON.stringify('\uD800')); // '"\\ud800"'

8. Function.prototype.toString

Explanation:

• Returns the exact characters of the source code text forming the function, including whitespace and comments.

Example:

	function example() {
	  /* comment */
	}
	console.log(example.toString()); // function example() { /* comment */ }

9. Stable Array.prototype.sort

Explanation:

• The sort() method in arrays is now guaranteed to be stable, meaning equal elements will maintain their order.

Example:

	let array = [1, 5, 4, 3, 2];
	array.sort(); // Sort is now stable
	console.log(array); // [1, 2, 3, 4, 5]

Common Pitfalls

• Overlooking the utility of flat and flatMap for handling nested arrays.
• Misusing BigInt, especially in operations with regular Numbers.

Further Reading

• Exploring JS: ES2019
• MDN Web Docs on BigInt

Summary

ES10 continued to refine JavaScript with features like flat and flatMap, Object.fromEntries, and BigInt