ECMAScript 2023 Highlights: What to expect

Explore the latest and exciting additions in ES 2023.

This article aims to guide you through the upcoming features of ECMAScript 2023 (ES 14) by providing examples along the way. We will discuss these new proposals that are expected to be included in ECMAScript 2023.

ECMAScript (often abbreviated as ES) is a standardized programming language that is used for scripting and building web applications. It is the language upon which JavaScript is based and provides the foundation for the dynamic and interactive features of modern web applications. ECMAScript is maintained by the Ecma International standards organization and is updated regularly with new features and improvements.

ECMAScript 2023 is the next version of the ECMAScript language, and it is expected to be released at the end of June 2023. Four proposals for ECMAScript 2023 (ES14) have been finalized this year and are currently listed on GitHub as completed proposals that are approaching official release. These proposals are expected to be formally released in June 2023.

https://github.com/tc39/proposals/blob/main/finished-proposals.md

Let’s take a look at each of these proposals.

Array find from last

This proposal adds the following two methods to the Array and TypedArray prototypes:

• findLast()
• findLastIndex()

This new feature being suggested works in a similar way to two existing methods called Array.prototype.find and Array.prototype.findIndex. However, there is one important difference: instead of starting at the beginning of the array and moving forward, this proposed feature would start at the end of the array and move backward. The Array.prototype.findand Array.prototype.findIndex methods search the array from the first element to the last, while the findLast() and findLastIndex() methods would search the array from the last element to the first.

Let’s take a look at some examples to see how these new methods work:

const isMultipleOfTwo = (number) => number % 2 === 0;
const numbers = [4, 9, 1, 2, 8];

// traverse from first to the last element
console.log(numbers.find(isMultipleOfTwo)); // 4
console.log(numbers.findIndex(isMultipleOfTwo)); // 0

// traverse from last to the first element
console.log(numbers.findLast(isMultipleOfTwo)); // 8
console.log(numbers.findLastIndex(isMultipleOfTwo)); // 4

Hashbang Grammar

A hashbang is a set of characters placed at the start of a script that specifies which interpreter should run the program. This proposed feature aims to assist developers who want to create scripts that can be directly executed from the command line. It will simplify the process of defining the interpreter for the script, making it easier to run the script on various operating systems. Without a hashbang, you typically need to use a specific command (e.g., “node”) to execute the script in a terminal.

// hashbang.js
#!/usr/bin/env node
console.log('hashbang');

// nohashbang.js
console.log('no hashbang')

Symbols as WeakMap keys

Originally, WeakMap in JavaScript allowed only objects to be used as keys. Objects and Symbols are unique and cannot be duplicated, making them suitable choices for keys in WeakMap. However, previous versions or specifications limited the use of keys to only objects. previous versions or specifications allowed only objects to be used as keys, but this proposal adds non-registered symbols to the list of allowed keys.

Let’s take a look at an example to see how it works:

const wm1 = new WeakMap();
const wm2 = new WeakMap();

const o1 = {};
const o2 = function () {};

wm1.set(o1, 37);
wm1.set(o2, "azerty");
wm2.set(o1, o2); // a value can be anything, including an object or a function
wm2.set(wm1, wm2); // keys and values can be any objects. Even WeakMaps!

// use symbol as key
const wm3 = new WeakMap();
const key = Symbol("symbolAsKey");
wm3.set(key, "Value");
console.log(wm3.get(key)); // Value

Change Array by Copy

The Change Array by Copy proposal adds new methods on Array.prototype and TypedArray.prototype that returns a new copy instead of mutating the original array in place.

This proposal introduces the following function properties to Array.prototype:

• Array.prototype.toReversed() -> Array
• Array.prototype.toSorted(compareFn) -> Array
• Array.prototype.toSpliced(start, deleteCount, ...items) -> Array
• Array.prototype.with(index, value) -> Array

All of those methods keep the target Array untouched and returns a copy of it with the change performed instead.

toReversed, toSorted, and with will also be added to TypedArrays:

• TypedArray.prototype.toReversed() -> TypedArray
• TypedArray.prototype.toSorted(compareFn) -> TypedArray
• TypedArray.prototype.with(index, value) -> TypedArray

Let’s take a look at some examples of how this works:

// toReversed()

// Array
const original = [1, 2, 3, 4];
const reversed = original.toReversed();
console.log(original); // [ 1, 2, 3, 4 ]
console.log(reversed); // [ 4, 3, 2, 1]

// TypedArray
const original1 = new Uint8Array([1, 2, 3, 4]);
const reversed1 = original1.toReversed();
console.log(original1); // [ 1, 2, 3, 4]
console.log(reversed1); // [ 4, 3, 2, 1]

// toSorted()

// Array
const original = [7, 10, 9, 8];
const sorted = original.toSorted((a, b) => a - b);
console.log(original); // [ 7, 10, 9, 8 ]
console.log(sorted); // [ 7, 8, 9, 10 ]

// TypedArray
const original1 = new Uint8Array([7, 10, 9, 8]);
const sorted1 = original1.toSorted((a, b) => a - b);
console.log(original1); // [ 7, 10, 9, 8 ]
console.log(sorted1); // [ 7, 8, 9, 10 ]

// toSpliced()

const original = [1, 5];
const spliced = original.toSpliced(1, 0, 2, 3,4);

console.log(original); // [ 1, 5]
console.log(spliced); // [ 1, 2, 3, 4, 5 ]

// with()

// Array
const original = [1, 3, 3, 4, 5];
const replaced = original.with(1, 2);

console.log(original); // [ 1, 3, 3, 4, 5 ]
console.log(replaced); // [ 1, 2, 3, 4, 5 ]

// TypedArray
const original1 = new Uint8Array([1, 3, 3, 4, 5]);
const replaced1 = original1.with(1, 2);

console.log(original1); // [ 1, 3, 3, 4, 5 ]
console.log(replaced1); // [ 1, 2, 3, 4, 5 ]

Conclusion

I hope this article has given you a detailed summary of what you can anticipate in ECMAScript 2023. We still have some time until June, and there’s a chance that additional features might be added to the final release of ECMAScript 2023.

I hope this article has been helpful and enjoyable for you. If you have any questions or comments, please don’t hesitate to contact me. I would also appreciate 👏 if you like the post, so others can find this too.

Thanks for reading! If you enjoy reading this post, got help, knowledge, inspiration, and motivation through it, and you want to support me — you can “Buy me A Coffee.” Your support really makes a difference.

Thanks, and see you next time!

References

proposals/finished-proposals.md at main · tc39/proposals

Man Pointing PNGs is downloaded from https://www.vecteezy.com/free-png/man-pointing