How to Change Array by Copy in ECMAScript 2023

If you are a JavaScript developer, you probably know that arrays are one of the most versatile and useful data structures in the language. Arrays can store any type of value, from numbers and strings to objects and functions. Arrays also have many built-in methods that allow you to manipulate and transform them in various ways.

However, some of these methods have a drawback: they mutate the original array. This means that they change the array in place, rather than returning a new array. For example, the sort, splice, and reverse methods all modify the array that they are called on. To avoid this problem, you might have used some workarounds, such as creating a copy of the array before applying the method or using other methods that do not mutate the array, such as map, filter, or slice. However, these solutions can be verbose, inefficient, or limited in functionality.

In addition, this can lead to unexpected side effects and bugs, especially if you are working with shared or nested arrays. In functional programming, it’s often desirable to avoid mutating data. This is where ES 14’s new feature “Change Array by Copy” comes into the picture. This feature adds 4 new methods to the Array prototype that allow you to perform common array operations without mutating the original array. Instead, these new methods return a new array with the desired changes applied. This can help prevent bugs and make your code predictable and easier to reason about.

Now, let’s take a look at these shiny new tools in our JavaScript toolbox:

• toSorted: This method returns a new array that is sorted according to a compare function or the default lexicographic order. It does not change the original array, unlike the sort method.
• toSpliced: This method returns a new array that is the result of adding or removing elements from a specified index. It does not change the original array, unlike the splice method.
• toReversed: This method returns a new array that is the reverse of the original array. It does not change the original array, unlike the reverse method.
• with: This method allows us to replace the value at a certain index (similar to using the bracket notation) and returns a new array. It does not change the original array.

JavaScript’s New Array Methods Visualized

These methods are easy to use and follow the same syntax and semantics as their mutating counterparts. The only difference is that they return a new array instead of modifying the existing one. Let’s see some examples of how to use them:

// Create an array of numbers
let numbers = [5, 2, 9, 4, 7, 1, 8, 6, 3];

// Sort the array in ascending order
let sorted = numbers.toSorted(); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(numbers); // [5, 2, 9, 4, 7, 1, 8, 6, 3]

// Sort the array in descending order
let sortedDesc = numbers.toSorted((a, b) => b - a); // [9, 8, 7, 6, 5, 4, 3, 2, 1]
console.log(numbers); // [5, 2, 9, 4, 7, 1, 8, 6, 3]

// Remove the first two elements and add 'a' and 'b' at the beginning
let spliced = numbers.toSpliced(0, 2, 'a', 'b'); // ['a', 'b', 9, 4, 7, 1, 8, 6, 3]
console.log(numbers); // [5, 2, 9, 4, 7, 1, 8, 6, 3]

// Reverse the array
let reversed = numbers.toReversed(); // [3, 6, 8, 1, 7, 4, 9, 2, 5]
console.log(numbers); // [5, 2, 9, 4, 7, 1, 8, 6, 3]

// Update 2nd index of the array
let modified = numbers.with(2, 10); // [5, 2, 10, 4, 7, 1, 8, 6, 3]
console.log(numbers); // [5, 2, 9, 4, 7, 1, 8, 6, 3]

As you can see, these methods are very convenient and powerful. They allow you to perform common array operations without worrying about mutating the original array. They also make your code more readable and expressive, as you can chain them together to create complex transformations.

Change Array by Copy is one of the many exciting features that ECMAScript 2023 brings to JavaScript. If you want to learn more about it, you can check out the official proposal on GitHub. Starting Chrome 110, these methods are also available to try out in the browser. So, go give them a whirl!

I hope you enjoyed this blog post and learned something new. If you have any questions or feedback, feel free to comment below. Stay tuned for more exciting updates from the world of JavaScript. Happy coding! 🚀