What Was Added to ECMAScript in 2023

ECMAScript is the standard for the JavaScript programming language, which establishes rules, syntax, and other criteria for creating JavaScript code.

ECMAScript is annually expanded by the JavaScript developer community and aligns with the ECMA International standards. The most recent updates to ECMAScript include new features and methods that help developers write more flexible and powerful code.

These updates enable the creation of higher-quality and faster web applications, as well as provide scalability and code support in the future.

The updates contribute to making the majority of web applications more powerful and performant, thus expanding possibilities for creating innovative and unique JavaScript-based applications.

Here are the features that were added to ECMAScript in 2023:

Array.prototype.findLast()

This function allows you to find the last element in an array that matches a given condition.

Please note that I have provided a fictional example for the sake of demonstration, as my knowledge only goes up until September 2021, and I cannot provide information on future developments in ECMAScript beyond that point.

const array = [{a: 1, b: 1}, {a: 2, b: 2}, {a: 3, b: 3}, {a: 4, b: 4}]

console.log(array.findLast(n => n)); //result -> {a: 4,b: 4 }

console.log(array.findLast(n => n.a * 5 === 20)); // result -> {a:4,b:4} as the condition is true so it returns the last element.

console.log(array.findLast(n => n.a * 5 === 21)); //result -> undefined as the condition is false so return undefined instead of {a:4,b:4}.

console.log(array.findLastIndex(n => n.a * 5 === 21)); // result -> -1 as the condition is not justified for returning the last element.

console.log(array.findLastIndex(n => n.a * 5 === 20)); // result -> 3 which is the index of the last element as the condition is true.

Hashbang Grammar

This feature allows us to use Hashbang/Shebang in certain command-line interfaces (CLI).

Shebang is represented by #! and is a special string at the beginning of a script that informs the operating system which interpreter to use when executing the script.

#!/usr/bin/env node
// in the Script Goal
'use strict';
console.log(2*3);

#!/usr/bin/env node
// in the Module Goal
export {};
console.log(2*2);

The line #!/usr/bin/env node invokes the Node.js source file directly as an executable file.

We don’t need the line #!/usr/bin/env node to explicitly call the file through the Node interpreter, for example, node ./file.

Symbols as keys in WeakMap

Now it is possible to use unique symbols as keys.

Prior to this update, WeakMaps could only use objects as keys. Objects are used as keys for WeakMaps because they have the same identity aspect.

Symbol is the only primitive type in ECMAScript that allows unique values to be used for it. Symbol can now be used as a key instead of creating a new object using WeakMap.

const weak = new WeakMap();

const key = Symbol('my ref');
const someObject = { a:1 };

weak.set(key, someObject);
console.log(weak.get(key));

Here are other use cases related to ShadowRealms, Records & Tuples, and using symbols as WeakMaps.

Modifying an array through copying

The update provides additional methods in Array.prototype to make changes to an array by returning a new copy with modifications instead of updating the original array.

The newly introduced functions in Array.prototype are:

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

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]

/* toReversed */

const reversed = numbers.toReversed();
console.log("reversed", reversed); // "reversed", [9, 8, 7, 6, 5, 4, 3, 2, 1]
console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9]

/* toSorted  */
const sortedArr = numbers.toSorted();
console.log("sorted", sortedArr); // "sorted", [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9]

/* with */
const replaceWith = numbers.with(1, 100);
console.log("with", replaceWith); // "with", [1, 100, 3, 4, 5, 6, 7, 8, 9]
console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9]

/* toSpliced */
const splicedArr = numbers.toSpliced(0, 4);
console.log("toSpliced", splicedArr); // "toSpliced", [5, 6, 7, 8, 9]
console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9]

The updates to ECMAScript have brought an amazing set of new features that greatly facilitate coding. If you have already had a chance to try out the new functions, please write in the comments if it has become more convenient for you to work.