Change Array by Copy: Four New Non-Destructive Array Methods in JavaScript

When working with arrays in JavaScript, one common challenge is ensuring that array manipulations do not affect the original array. This is especially important when working with state management in applications like React or Redux, where immutability is crucial. In JavaScript, the typical array methods like push(), pop(), shift(), and unshift() modify the original array, which can lead to unintended side effects.

Fortunately, recent additions to JavaScript provide non-destructive (or immutable) methods that allow you to create a new array with changes applied, leaving the original array intact. These methods are ideal for when you want to update or manipulate arrays without altering the original reference.

In this tutorial, we will explore four of these new non-destructive array methods introduced in ES6 and beyond: Array.prototype.concat(), Array.prototype.slice(), Array.prototype.map(), and Array.prototype.filter().

Not a Medium member? Read this article here

1. concat() – Concatenating Arrays without Modifying the Original

The concat() method is used to merge two or more arrays into a new array. It does not change the original arrays, making it non-destructive.

Example:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// Concatenating arr1 and arr2 into a new array
const newArray = arr1.concat(arr2);

console.log('Original arr1:', arr1);  // [1, 2, 3]
console.log('Original arr2:', arr2);  // [4, 5, 6]
console.log('New concatenated array:', newArray);  // [1, 2, 3, 4, 5, 6]

As shown above, concat() creates a new array without modifying arr1 and arr2. This is useful when you want to combine multiple arrays but need to preserve the original data.

2. slice() – Extracting a Subarray without Affecting the Original

The slice() method returns a shallow copy of a portion of an array into a new array object. It allows you to specify the start and end indices to extract a subset of the array, and crucially, it does not modify the original array.