How to Splice an Array Without Mutating the Original Array?

How to Splice an Array Without Mutating the Original Array?

Last Updated : 19 Nov, 2024

To splice or remove elements without changing the original array, you can use various techniques to create a copy first. Here are the most effective ways to do this

1. Using slice() and concat() Methods - Most Used

The combination of slice() and concat() methods allows you to remove elements from an array without mutating the original by creating a new array.

JavaScript

const a1 = [1, 2, 3, 4, 5];

// Remove elements at index 1 and 2
const a2 = a1.slice(0, 1).concat(a1.slice(3));
console.log(a2);
console.log(a1);

Output

[1, 4, 5]
[1, 2, 3, 4, 5]

2. Using filter() Method for Conditional Removal

The filter() method can be used to create a new array which only includes elements that meet a certain condition.

JavaScript

const a1 = [1, 2, 3, 4, 5];

// Remove elements at index 1 and 2
const a2 = a1.filter((_, index) => index !== 1 && index !== 2);
console.log(a2);
console.log(a1);

Output

[1, 4, 5]
[1, 2, 3, 4, 5]

3. Using the Spread Operator and slice() Method

The spread operator (...) with slice() is a simple way to remove elements without modifying the original array.

JavaScript

const a1 = [1, 2, 3, 4, 5];

// Remove elements at index 1 and 2
const a2 = [...a1.slice(0, 1), ...a1.slice(3)];
console.log(a2);
console.log(a1);

Output

[1, 4, 5]
[1, 2, 3, 4, 5]

4. Using map() Method with Conditionals

For more complex tasks, you can use map() to go through each item in an array and make changes. You can also set conditions to skip over items that meet certain criteria, so only the ones you want are included.

JavaScript

const a1 = [1, 2, 3, 4, 5];

// "Splice" out elements at specific indices
const a2 = a1.map((el, index) => (index === 1 || index === 2 ? null : el)).filter(el => el !== null);
console.log(a2);
console.log(a1);

Output

[1, 4, 5]
[1, 2, 3, 4, 5]

Importance of Non-Mutating Array Splicing

Non-mutating splicing is essential for

Functional Programming: Promotes immutability, reducing side effects.
Data Integrity: Ensures original data remains unchanged for reusability.
Concurrent Usage: Prevents unintended modifications when sharing data.

How to Splice an Array Without Mutating the Original Array?

devi_johns

Improve

Article Tags :

Similar Reads

How To Sort An Array Without Mutating The Original Array In JavaScript?

Sorting arrays is a common task in JavaScript, especially when you need to present data in a specific order. However, maintaining the original array is often necessary especially if the original data will be required later in your code. In this article we'll see how we can sort an array in JavaScrip

How to Update an Array After Splice in Svelte?

When you use splice() to modify an array in Svelte, such as adding or removing items, simply calling the method won't trigger a UI update because Svelte relies on reactivity, which requires the array to be reassigned. This article explores two ways to ensure the array updates correctly after a splic

What is the difference between Array.slice() and Array.splice() in JavaScript ?

In JavaScript, slice() and splice() are array methods with distinct purposes. `slice()` creates a new array containing selected elements from the original, while `splice()` modifies the original array by adding, removing, or replacing elements. slice():The slice() method in JavaScript extracts a sec

How to merge the first index of an array with the first index of second array?

The task is to merge the first index of an array with the first index of another array. Suppose, an array is array1 = {a, b, c} and another array is array2 = {c, d, e} if we perform the task on these arrays then the output will beÂ result array { [0]=> array(2) { [0]=> string(1) "a" [1]=> st

How to Slice an Array in PHP?

In PHP, slicing an array means taking a subset of the array and extracting it according to designated indices. When you need to extract a subset of elements from an array without changing the original array, this operation comes in handy. PHP comes with a built-in function called array_slice() to he

How to Merge/Flatten an array of arrays in JavaScript ?

Merging or flattening an array of arrays in JavaScript involves combining multiple nested arrays into a single-level array. This process involves iterating through each nested array and appending its elements to a new array, resulting in a flattened structure.To Merge or flatten array we can use arr

Extend existing JS array with Another Array

To extend an array with another without creating a new array we can use the JavaScript array.push() method. This method extend the array by adding the elements at the end. These are the following methods: 1. Using array.push() with Spread operator JavaScript array.push() method adds one or more elem

How to Switch the First Element of an Arrays Sub Array in PHP?

Given a 2D array where each element is an array itself, your task is to switch the first element of each sub-array with the first element of the last sub-array using PHP.Example:Input: num = [ ['a', 'b', 'c'], ['d', 'e', 'f'], ['g', 'h', 'i']];Output: [ ['g', 'b', 'c'], ['d', 'e', 'f'], ['a', 'h', '

How to Truncate an Array in JavaScript?

Here are the different methods to truncate an array in JavaScript1. Using length PropertyIn Array.length property, you can alter the length of the array. It helps you to decide the length up to which you want the array elements to appear in the output.JavaScriptconst n = [1, 2, 3, 4, 5, 6]; n.length

How to Paginate an Array in JavaScript?

Pagination is a common requirement in web applications especially when dealing with large datasets. It involves dividing a dataset into smaller manageable chunks or pages. In JavaScript, we can paginate an array by splitting it into smaller arrays each representing a page of the data. Below are the