Exploring the Latest Features Coming to JavaScript—ES2023
source link: https://www.telerik.com/blogs/exploring-latest-features-coming-javascript-es2023
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Exploring the Latest Features Coming to JavaScript—ES2023
ECMAScript 2023 (ES14) introduced several enhancements to JavaScript, optimizing both functionality and expressiveness. This article shows you the latest additions: the much-anticipated findLast
and findLastIndex
array methods, new immutable array methods like toSorted
and toSpliced
, symbols as WeakMap keys, and the inclusion of Hashbang Grammar.
Since the introduction of ES2015, commonly known as ES6, JavaScript has been evolving at a dynamic pace. With new functionality being added every year, the latest release—ECMAScript 2023 (ES14)—brings a number of useful features to JavaScript.
In this article, we will delve into the latest additions—new array methods, symbols as WeakMap keys and Hashbang Grammar support.
New Array Methods: findLast and findLastIndex
findLast Array Method
ES2023 introduced the findLast
array method, a very useful addition that simplifies the process of locating the last element in an array that satisfies a given predicate function. Let’s illustrate this with an example:
const numbers = [1, 2, 3, 4, 5, 6, 7]
const lastEvenNum = numbers.findLast(number => number % 2 === 0)
// lastEvenNum is 6
With findLast
, you can quickly pinpoint the last matching element in an array. Before this, there were a few different solutions to achieving this result. For example, we could first reverse an array and then find the first element that matches the predicate.
const numbers = [1, 2, 3, 4, 5, 6, 7]
const lastEvenNum = [...numbers].reverse().find(number => number % 2 === 0)
// lastEvenNum is 6
This solution is OK when not dealing with very large arrays. The code above creates a new copy of the numbers
array, reverses it and then finds the first element that matches the predicate. The cost of additional operations is negligible if you are dealing with small datasets.
A more performant approach requires looping through the numbers array just once and assigning values that match the predicate to a variable.
const numbers = [1, 2, 3, 4, 5, 6, 7]
let lastEvenNum
for (const num of numbers) {
if (num % 2 === 0) {
lastEvenNum = num
}
}
// lastEvenNum is 6
This solution is more imperative, but is much faster, as it requires only one loop and doesn’t involve copying the numbers array and reversing it.
findLastIndex Array Method
Building on the concept of finding the last element, ES2023 also introduced findLastIndex
. This method returns the index of the last element that meets a specific condition. Here’s a practical application:
const numbers = [1, 2, 3, 4, 5, 6, 7]
const lastEvenNumIndex = numbers.findLastIndex(number => number % 2 === 0)
// lastEvenNumIndex is 5
Below, you can see how we can find an index of the last element that matches the predicate using a for loop.
let lastEvenNumIndex;
for (let i = 0; i <= numbers.length; i++) {
const num = numbers[i];
if (num % 2 === 0) {
lastEvenNumIndex = i;
}
}
// lastEvenNumIndex is 5
The findLastIndex
method is much cleaner and more declarative than the imperative for loop solution.
New Immutable Array Methods: toSorted, toSpliced and with
findLast
and findLastIndex
are not the only array methods introduced in ES2023. Other new array methods are toSorted
, toSpliced
and with
.
But wait, don’t we already have sort
and splice
methods? Why do we need toSorted
and toSpliced
?
The problem with sort
and splice
methods is that they mutate the original array they are called on. Here’s an example:
const fruits = ['banana', 'kiwi', 'apple', 'orange']
const sortedFruits = fruits.sort((a, b) => a.localeCompare(b))
// sortedFruits is ['apple', 'banana', 'kiwi', 'orange']
// fruits also is now ['apple', 'banana', 'kiwi', 'orange']
The sortedFruits
const receives a sorted array of fruits. However, the fruits
array was also modified. This behavior can lead to accidental data mutations that were not expected.
The same applies to the splice
method. The splice
method can be used to add, replace and remove items from an array, but it also mutates the original array. That’s where the new methods come in. Let’s have a look at each of the newly added methods.
toSorted Array Method
The toSorted
method, as you probably already guessed, is a new alternative to the sort
method. It allows you to create a sorted version of an array without altering the original. Here’s an example of sorting fruits alphabetically, but this time with the toSorted
method.
const fruits = ['banana', 'kiwi', 'apple', 'orange']
const sortedFruits = fruits.toSorted((a, b) => a.localeCompare(b))
// sortedFruits is ['apple', 'banana', 'kiwi', 'orange']
// fruits is ['banana', 'kiwi', 'apple', 'orange']
The toSorted
method creates a copy instead of mutating the original array. This results in more predictable code and prevents accidental data mutations.
toSpliced Array Method
With toSpliced
, you can create a new array by splicing elements without modifying the source array.
const items = ['carrot', 'banana', 'potato']
const vegetables = items.toSpliced(1, 1)
// vegetables is ['carrot', 'potato']
This method is particularly handy when you need to manipulate arrays without side effects.
with Array Method
Completing the set of new array methods is the with
method. It enables you to replace an element at a specified index, creating a new array while preserving the original:
const vegetables = ['carrot', 'potato']
const updatedVegetables = vegetables.with(1, 'parsnip')
// updatedVegetables is ['carrot', 'parsnip']
The with
method is an immutable equivalent of updating an array using the bracket notation.
const vegetables = ['carrot', 'potato']
const newVegetables = [...vegetables]
newVegetables[1] = 'parsnip'
// updatedVegetables is ['carrot', 'parsnip']
Symbols as WeakMap Keys
Another interesting change in ES2023 is the inclusion of symbols as WeakMap keys. Previously, symbols were not allowed in this context. This enhancement offers new possibilities, as illustrated in the following example:
const weakMap = new WeakMap()
const uniqueSymbolKey = Symbol('myUniqueSymbolKey')
weakMap.set(uniqueSymbolKey, 'value')
console.log(weakMap.get(uniqueSymbolKey)) // 'value'
This update extends the versatility of symbols and WeakMaps, which are a great tool for associating additional information to certain values without affecting garbage collection.
Hashbang Grammar
JavaScript in ES2023 now embraces Hashbang Grammar, allowing developers to specify the program or engine used to execute a script. This feature is useful in various environments and can be implemented as follows:
#!/usr/bin/env node
console.log('I am a JS script that should be run in Node.js!')
Conclusion
ES2023 ushered in a new era of JavaScript development, marked by improved functionality and expressiveness. The new array methods, immutable array methods, symbols as WeakMap keys, and Hashbang Grammar collectively contribute to a more versatile and efficient language.
The JavaScript Map Object
A Map object in JavaScript is a collection of key-value pairs where the keys can be of any type, including objects or functions. Explore how to create and use Map objects, and the differences they bring when compared to regular JavaScript objects.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK