ECMAScript 2023 (ES14): Four New Features

24 April, 2023

Contributors

Kaushal Joshi

@clumsycoder

ECMAScript is a web standard that ensures interoperability of the source code across different web browsers. ECMAScript is famous for its subset, JavaScript. Every year, ECMA International, the organization that develops standards for the ECMAScript, releases a new version that defines and introduces changes to the core language.

This year, the latest version of ECMAScript specification is set to launch at the end of June. The team accepted four proposals for the newest version. In this blog, let us look at four new features ECMAScript, or ES14, will introduce to JavaScript.

Array find from last

Proposed by Wenlu Wang, this proposal finds an array of elements from the end. The proposal proposes two new methods on the Array and TypeArray prototypes: findLast() and findLastIndex. These work the same as find() and findIndex, except for the fact that they do it in reverse order.

findLast()traverses an array from the end and retrieves the value of the first element that satisfies the condition. undefined is returned if no element matches the condition.

const arr = [10, 23, 13, 43, 29]

const lowerThanThirty = arr.findLast(ele => ele < 30) 
// expected output: 29

In contrast, findLastIndex returns the index of the first element that satisfies the condition. If the condition is not satisfied, -1 is returned.

const arr = [10, 23, 13, 43, 29]

const lowerThanThirty = arr.findLastIndex(ele => ele < 30) 
// expected output: 4

Hashbang Grammar

Hashbang is a character sequence proceeding an executable script. It defines the interpreter for the program to run.

When the loader of the Linux Kernel executes the program, the host strips Hashbang to generate valid source code before passing it down to the JavaScript engine. The first line, i.e., Hashbang, is not a valid JS Code and needs to be removed before the source code goes to the engine for execution. The "Hashbang Grammar" feature proposed by Bradley Farias standardizes its procedure.

#!/usr/bin/env node

console.log("I am the first line");

The feature suggests enhancing the syntax of JavaScript. Additionally, removing the first line before executing the code will not require the extra step.

Symbols as WeakMap keys

Objects and Symbols are unique and can not be recreated in JavaScript. Hence they can be used the WeakMap keys. Weakmaps are Map-like collections that allow only objects as keys.

Previous ECMAScript specifications only allowed objects to be used as WeakMaps, but the new specification will also allow Symbols as WeakMap keys. The proposal adds non-registered Symbols to the list of allowed keys.

const weakMap = new WeakMap();
const key = Symbol("ref");
weakMap.set(key, "HELLO, ES14!");


console.log(weakMap.get(key));
// Expected output: "HELLO, ES14!"

Change array by copy

Some methods on Array.prototype, like reverse(), sort() and `splice()`, change the original array. The Change Array by Copy proposal introduces new methods that do not change the original array but return a new one with the changes. These methods are toReversed(), toSorted(), toSpliced() and with(). This proposal makes it easier to work with arrays without mutating them in place.

const original = [10, 2, 3, 4, 5]

const reversed = original.toReversed()
const sorted = original.toSorted();
const spliced = original.toSpliced(1, 0, 10, 10);
const withThirty = original.with(2, 30);


console.log({ original, reversed, sorted, spliced, spliced, withThirty })

The output will look something similar to this:

{
 original: [10, 2, 3, 4, 5],
 reversed: [5, 4, 3, 2, 1],
 sorted: [2, 3, 4, 5, 10],
 spliced: [10, 10, 10, 2, 3, 4, 5],
 withThirty: [10, 2, 30, 4, 5]
}

All of these methods maintain the original state of the target array and return a copy of it with the applied changes, making them mutable.

Frequently Asked Questions (FAQs)

Let's discuss some of the questions that often confuse many:

What is ECMAScript?

ECMAScript, also referred to as "ES," is a standard for scripting languages for the web. It ensures interoperability between different web browsers. It provides rules and guidelines that a web scripting language must follow. Programming languages like JavaScript and JScript are based on ECMAScript.

Is JavaScript the same as ECMAScript?

No. they are completely different.

ECMAScript is a specification defined in ECMA-262 published by ECMA International to develop general-purpose scripting languages.

In contrast, JavaScript is a scripting language that follows ECMAScript specifications. Although JavaScript's core features are based on ECMAScript, it also has some additional features that are not present in ECMAScript specification.

Closing Notes

These are the four new features we will be seeing in the upcoming ES14: Array find from last, Hashbang Grammar, Symbols as WeakMap keys, and Change array by copy. We will cover individual features in detail if we get to know something more useful about them. Until then, you can read these references:

javascript

ecmascript

features

es14

ecmascript2023