How to Splice an Array Without Mutating the Original Array? Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report 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 this1. Using slice() and concat() Methods - Most UsedThe 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 RemovalThe 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() MethodThe 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 ConditionalsFor 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 SplicingNon-mutating splicing is essential forFunctional Programming: Promotes immutability, reducing side effects.Data Integrity: Ensures original data remains unchanged for reusability.Concurrent Usage: Prevents unintended modifications when sharing data. Comment More info D devi_johns Follow Improve Article Tags : JavaScript Web Technologies javascript-array JavaScript-DSA JavaScript-Methods JavaScript-Questions +2 More Explore JavaScript BasicsIntroduction to JavaScript4 min readVariables and Datatypes in JavaScript6 min readJavaScript Operators5 min readControl Statements in JavaScript4 min readArray & StringJavaScript Arrays7 min readJavaScript Array Methods7 min readJavaScript Strings5 min readJavaScript String Methods9 min readFunction & ObjectFunctions in JavaScript5 min readJavaScript Function Expression3 min readFunction Overloading in JavaScript4 min readObjects in JavaScript4 min readJavaScript Object Constructors4 min readOOPObject Oriented Programming in JavaScript3 min readClasses and Objects in JavaScript4 min readWhat Are Access Modifiers In JavaScript ?5 min readJavaScript Constructor Method7 min readAsynchronous JavaScriptAsynchronous JavaScript2 min readJavaScript Callbacks4 min readJavaScript Promise4 min readEvent Loop in JavaScript4 min readAsync and Await in JavaScript2 min readException HandlingJavascript Error and Exceptional Handling6 min readJavaScript Errors Throw and Try to Catch2 min readHow to create custom errors in JavaScript ?2 min readJavaScript TypeError - Invalid Array.prototype.sort argument1 min readDOMHTML DOM (Document Object Model)9 min readHow to select DOM Elements in JavaScript ?3 min readJavaScript Custom Events4 min readJavaScript addEventListener() with Examples9 min readAdvanced TopicsClosure in JavaScript4 min readJavaScript Hoisting6 min readScope of Variables in JavaScript3 min readJavaScript Higher Order Functions7 min readDebugging in JavaScript4 min read Like