Array Methods for Immutable Operations in JavaScript

Note: Before we begin with the blog, I would like to mention that this is my first blog, and I'm a beginner at writing technical articles. This article represents my current understanding as a beginner, and I might have made mistakes or overlooked certain details. Any feedback, tips, or suggestions for improvement are greatly appreciated.

Introduction

Arrays are a fundamental data structure in JavaScript used for storing collections of elements. Sometimes, we need to perform operations on arrays without modifying the original array. In this article, we'll explore the benefits of using array methods designed for immutability and compare them to the previous approach of using array methods with the spread operator.

Why Use Array Methods for Immutability?

Using array methods for immutability allows us to perform operations on arrays without changing the original array. These methods return a new array with the desired modifications while preserving the integrity of the original data.

Comparing with the Previous Approach

In the past, we often created a copy of the array using the spread operator and then applied array methods like reverse() or splice() to the copied array. However, this approach modified the original array, which might not be desirable in certain scenarios.

In contrast, the new array methods for immutability provide a more elegant solution. These methods return a new array with the desired modifications while leaving the original array untouched.

Array Methods for Immutability

1. toSorted() vs. sort() with Spread Operator:

   • The toSorted() method returns a new array with elements sorted in ascending order.

   • The previous approach involved creating a copy of the array using the spread operator and then using the sort() method on the copied array.

    const array = [3, 1, 2];

    // Using toSorted()
    const sortedArray = array.toSorted();
    console.log(sortedArray); // [1, 2, 3]
    console.log(array); // [3, 1, 2]

    // Previous way with sort() and spread operator
    const copiedArray = [...array];
    const previousSortedArray = copiedArray.sort();
    console.log(previousSortedArray); // [1, 2, 3]
    console.log(array); // [3, 1, 2]

1. toReversed() vs. reverse() with Spread Operator:

   • The toReversed() method returns a new array with elements in reversed order.

   • The previous approach involved creating a copy of the array using the spread operator and then using the reverse() method on the copied array.

    const array = [1, 2, 3];

    // Using toReversed()
    const reversedArray = array.toReversed();
    console.log(reversedArray); // [3, 2, 1]
    console.log(array); // [1, 2, 3]

    // Previous way with reverse() and spread operator
    const copiedArray = [...array];
    const previousReversedArray = copiedArray.reverse();
    console.log(previousReversedArray); // [3, 2, 1]
    console.log(array); // [1, 2, 3]

1. toSpliced() vs. splice() with Spread Operator:

• The toSpliced() method returns a new array with elements removed and/or replaced at a given index.

• The previous approach involved creating a copy of the array using the spread operator and then using the splice() method on the copied array.

const array = [1, 2, 3];

// Using toSpliced()
const splicedArray = array.toSpliced(1, 1, 4);
console.log(splicedArray); // [1, 4, 3]
console.log(array); // [1, 2, 3]

// Previous way with splice() and spread operator
const copiedArray = [...array];
const previousSplicedArray = copiedArray.splice(1, 1, 4);
console.log(previousSplicedArray); // [2]
console.log(copiedArray); // [1, 4, 3]
console.log(array); // [1, 2, 3]

1. with() Method vs. Previous Chaining:

• The with() method allows you to chain multiple array operations together in a concise and readable manner.

• The previous approach involved manually chaining array methods and creating copies of the array using the spread operator.

const array = [1, 2, 3];

// Using with() method
const modifiedArray = array.with(2, 4);
console.log(modifiedArray); // [1,2,4]
console.log(array); // [1, 2, 3]

// Previous method to change the elements of the array
const copiedArray = [...array];
copiedArray[2] = 6;
console.log(array); // [1, 2, 3]
console.log(copiedArray); // [1, 2, 6]

Note: Please keep in mind that these methods may also only work in modern browsers and may not be available in all JavaScript environments.

Conclusion

By leveraging array methods designed for immutability, we can perform operations on arrays without modifying the original array. This approach leads to cleaner, more readable code and reduces the chances of introducing bugs. The new array methods (toSorted(), toReversed(), toSpliced(), with()) provide a simpler and more concise alternative to the previous approach of manually copying arrays using the spread operator.

Embracing immutability improves code maintainability and helps create robust applications. I would like to extend my gratitude to the author, WebDevSimplified, for creating an insightful YouTube video on this topic. You can find the video here.

For more such content, stay tuned and subscribe to my newsletter.