Top 4 JavaScript features from ECMAScript 2023
ECMAScript, the official language specification of JavaScript, has come up with a new release for the year 2023 in June, and I’m excited to present to you the most valuable features. This release doesn’t have as many changes as in the previous years, but definitely interesting ones that developers have longed for over the years.
JavaScript is the language of the web and one of the most popular ones, because it’s easy for beginners to learn. And, it never stops evolving, because the maintainers of JavaScript continuously try to improve it and add new features to it.
Every year since 2015, they have been inventing new JavaScript features to make JavaScript more pleasant to use. Sometimes they are overlooked by the community, however, some of them are real game changers (one of them is also mentioned in these series of JavaScript novelties).
1. Hashbang Grammar
A hashbang (also called a “she-bang”) is the somewhat strange line that you sometimes see on the beginning of a script file, like this one:
#!/usr/bin/env nodeThis line indicates which interpreter the JavaScript file must be run with. Typically, it starts with a hash symbol and an exclamation mark, followed by something like ‘usr/bin/env node’ to determine the absolute path to the interpreter. This hashbang signifies, for example, that the script can be read with Node.
Naturally, this is not valid JavaScript, but it’s commonly used in the JavaScript world. Your computer’s operating system will examine the she-bang before executing the file using “node your-script-file.js” in order to figure out how to run it. Because it has been already used as a de facto standard for quite some time now, the inventors of ECMAScript have decided to make the hashbang the standard. The JavaScript interpreter sees it as a valid comment in the language now. Before, browsers had always ignored it, and Node could only handle it if it was the first line of the script file.
2. Symbols as WeakMap Keys
Since the ECMAScript standard of 2015, the WeakMap API has existed and is used as a kind of dictionary in which you can associate unique keys with their corresponding values. So far, keys were only reserved for the data type ‘Object’. Now, it’s also possible to use the type ‘Symbol’ as a key. I know, this is a very specific case, and you might never come in touch with it, since symbols are used rarely anyway in the life of a web developer. But, in case you need it someday, it can be useful.
let weakMap = new WeakMap();
let mySymbolKey= Symbol("status");
weakMap.set(mySymbolKey, "ok");3. New findLast() Array Method
The next feature might excite web developers more because working with arrays is a common procedure in our daily business. And this has become even easier with the novelties of ECMAScript 2023, because it has proposed and chosen 2 new ways to find items in an array:
The first one is an extension to the already existing find() method, which finds the first appearance in an array, which fulfills the given condition provided in the argument, the callback function:
const allFriends = ["Thomas", "Chrissi", "Alex", "Andrea", "Patricia"];
const firstFriendWithA = allFriends.find((friend) => friend.startsWith("A"));
console.log(firstFriendWithA); // AlexBut until now, if you were interested in the last item that meets a certain criterion, you had to reverse the array at first, find the first appropriate element with the find or findIndex method, and then reverse the whole array again. This is of course very cumbersome and error-prone.
That’s why ECMAScript version 2023 offers a solution and introduces the new findLast() and findLastIndex() methods. There are cases, in which finding the last item in an array, which meets a certain condition, is required. And sometimes a search inside an array from the end to the beginning may even result in a better performance of the overall application.
4. New Copying Characteristic of Existing Array Methods
The inventors of the ECMAScript specs did not settle for the latter, giving more power to array methods. They have responded to the general dissatisfaction of some developers, who were puzzled by the fact that some array methods did not create new arrays and therefore used them less often. After all, when you want to do something with the modified arrays, it would be nice to be able to save and reuse them.
Thankfully, this is now realizable through the new methods of Array.prototype and TypedArray.prototype, which enable changes to the array and the return of a new copy of the target array with the change.
Those are:
toSorted(sortingFn) <=> sort(sortingFn)→ sorts the items of a given array (default is alphabetically) and gives back a new array
toReversed() <=> reverse()→ reverses the order of the array items and returns a new array
toSpliced(start, deleteCount, item1, item2, itemN) <=> splice()→ removes or replaces one or more elements from a given array and returns a copy of the altered array
with(index, value)→ replaces one value at a given index by a new value and returns the altered array
All of those methods have in common that they keep the original array intact (immutable data structure) and return a copy of it with the change instead.
These new methods come in handy, for example in React, where you must often efficiently detect changes in a complex data type like an array. But due to the necessity of replicating the entire array each time, said methods are not the fastest, and they significantly increase memory consumption due to the constant copying. Therefore, you must consider as a developer what is more important in your application, efficient change detection or memory requirements.
These were the new benefits of the ECMAScript update of this year. Some of them are, of course, rather special cases that you will rarely come across. However, in my opinion, it’s always good to be aware of how the language evolves over time, even if you use it less frequently in your day-to-day work. It’s easier to learn new concepts of a programming language gradually, even in the form of an overview presentation like this one, rather than learning all at once. Use them wisely and wherever you think they make sense. They also have good browser support, but you should watch out for older browser versions released before June 2023, as they most likely don’t accept these code changes yet.
Resources:
