Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to splice an array without mutating the original Array?

  • Last Updated : 17 Mar, 2021

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 the .splice( ) method works: The splice method is used to extract the range of elements from an array. It takes three arguments index, number of items to delete, an array of items to be appended. The index (first parameter) is required and the rest of the parameters are optional. This method returns a new array after removing the items but it also mutates the original array. The example below explains how it mutates the original.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Javascript




<script>// Creating an array 
let originalArr = ["c", "cpp", "java", "python", "javascript", "kotlin"];
  
// Extracting three items from the index 0
let extractedArr = originalArr.splice(0, 3);
  
  
// Printing the Extracted array
console.log("Extracted Array")
console.log(extractedArr)
  
// Printing the original Array
console.log("Original Array")
console.log(originalArr)</script>


Output:

Extracted Array

["c", "cpp", "java"]

Original Array

["python", "javascript", "kotlin"]

Here you can see the original array is mutated by the splice method. We will implement the same functionality as the splice method provides but without mutating the original array. Here we will discuss two approaches to achieve this functionality the first one is using the copy of the array and the second approach is using the filter method.



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




<script>// Creating an array 
let originalArr = ["c", "cpp", "java", "python", "javascript", "kotlin"];
  
// Creating the clone of the array
let cloneArr = originalArr.slice(0);
  
// Or you can use spread Operator
// let cloneArr = [...originalArr]
  
// Ectract the array using splice method
let extractedArr = cloneArr.splice(0, 4);
  
// Printing the Extracted array
console.log("Extracted Array")
console.log(extractedArr)
  
// Printing the original Array
console.log("Original Array")
console.log(originalArr)</script>


Output: 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 the clone of the array. 

Extracted Array
["c", "cpp", "java", "python"]

Original Array
["c", "cpp", "java", "python", "javascript", "kotlin"]

Approach 2: Using the filter method. In this approach, we use the 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




<script>// Creating an array 
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 ;
})
  
// Printing the Extracted array
console.log("Extracted Array")
console.log(extractedArr)
  
  
// Printing the original Array
console.log("Original Array")
console.log(originalArr)
  
</script>


Example 2: In Prototype form.

Javascript




<script>// Creating an array 
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 ;
  })
}
  
// Printing the Extracted array
console.log("Extracted Array")
console.log(originalArr.mySplice(1, 3))
  
// Printing the original Array
console.log("Original Array")
console.log(originalArr)
</script>


Output:

Extracted Array
["cpp", "java", "python"]

Original Array
["c", "cpp", "java", "python", "javascript", "kotlin"]



My Personal Notes arrow_drop_up
Recommended Articles
Page :