Complete Guide of New JavaScript Features from ECMAScript 2023

What is ECMAScript and how does it relate to JavaScript?

ECMAScript is a scripting language specification foundational to JavaScript. JavaScript engines like V8 (Chrome, Node.js) and SpiderMonkey (Firefox) adhere to ECMAScript standards, ensuring consistent behavior across platforms and browsers.

The latest ECMAScript 2023 (ES2023 or ES14) introduces exciting new features. Note that these features might not be available in all environments yet, so always check compatibility.

New Features of ECMAScript 2023:

1. Immutable Array Methods: Array.prototype in ES14 added methods like toReversed, toSorted, toSpliced, and with. These methods are immutable, meaning they return a new array without modifying the original one.

toReversed: array.toReversed()

Example:

const originalArray = [1, 2, 3, 4, 5]; 
const reversedArray = originalArray.toReversed(); 
console.log(originalArray); // Output: [1, 2, 3, 4, 5] 
console.log(reversedArray); // Output: [5, 4, 3, 2, 1]

toSorted: array.toSorted([compareFunction])

Example:

const numbers = [3, 1, 4, 1, 5, 9]; 
const sortedNumbers = numbers.toSorted((a, b) => a - b); 
console.log(sortedNumbers); // Output: [1, 1, 3, 4, 5, 9]

toSpliced: array.toSpliced(start, deleteCount, ...items)

Example:

const numbers = [1, 2, 3, 4, 5]; 
const splicedNumbers = numbers.toSpliced(2, 1, 6, 7); 
console.log(splicedNumbers); // Output: [1, 2, 6, 7, 4, 5]

with: array.with(index, value)

Example:

const numbers = [1, 2, 3, 4]; 
const updatedNumbers = numbers.with(2, 99); 
console.log(updatedNumbers); // Output: [1, 2, 99, 4]

2. Array Last Methods: findLast and findLastIndex provide efficient ways to search from the end of an array.

findLast: array.findLast(callbackFn)

Example:

const numbers = [7, 14, 21, 28, 35]; 
const lastOver20 = numbers.findLast(num => num > 20); 
console.log(lastOver20); // Output: 35

findLastIndex: array.findLastIndex(callbackFn)

Example:

const numbers = [7, 14, 21, 28, 35]; 
const lastIndexOver20 = numbers.findLastIndex(num => num > 20); 
console.log(lastIndexOver20); // Output: 4

3. Hashbang (Shebang) Comments Support: Allows executable scripts directly from the command line using #!.

Example:

#!/usr/bin/env node console.log("Hello, ECMAScript 2023!");

Symbols as Keys in Weak Collections: ES14 allows non-registered Symbols to be used as keys in weak collections like WeakMap.

Example:

const weakMap = new WeakMap(); 
const key = Symbol("key"); 
weakMap.set(key, "value"); 
console.log(weakMap.get(key)); // Output: value

Conclusion

ECMAScript 2023 has introduced significant advancements, enhancing JavaScript’s capabilities. Familiarizing with these new features is crucial for modern JavaScript development.

For more detailed exploration, check out the MDN documentation on each feature. Happy coding and exploring these new JavaScript capabilities!

Find me on your favorite platform

• Github — Follow me on GitHub for further useful code snippets and open source repos.
• LinkedIn Profile — Connect with me on LinkedIn for further discussions and updates.
• Twitter (X) — Connect with me on Twitter (X) for useless tech tweets.