DEV Community

Cover image for What's Fresh in ECMAScript 2023 (ES14): A Closer Look
Mitchell Mutandah
Mitchell Mutandah

Posted on

What's Fresh in ECMAScript 2023 (ES14): A Closer Look

Hello, friends! 😊 Welcome to another exciting exploration into the world of JavaScript. Grab a cup of coffee, settle in, and let's dive into the fresh offerings of ECMAScript 2023. Ready? Let's go! πŸš€

deep dive

JavaScript never stands still! ECMAScript 2023 (ES14) rolled out, bringing forth a set of new features that promise to simplify and refine your coding experience. Let's delve into what's new and how you can leverage these changes.

1. Enhanced Array Search: findLast() and findLastIndex()

In the past, to search an array from its tail end, you typically had to reverse the array first. ES14 introduces findLast() and findLastIndex(), making it more straightforward.

Before ES14:

const isOdd = number => number % 2 === 1;
const arr = [1, 2, 3, 4, 5, 6, 7];
const reversedArr = [...arr].reverse();

console.log(reversedArr.find(isOdd));       // 7
console.log(reversedArr.findIndex(isOdd));  // 6
Enter fullscreen mode Exit fullscreen mode

With ES14:

const isOdd = number => number % 2 === 1;
const arr = [1, 2, 3, 4, 5, 6, 7];

console.log(arr.findLast(isOdd));           // 7
console.log(arr.findLastIndex(isOdd));      // 6
Enter fullscreen mode Exit fullscreen mode

2. Embracing Hashbang

ES14 brings standardized support for the hashbang (or shebang) syntax. It hints at which interpreter should be used for script execution.

Using Hashbang in a Script:

#!/usr/bin/env node
console.log("Hashbang in action!");
Enter fullscreen mode Exit fullscreen mode

3. Symbols in WeakMap

Previously, WeakMaps allowed only objects as keys. ES14 extends this capability to symbols, enhancing their versatility.

Using Symbols in WeakMap in ES14:

const weakMap = new WeakMap();
const symKey = Symbol("identifier");

weakMap.set(symKey, "Hello ES14");
console.log(weakMap.get(symKey));  // "Hello ES14"
Enter fullscreen mode Exit fullscreen mode

4. Array Alterations Without Mutation

ES14 has added methods that let you modify arrays without changing the original array, making functional programming patterns more accessible.

Examples:

const numbers = [1, 3, 2, 4, 5];

console.log(numbers.toReversed());     // [5, 4, 2, 3, 1]
console.log(numbers.toSorted());       // [1, 2, 3, 4, 5]
console.log(numbers.toSpliced(1, 3));  // [1, 5]
console.log(numbers.with(2, 10));      // [1, 3, 10, 4, 5]
Enter fullscreen mode Exit fullscreen mode

So in a nutshell....
The additions in ES14, from better array manipulation to extended WeakMap capabilities, aim to make JavaScript development smoother and more efficient. I'm eager to hear about your experiences. Have you tried these new features? Share your insights and let the developer community know how they're shaping up in real-world scenarios!

cheers

Top comments (0)