Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to splice an array without mutating the original Array?
In JavaScript, the splice() method modifies the original array by adding, removing, or replacing elements. However, sometimes you need to perform splice operations without changing the original array. This tutorial demonstrates three effective approaches to splice arrays while preserving the original data.
Understanding the splice() Method
The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.
Syntax
array.splice(startIndex, deleteCount, item1, item2, ..., itemN)
Parameters
- startIndex ? The index at which to start changing the array
- deleteCount ? The number of elements to remove from the array
- item1, item2, ..., itemN ? Elements to add to the array, beginning from startIndex
Method 1: Using the Spread Operator
The spread operator creates a shallow copy of the array, allowing you to use splice() on the copy without affecting the original.
<html>
<body>
<h3>Using the spread operator to splice without mutating</h3>
<div id="output1"></div>
<script>
let output = document.getElementById('output1');
let languages = ["C", "Java", "Python", "JavaScript", "TypeScript", "Go", "Rust"];
// Create copy and splice
let splicedElements = [...languages].splice(2, 3);
output.innerHTML += "Original array: " + languages + "<br>";
output.innerHTML += "Spliced elements: " + splicedElements + "<br>";
</script>
</body>
</html>
Original array: C,Java,Python,JavaScript,TypeScript,Go,Rust Spliced elements: Python,JavaScript,TypeScript
Method 2: Using the filter() Method
The filter() method creates a new array with elements that match specific criteria, effectively simulating a splice operation.
<html>
<body>
<h3>Using filter() method to simulate splice</h3>
<div id="output2"></div>
<script>
let output = document.getElementById('output2');
let numbers = [10, 20, 30, 40, 50, 60, 70, 80];
let startIndex = 2;
let count = 3;
// Extract elements using filter
let extractedElements = numbers.filter((element, index) => {
return index >= startIndex && index < startIndex + count;
});
output.innerHTML += "Original array: " + numbers + "<br>";
output.innerHTML += "Extracted elements: " + extractedElements + "<br>";
</script>
</body>
</html>
Original array: 10,20,30,40,50,60,70,80 Extracted elements: 30,40,50
Method 3: Using the slice() Method
The slice() method creates a shallow copy of the array, which you can then safely modify with splice().
<html>
<body>
<h3>Using slice() method to create a copy before splicing</h3>
<div id="output3"></div>
<script>
let output = document.getElementById('output3');
let fruits = ["apple", "banana", "orange", "mango", "grape", "kiwi"];
// Create copy using slice and then splice
let clonedArray = fruits.slice(0);
let removedElements = clonedArray.splice(1, 3, "strawberry", "blueberry");
output.innerHTML += "Original array: " + fruits + "<br>";
output.innerHTML += "Modified copy: " + clonedArray + "<br>";
output.innerHTML += "Removed elements: " + removedElements + "<br>";
</script>
</body>
</html>
Original array: apple,banana,orange,mango,grape,kiwi Modified copy: apple,strawberry,blueberry,grape,kiwi Removed elements: banana,orange,mango
Comparison
| Method | Performance | Use Case |
|---|---|---|
| Spread Operator | Fast | Simple extraction operations |
| filter() | Good | Complex filtering logic |
| slice() + splice() | Fast | Full splice functionality needed |
Conclusion
All three methods preserve the original array while providing splice-like functionality. Use the spread operator for simple cases, filter() for complex logic, and slice() when you need full splice capabilities including insertions.
5K+ Views
