Some Important ES13 Features for Modern Development

ECMAScript 2023, often referred to as ES13, introduces several new features and improvements to the JavaScript language. These updates are designed to enhance development efficiency, improve code readability, and introduce new functionalities. Here’s a summary of the key features in ES13 that are particularly relevant for modern development:

1. Array.prototype.at()

- Description: The at() method allows you to access elements from the end of an array using negative indices.

- Example:

const arr = [1, 2, 3, 4];
console.log(arr.at(-1)); // Output: 4
console.log(arr.at(-2)); // Output: 3        

2. Array.prototype.findLast() and Array.prototype.findLastIndex()

- Description: These methods return the last element (or index) in the array that satisfies a provided testing function.

- Example:

const numbers = [5, 12, 50, 130, 44];
console.log(numbers.findLast(n => n < 50)); // Output: 44
console.log(numbers.findLastIndex(n => n < 50)); // Output: 4        

3. Change Array by Copy

- Description: Methods such as toReversed(), toSorted(), and toSpliced() allow you to create a new array with changes, rather than mutating the original array.

- Example:

const arr = [1, 2, 3];

  console.log(arr.toReversed()); // Output: [3, 2, 1]

  console.log(arr.toSorted()); // Output: [1, 2, 3]

  console.log(arr.toSpliced(1, 1, 'a', 'b')); // Output: [1, 'a', 'b', 3]        

4. Hashbang Grammar

- Description: This feature allows JavaScript files to start with #!, which is useful for scripting languages and tools that need to specify the interpreter.

- Example:

 #!/usr/bin/env node

  console.log('Hello, World!');        

5. WeakRefs

- Description: Weak references allow you to hold a weak reference to an object without preventing it from being garbage collected.

- Example:

  let obj = { name: 'John' };

  const weakRef = new WeakRef(obj);

  console.log(weakRef.deref()); // Output: { name: 'John' }

  obj = null; // The object may be garbage collected        

6. FinalizationRegistry

- Description: This feature allows you to register callbacks to be invoked when objects are garbage collected. It's useful for cleaning up resources.

- Example:

 const registry = new FinalizationRegistry((heldValue) => {

    console.log(`Cleaning up ${heldValue}`);

  });

  let obj = { name: 'John' };

  registry.register(obj, 'Some resource');

  obj = null; // The callback will be triggered when obj is garbage collected        

7. Error Cause

- Description: This feature adds a cause property to the Error object, allowing you to attach additional context to errors.

- Example:

  try {

    throw new Error('Something went wrong', { cause: new Error('Original cause') });

  } catch (e) {

    console.log(e.cause.message); // Output: Original cause

  }        

8. Logical Assignment Operators

- Description: New logical assignment operators (`&&=`, ||=, ??=) combine logical operations with assignment.

- Example:

let a = 1;

  let b = 0;

  a &&= 2; // Equivalent to: a = a && 2;

  b ||= 2; // Equivalent to: b = b || 2;

  console.log(a); // Output: 2

  console.log(b); // Output: 2        

9. WeakMap and WeakSet Improvements

- Description: Improvements to WeakMap and WeakSet include better handling of keys and values.

- Example:

const weakMap = new WeakMap();

  const obj = {};

  weakMap.set(obj, 'value');

  console.log(weakMap.get(obj)); // Output: 'value'        

Top-Level Await

- Description: Allows the use of await at the top level of a module without wrapping it in an async function.

Example:

// In an ES module
const data = await fetch('https://api.example.com/data').then(res => res.json());
console.log(data);