How to splice an array without mutating the original Array?
In this article, we will be extracting the range of elements from an array without mutating it. Here, mutation means the changing of the original array. There is a built-in function that is made for the extraction of elements from the array but it mutates the array.
How does the splice() method work?
The splice method is used to extract the range of elements from an array. It takes three arguments index, number of items to delete, and an array of items to be appended. The index (first parameter) is required and the rest are optional. This method returns a new array after removing the items and mutates the original array.
Example: The example below explains how it mutates the original.
Javascript
let originalArr = [ "c" , "cpp" , "java" ,
"python" , "javascript" , "kotlin" ];
let extractedArr = originalArr.splice(0, 3);
console.log( "Extracted Array: " + extractedArr);
console.log( "Original Array: " + originalArr);
|
Output
Extracted Array: c,cpp,java
Original Array: python,javascript,kotlin
We can do this by using the following methods:
Approach 1: Using the copy of the array
In this approach, we will create a copy of the original array and then use the splice method to extract the items. To create the copy or clone of the array we can use the spread operator or splice method.
Steps:
- Create the clone of the array using the spread operator or slice method.
- apply the splice method on the cloned array and return the extracted array
Example:
Javascript
let originalArr = [ "c" , "cpp" , "java" ,
"python" , "javascript" , "kotlin" ];
let cloneArr = originalArr.slice(0);
let extractedArr = cloneArr.splice(0, 4);
console.log( "Extracted Array" );
console.log(extractedArr);
console.log( "Original Array" );
console.log(originalArr);
|
Output
Extracted Array
[ 'c', 'cpp', 'java', 'python' ]
Original Array
[ 'c', 'cpp', 'java', 'python', 'javascript', 'kotlin' ]
Here the original array is not mutated. But it is not a good practice to apply this approach in larger arrays because its space consumption increases when we create a clone of the array.
In this approach, we use the JavaScript filter method. The filter method is used to filter out the element of an array after applying some condition to it. This method does not mutate the array.
Syntax:
Array.filter((item, index)=>{ return index >= start
&& index < howMany + start })
Example 1:
Javascript
let originalArr = [ "c" , "cpp" , "java" ,
"python" , "javascript" ,
"kotlin" ];
let start = 1;
let howMany = 3;
let extractedArr =
originalArr.filter((item, index) => {
return index >= start && index < howMany + start;
})
console.log( "Extracted Array" );
console.log(extractedArr);
console.log( "Original Array" );
console.log(originalArr);
|
Output
Extracted Array
[ 'cpp', 'java', 'python' ]
Original Array
[ 'c', 'cpp', 'java', 'python', 'javascript', 'kotlin' ]
Example 2: In Prototype form
Javascript
let originalArr = [ "c" , "cpp" , "java" ,
"python" , "javascript" ,
"kotlin" ];
Array.prototype.mySplice =
function (start, howMany) {
return this .filter((item, index) => {
return index >= start && index < howMany + start;
})
}
console.log( "Extracted Array" );
console.log(originalArr.mySplice(1, 3));
console.log( "Original Array" );
console.log(originalArr);
|
Output
Extracted Array
[ 'cpp', 'java', 'python' ]
Original Array
[ 'c', 'cpp', 'java', 'python', 'javascript', 'kotlin' ]
The Javascript arr.slice() method returns a new array containing a portion of the array on which it is implemented. The original remains unchanged.
Example:
Javascript
let arr = [10, 20, 30, 40, 50,
60, 70, 80, 90, 100];
let clonedArray = arr.slice(0);
let splicedArray = clonedArray.splice(1, 6);
console.log(arr);
console.log(splicedArray);
|
Output
[
10, 20, 30, 40, 50,
60, 70, 80, 90, 100
]
[ 20, 30, 40, 50, 60, 70 ]
Last Updated :
10 Jul, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...