In JavaScript, when it comes to manipulating the order of elements within an array, reverse() and toReversed() are two commonly used methods, each having its unique functionality and application.

Old school reverse()

The reverse() method, a member of JavaScript's Array.prototype, alters the order of the array's elements, essentially flipping them. This method performs the operation in-place, implying that it directly modifies the original array.

Let's consider the example below:

In the above code, after applying reverse(), the original fruits array is also reversed. This is because reverse() is a destructive method and modifies the original array in-place.

Introducing toReversed() 🥳

In contrast to reverse(), the toReversed() method does not mutate the original array. Instead, it creates a new array, mirroring the elements of the original array in reverse order. This method comes handy when preserving the initial order of elements is crucial.

Let's consider a similar example:

In this example, the original numbers array remains unaffected after applying the toReversed() method, exhibiting its non-destructive nature.

Handling Sparse Arrays with toReversed()

An additional feature of toReversed() is its behaviour with sparse arrays. In JavaScript, a sparse array is an array where some elements are missing. The toReversed() method treats empty slots in sparse arrays as if they hold the undefined value.

Here, the empty slot in the array is considered as undefined when reversed.

When did the toReversed() method become available?

To enhance the adaptability and fluidity of array manipulation in JavaScript, the ECMAScript 2023 specification brings about a significant proposal named Change Array by Copy. This proposal enriches the set of methods on Array.prototype by introducing a suite of functions that operate on the array and return a new copy, instead of manipulating the original array.

The newcomers to this function suite include toReversed(), toSorted(), toSpliced(), and an additional method named with(). These methods are designed to mirror the behavior of existing methods reverse(), sort(), and splice(), and the typical array element replacement operation performed using bracket notation. However, these new methods ensure that the original array remains unaltered.

toSorted()

The toSorted() method, just like sort(), arranges the array elements in a certain order. The crucial difference is that it does not modify the original array.

toSpliced()

Similarly, toSpliced() acts as a non-destructive version of splice(). It returns a new array, incorporating the changes specified by the arguments, while the original array stays intact.

with()

Additionally, the with() method is an invaluable tool that replaces an element at a specified index with a given value and returns a new array, without touching the original array.

The Motivation behind these New Methods

Incorporating these methods in the language specification echoes the increasing emphasis on promoting functional programming styles in JavaScript, where data is usually treated as immutable. This development is a welcome addition for developers who frequently need to perform operations on arrays but wish to keep the original arrays unmodified.

For me personally, these new features significantly simplify array manipulation, particularly in scenarios where avoiding side effects is critical. By preventing accidental mutations, these methods make the code more predictable and easier to reason about, which is a key factor in reducing bugs and enhancing code readability.

Conclusion

In conclusion, the ECMAScript 2023 'Change Array by Copy' proposal introduces toReversed(), toSorted(), toSpliced(), and with(), paving the way for cleaner and more predictable code by offering non-destructive alternatives to traditional array manipulation methods.

Thanks for reading 🥰!