ES12 Ecmascript 2011

JavaScript 2

Introduction

ECMAScript 2021, also known as ES12, marked another significant milestone in the evolution of JavaScript, introducing a variety of features that further improved the language’s usability and functionality. Officially released in June 2021, ES12 brought in enhancements that simplified complex operations and added new capabilities, making JavaScript even more efficient and developer-friendly.

ECMAScript 2021 Language Specification

Detailed Feature Explanation with Examples

1. String.prototype.replaceAll

Explanation:

  • The replaceAll method allows you to replace all occurrences of a substring within a string, unlike the replace method, which only replaces the first occurrence.

Example:

javascript 
	let phrase = 'Hello World, Hello Universe';
	console.log(phrase.replaceAll('Hello', 'Goodbye')); // "Goodbye World, Goodbye Universe"

2. Logical Assignment Operators

Explanation:

  • Combines logical operators (&&, ||, ??) with assignment. This simplifies some common logic operations, reducing the need for more verbose conditional statements.

Example:

javascript 
	let a = 1;
	let b = null;
	b ||= a;
	console.log(b); // 1

3. Numeric Separators

Explanation:

  • Numeric separators improve the readability of numeric literals by allowing underscores (_) as separators to create visual separation in numeric literals.

Example:

javascript 
	let billion = 1_000_000_000;
	console.log(billion); // 1000000000

4. Promise.any

Explanation:

  • Promise.any takes an iterable of Promise objects and, as soon as one of the promises in the iterable fulfills, returns a single promise that resolves with the value from that promise.

Example:

javascript 
	Promise.any([Promise.reject('First'), Promise.resolve('Second'), Promise.resolve('Third')]).then((value) =>
	  console.log(value)
	); // Logs "Second"

5. WeakRefs and FinalizationRegistry

Explanation:

  • WeakRef offers a way to hold a weak reference to an object without preventing the object from being reclaimed by garbage collection. FinalizationRegistry provides a way to register a callback to be executed after an object is garbage collected.

Example:

javascript 
	let obj = {};
	const weakref = new WeakRef(obj);
	
	const registry = new FinalizationRegistry((value) => {
	  console.log(`The object ${value} has been garbage collected`);
	});
	
	registry.register(obj, 'obj');
	obj = null; // Object is now eligible for garbage collection

6. AggregateError

Explanation:

  • A new error type that represents multiple errors wrapped in a single object. Useful for handling multiple errors together, especially in Promise-based code.

Example:

javascript 
	try {
	  throw new AggregateError([new Error('error1'), new Error('error2')], 'Multiple errors occurred');
	} catch (e) {
	  console.log(e.name); // "AggregateError"
	  console.log(e.message); // "Multiple errors occurred"
	}

Common Pitfalls

  • Misusing numeric separators in a way that makes numbers less readable.
  • Overlooking the potential memory management implications of using WeakRefs and FinalizationRegistry.

Further Reading

Summary

ES12 continues to enhance JavaScript’s capabilities, focusing on simplifying syntax, improving readability, and handling asynchronous operations more effectively. The additions in ES12, like logical assignment operators and Promise.any, demonstrate ongoing efforts to streamline JavaScript coding practices and make the language more robust and developer-friendly.