What’s New in ES2023 (ES14)?

JavaScript keeps evolving. While our previous article on ES6 covered nine major features that transformed JavaScript in 2015, the language hasn't stood still. Each year brings new capabilities - and while none have been as dramatic as ES6, they're making JavaScript better, piece by piece.

Let's look at what landed in ES2023 (ES14), released in June 2023. These changes matter: in tech interviews, showing you understand JavaScript's evolution often sets you apart.

New Features in ES2023

1. Searching Arrays Backwards: findLast() and findLastIndex()

Think of arrays like a stack of cards. Traditional array methods start from the top, but sometimes you want to start from the bottom. That's what findLast() and findLastIndex() do - they're the reverse-gear versions of find() and findIndex().

Here's what they do:

• findLast(): Returns the value of the first matching element, working backwards
• findLastIndex(): Returns the position (index) of the first matching element, working backwards

If nothing matches? findLast() gives you undefined, while findLastIndex() returns -1.

Example:

const arr = [6, 16, 25, 20, 17, 13, 33, 10];

// Searches from start
const result1 = arr.find((x) => x > 20);
console.log(result1); // 25

const result2 = arr.findIndex((x) => x > 20);
console.log(result2); // 2

// Searches from end
const result3 = arr.findLast((x) => x > 20);
console.log(result3); // 33

const result4 = arr.findLastIndex((x) => x > 20);
console.log(result4); // 6

2. Four New Non-Destructive Array Methods

ES2023 brings four new array methods that don’t modify the original array, which can help make code more readable and easier to manage. These methods return a modified copy instead. They are:

• toReversed() - Returns a reversed copy of the array without changing the original array (unlike reverse()).

  const numbers = [1, 2, 3, 4, 5];
  const reversedNumbers = numbers.toReversed();
  console.log(reversedNumbers); // [5, 4, 3, 2, 1]
  

• toSorted(fn) - Returns a sorted copy of the array without modifying the original (unlike sort()).

  const numbers = [5, 2, 3, 4, 1];
  const sortedNumbers = numbers.toSorted();
  console.log(sortedNumbers); // [1, 2, 3, 4, 5]
  

• toSpliced(start, deleteCount, ...items) - Similar to splice() but non-destructive; removes items from the specified position, optionally adding new ones.

  const numbers = [1, 2, 3, 4, 5];
  const splicedNumbers = numbers.toSpliced(1, 2, 10, 20);
  console.log(splicedNumbers); // [1, 10, 20, 4, 5]
  

• with(index, value) - Replaces an item at a given index with a new value in a copy of the array.

  const fruits = ["Apple", "Orange", "Lemon", "Mango", "Cherry"];
  const newFruits = fruits.with(2, "Watermelon");
  console.log(newFruits); // ['Apple', 'Orange', 'Watermelon', 'Mango', 'Cherry']
  

These methods allow for cleaner, non-destructive array manipulation, supporting better code readability and maintainability.

3. Hashbang Syntax (Hashbang Grammar)

The Hashbang syntax, also known as a shebang, is a special comment that begins with #! and tells the system which interpreter to use for the script. This is only effective if placed at the very beginning of the file.

Here’s an example, which directs the system to use Node.js:

#!/usr/bin/env node
console.log("Hello world");

4. WeakMap Support for Symbols as Keys

WeakMaps are JavaScript's way of storing key-value pairs that don't prevent garbage collection. Until ES2023, they could only use objects as keys. Now they can use Symbols too, making them more flexible.

Here’s the distinction:

• Map keys can be any type.
• Before ES2023, WeakMap keys could only be objects. Now, Symbols are also allowed.

For more on Set, Map, WeakSet, and WeakMap, check out What’s the Difference Between Set, Map, WeakSet, and WeakMap?.