ES11 Ecmascript 2020

JavaScript 2

Introduction

ECMAScript 2020, also known as ES11, introduced a set of new features that further expanded the capabilities of the JavaScript language. Released in June 2020, this update included several key additions that enhanced both the functionality and the syntactical ease of JavaScript. ES11 aimed to address common programming needs and scenarios, making JavaScript more powerful and convenient for developers.

ECMAScript 2020 Language Specification

Detailed Feature Explanation with Examples

1. BigInt

Explanation:

  • BigInt is a built-in object introduced in ES10 and further enhanced in ES11. It allows the representation of integers larger than (2^53 - 1), which is the limit for the Number type.

Example:

javascript 
	let largeNumber = BigInt(9007199254740991);
	console.log(largeNumber + BigInt(2)); // 9007199254740993n

2. Dynamic Import

Explanation:

  • Enables importing modules using a function-like syntax asynchronously.
  • It’s useful for lazy-loading modules on demand.

Example:

javascript 
	(async () => {
	  const module = await import('./module.js');
	  module.doSomething();
	})();

3. Nullish Coalescing Operator (??)

Explanation:

  • A logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, otherwise returns its left-hand side operand.
  • It’s a more precise alternative to the logical OR (||) operator.

Example:

javascript 
	let foo = null;
	let bar = foo ?? 'default value';
	console.log(bar); // 'default value'

4. Optional Chaining (?.)

Explanation:

  • Allows reading the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid.

Example:

javascript 
	const person = { name: 'Alice', address: { street: '123 Main St' } };
	console.log(person.address?.zipcode); // undefined

5. Promise.allSettled

Explanation:

  • Returns a promise that resolves after all of the given promises have either resolved or rejected, with an array of objects describing the outcome of each promise.

Example:

javascript 
	Promise.allSettled([Promise.resolve('success'), Promise.reject('error')]).then((results) => console.log(results));

6. String.prototype.matchAll

Explanation:

  • Returns an iterator of all results matching a string against a regular expression, including capturing groups.

Example:

javascript 
	let string = 'test1test2';
	let regex = /t(e)(st(\d?))/g;
	for (const match of string.matchAll(regex)) {
	  console.log(match);
	}

7. globalThis

Explanation:

  • Provides a standard way to access the global this value across environments, which differs in various JavaScript environments.

Example:

javascript 
	console.log(globalThis); // Window in browsers, global in Node.js

8. for-in mechanics

Explanation:

  • The for-in statement iterates over all enumerable properties of an object. ES11 clarified the enumeration order of properties in the for-in loop.

Example:

javascript 
	const object = { a: 1, b: 2 };
	for (const key in object) {
	  console.log(key);
	}

9. Module Namespace Exports

Explanation:

  • ES11 allows the inclusion of a namespace import within an export statement.

Example:

javascript 
	export * as moduleName from './module.js';

10. import.meta

Explanation:

  • A JavaScript Host-Provided object in modules that contains metadata about the module, such as its URL.

Example:

javascript 
	console.log(import.meta.url); // URL of the module

Common Pitfalls

  • Confusing the nullish coalescing operator with the logical OR, leading to unexpected behaviors.
  • Overlooking the benefits of Promise.allSettled in handling multiple promises.

Further Reading

Summary

ES11’s enhancements, particularly around promise handling and code dynamism (through dynamic imports and optional chaining), reflect a continuous effort to make JavaScript more flexible and powerful. These features not only simplify certain operations but also