JS Array slice vs splice: What Is the Difference?

slice() and splice() have similar names but opposite behaviors. One copies without changing anything. The other removes and inserts, permanently altering the array. Confusing the two is one of the most common JavaScript array mistakes.

A single missing letter is the only thing that separates a safe read from a destructive write, so it pays to know exactly which one you are calling.

Here is the core difference in one sentence:

• slice() returns a new array with a copy of elements. The original stays the same.
• splice() removes, inserts, or replaces elements in place. The original is mutated.

slice() -- Copy Without Touching

slice(begin, end) copies elements from begin up to but not including end. It is the safe method to reach for whenever you need a portion of an array but must not touch the source data. The original array is unchanged after the call.

javascript

const letters = ["a", "b", "c", "d", "e"];
 
const middle = letters.slice(1, 4);
 
console.log(middle);  // ["b", "c", "d"]
console.log(letters); // ["a", "b", "c", "d", "e"] (unchanged)

The end index is exclusive: slice(1, 4) includes indices 1, 2, and 3, but not 4.

If you omit end, slice() copies from begin to the end of the array:

javascript

const letters = ["a", "b", "c", "d", "e"];
 
console.log(letters.slice(2));  // ["c", "d", "e"]
console.log(letters.slice(0));  // ["a", "b", "c", "d", "e"] (shallow copy)

Negative indices count from the end instead of the start, which is very useful for getting the last N elements without knowing the array's exact length:

javascript

const items = ["pen", "notebook", "eraser", "ruler", "marker"];
 
console.log(items.slice(-3));  // ["eraser", "ruler", "marker"] (last 3)
console.log(items.slice(-1));  // ["marker"] (last element)
console.log(items.slice(1, -1)); // ["notebook", "eraser", "ruler"] (skip first and last)

slice(1, -1) means "start at index 1 and stop one before the end." It strips the first and last elements.

splice() -- Remove, Insert, or Replace

splice(start, deleteCount, ...items) removes deleteCount elements starting at start, optionally inserts items at that position, and returns the array of removed elements. Unlike slice(), the original array is mutated directly, so there is no separate copy to worry about keeping in sync.

Removing with splice()

javascript

const fruits = ["apple", "banana", "orange", "mango", "kiwi"];
 
// Remove 2 elements starting at index 1
const removed = fruits.splice(1, 2);
 
console.log(fruits);  // ["apple", "mango", "kiwi"]
console.log(removed); // ["banana", "orange"]

Two things happen at once: the removed elements are returned, and the original array shrinks.

If you omit deleteCount, splice() removes everything from start to the end:

javascript

const nums = [10, 20, 30, 40, 50];
 
const removed = nums.splice(2);
 
console.log(nums);    // [10, 20]
console.log(removed); // [30, 40, 50]

Inserting with splice()

Set deleteCount to 0 and pass the items to insert. Nothing gets removed, so the new items simply slide into the array at that position:

javascript

const colors = ["red", "blue"];
 
// Insert at index 1 without removing anything
colors.splice(1, 0, "green", "yellow");
 
console.log(colors); // ["red", "green", "yellow", "blue"]

"green" and "yellow" are inserted at index 1. The original elements shift right. The return value is an empty array because nothing was removed.

Replacing with splice()

Set deleteCount to the number of elements you want to replace and pass the new items:

javascript

const numbers = [10, 20, 30, 40];
 
// Replace index 1 through 2 (two elements) with three new values
const removed = numbers.splice(1, 2, 200, 300, 400);
 
console.log(numbers); // [10, 200, 300, 400, 40]
console.log(removed); // [20, 30]

Two elements were removed and three were inserted. The array length changed accordingly.

Same Arguments, Different Effect

The clearest way to see the difference is to call both methods with the same start and end arguments on the same array and compare what happens to the original:

javascript

const original = [1, 2, 3, 4, 5];
 
// slice: returns a copy, original stays the same
const sliced = original.slice(1, 4);
console.log(sliced);   // [2, 3, 4]
console.log(original); // [1, 2, 3, 4, 5] (unchanged)
 
// splice: returns removed elements, original is mutated
const spliced = original.splice(1, 3);
console.log(spliced);  // [2, 3, 4]
console.log(original); // [1, 5] (changed!)

Same arguments (1, 3), completely different effect on the original array.

When to Use Each

Use slice() when:

• You need a portion of the array without modifying the original.
• You want the last N elements: arr.slice(-n).
• You want a shallow copy of the whole array: arr.slice().
• You are working with immutable data patterns.

Use splice() when:

• You need to remove a specific element at a known index.
• You need to insert items at a specific position.
• You need to replace elements in place.
• You are building mutable data structures.

Common Mistakes

Expecting splice() to return the modified array:

javascript

const arr = [1, 2, 3, 4, 5];
 
// Wrong: splice returns removed elements, not the modified array
const result = arr.splice(1, 2);
console.log(result); // [2, 3] -- the REMOVED elements, not the result you might expect
 
// The array itself is already modified
console.log(arr); // [1, 4, 5]

splice() returns the removed elements as an array. If you need the modified array, use the original variable directly, it is already changed.

Confusing the end argument of slice() as inclusive:

javascript

const arr = ["a", "b", "c", "d"];
 
// slice(1, 3) stops BEFORE index 3
console.log(arr.slice(1, 3)); // ["b", "c"], not ["b", "c", "d"]

The end argument is exclusive. slice(1, 3) gives you indices 1 and 2, not 1 through 3.

Now that you understand the difference between copying and mutating, learn how to merge two arrays and use the spread operator for arrays to create copies without mutating.