JavaScript Arrays
JavaScript Array slice and splice
JavaScript
slicecopies part of an array, whilesplicechanges the array in place.
The names look alike but they behave very differently.
slice leaves the original alone; splice does not.
Example
Example
javascript
const list = [1, 2, 3, 4, 5];
console.log(list.slice(1, 3).join(","));
console.log(list.length);The copy holds 2,3.
The original still has five elements.
slice and splice
slice(start, end) returns a new array from start up to but not including end.
splice(start, count, ...items) removes count elements and can insert new ones.
The easiest way to remember: slice copies.
Syntax
Syntax
javascript
array.slice(start, end);
array.splice(start, count, item);In slice, the end index is not included.
slice Copies
The original array is never changed.
Example
Example
javascript
const list = ["a", "b", "c", "d"];
const part = list.slice(1, 3);
console.log(part.join(","));
console.log(list.length);The copy holds b,c and the original still has four elements.
slice with Negative Numbers
Negative values count from the end.
Example
Example
javascript
const list = [1, 2, 3, 4, 5];
console.log(list.slice(-2).join(","));The output is 4,5, the last two elements.
Copying a Whole Array
slice() with no arguments is a quick way to copy an array.
Example
Example
javascript
const original = [1, 2, 3];
const copy = original.slice();
copy.push(4);
console.log(original.length);The original is untouched.
splice Removes
The second argument is how many elements to remove.
Example
Example
javascript
const list = ["a", "b", "c", "d"];
list.splice(1, 2);
console.log(list.join(","));Two elements were removed, leaving a,d.
splice Inserts
Anything after the count is inserted at that position.
Example
Example
javascript
const list = ["a", "d"];
list.splice(1, 0, "b", "c");
console.log(list.join(","));A count of 0 means nothing is removed, only inserted.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript slice and splice</title>
</head>
<body>
<h1>JavaScript slice and splice</h1>
<p id="result"></p>
<script>
const list = ["a", "b", "c", "d", "e"];
const copy = list.slice(1, 4);
list.splice(0, 2);
document.getElementById("result").innerHTML =
"Copy: " + copy.join(",") + "<br>Original after splice: " + list.join(",");
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try inserting instead:
Change the splice to list.splice(1, 0, "x") and see where x appears.
Important Points
slicereturns a copy and never changes the original.- The end index of
sliceis not included. - Negative indexes count from the end.
splicechanges the array in place.splicecan remove, insert, or do both at once.
Conclusion
slice and splice look similar but sit on opposite sides of a key line.
One copies, the other modifies, and mixing them up causes real bugs.
Understanding both lets you take pieces of a list safely.