JS Array Slice vs Splice: What is the Difference?
Understand the exact differences between JavaScript slice() and splice(). Side-by-side comparisons of syntax, mutation behavior, parameters, return values, and real-world use cases to help you choose the right method every time.
slice() and splice() are two of the most commonly confused methods in JavaScript. They have nearly identical names, both operate on arrays, and both accept numeric parameters. But they do fundamentally different things: one reads without changing, the other changes in place. Mixing them up is one of the most frequent sources of array bugs, especially for developers who are still building fluency with array methods.
This article gives you a definitive side-by-side comparison so you never confuse them again.
The Core Difference in One Sentence
slice() copies a portion of an array into a new array without changing the original. splice() modifies the original array by removing, inserting, or replacing elements.
javascriptconst original = ["a", "b", "c", "d", "e"];
// slice: extraction, no mutation
const sliced = original.slice(1, 3);
console.log(sliced); // ["b", "c"]
console.log(original); // ["a", "b", "c", "d", "e"] — unchanged
// splice: modification, mutates
const spliced = original.splice(1, 2);
console.log(spliced); // ["b", "c"]
console.log(original); // ["a", "d", "e"] — modified!Syntax Comparison
javascript// slice
array.slice(start, end)
// splice
array.splice(start, deleteCount, item1, item2, ...itemN)The second parameter is where the confusion happens. For slice(), it is an end index (exclusive). For splice(), it is a count of elements to remove.
javascriptconst arr = [10, 20, 30, 40, 50];
// slice(1, 3): from index 1 up to (not including) index 3
arr.slice(1, 3); // [20, 30]
// splice(1, 3): from index 1, remove 3 elements
arr.splice(1, 3); // [20, 30, 40]Full Feature Comparison
| Feature | slice() | splice() |
|---|---|---|
| Mutates original array | No | Yes |
| Returns | New array with extracted elements | Array of removed elements |
| Can remove elements | No (just extracts) | Yes |
| Can insert elements | No | Yes |
| Can replace elements | No | Yes |
| Second parameter meaning | End index (exclusive) | Delete count |
| Negative indices | Yes (both start and end) | Yes (start only) |
| No arguments | Returns full shallow copy | Removes nothing, returns [] |
| Time complexity | O(k) where k = slice size | O(n) for start/middle operations |
| Safe for shared state | Yes | No |
Side-by-Side Examples
Extracting Elements
javascriptconst colors = ["red", "orange", "yellow", "green", "blue"];
// slice: get elements at indices 1, 2 (end is exclusive)
const warm = colors.slice(1, 3);
console.log(warm); // ["orange", "yellow"]
console.log(colors); // ["red", "orange", "yellow", "green", "blue"] — safe
// splice: get elements at indices 1, 2 (by removing them)
const removed = colors.splice(1, 2);
console.log(removed); // ["orange", "yellow"]
console.log(colors); // ["red", "green", "blue"] — modified!Getting the Last N Elements
javascriptconst nums = [1, 2, 3, 4, 5];
// slice: non-destructive
const lastThree = nums.slice(-3);
console.log(lastThree); // [3, 4, 5]
console.log(nums); // [1, 2, 3, 4, 5]
// splice: destructive
const nums2 = [1, 2, 3, 4, 5];
const popped = nums2.splice(-3);
console.log(popped); // [3, 4, 5]
console.log(nums2); // [1, 2]Copying an Array
javascriptconst original = ["a", "b", "c"];
// slice: standard copy pattern
const copy = original.slice();
copy.push("d");
console.log(original); // ["a", "b", "c"] — safe
console.log(copy); // ["a", "b", "c", "d"]
// splice: cannot copy without destroying
// There is no splice equivalent for non-destructive copyingInserting Elements
javascriptconst steps = ["Start", "Finish"];
// slice: cannot insert (it only reads)
// You would need: [...steps.slice(0, 1), "Middle", ...steps.slice(1)]
const withMiddle = [...steps.slice(0, 1), "Middle", ...steps.slice(1)];
console.log(withMiddle); // ["Start", "Middle", "Finish"]
console.log(steps); // ["Start", "Finish"] — unchanged
// splice: direct insertion
steps.splice(1, 0, "Middle");
console.log(steps); // ["Start", "Middle", "Finish"] — modifiedWhen to Use slice()
Use slice() when you need to:
- Extract a portion of an array without affecting it
- Create a shallow copy for safe manipulation
- Work with immutable patterns (React state, Redux, functional programming)
- Paginate data by extracting page-sized chunks
- Remove elements immutably using the spread-and-slice pattern
javascript// React state: immutable removal
function removeAtIndex(items, index) {
return [...items.slice(0, index), ...items.slice(index + 1)];
}
const [todos, setTodos] = [["Task 1", "Task 2", "Task 3"], () => {}];
const updated = removeAtIndex(todos, 1);
console.log(updated); // ["Task 1", "Task 3"]When to Use splice()
Use splice() when you need to:
- Modify an array in place (internal data structures, buffers)
- Remove elements by index when you own the array
- Insert at a specific position (sorted insert, drag-and-drop reorder)
- Replace a range of elements in one operation
- Build stacks or queues where mutation is expected
javascript// Drag-and-drop reordering
function reorder(list, fromIndex, toIndex) {
const [moved] = list.splice(fromIndex, 1);
list.splice(toIndex, 0, moved);
return list;
}
const playlist = ["Song A", "Song B", "Song C", "Song D"];
reorder(playlist, 0, 2);
console.log(playlist); // ["Song B", "Song C", "Song A", "Song D"]The Decision Flowchart
Do you need to keep the original array unchanged?
If yes, use slice(). If the original can be modified, continue to the next question.
Do you need to insert elements?
If yes, use splice(). slice() cannot insert.
Do you need to remove elements by index?
If you need mutation, use splice(). If you need immutability, combine slice() with spread: [...arr.slice(0, i), ...arr.slice(i + 1)].
Do you need to replace elements?
For in-place replacement, use splice(i, count, ...newItems). For immutable replacement, use arr.map() or the with() method (ES2023).
Common Confusions Resolved
"I used splice but my original array changed"
That is exactly what splice() does. It modifies the array in place. If you did not want that, you meant to use slice():
javascript// Problem: wanted a copy, used splice by mistake
const items = ["a", "b", "c"];
const portion = items.splice(0, 2); // items is now ["c"]!
// Solution: use slice
const items2 = ["a", "b", "c"];
const portion2 = items2.slice(0, 2); // items2 is still ["a", "b", "c"]"I used slice with a count instead of an end index"
slice() takes an end index, not a count. This is the most common parameter mixup:
javascriptconst arr = [10, 20, 30, 40, 50];
// Wrong: treating second param as count
const mistake = arr.slice(1, 2); // Gets 1 element: [20]
// What you probably wanted: 2 elements starting at index 1
const correct = arr.slice(1, 3); // Gets [20, 30] (indices 1 and 2)
// Or use splice if you think in terms of counts
// arr.splice(1, 2) removes 2 elements starting at index 1"splice returned the wrong thing"
Both methods return arrays, but containing different things:
javascriptconst arr = [1, 2, 3, 4, 5];
// slice returns the extracted portion
const sliceResult = arr.slice(1, 3);
console.log(sliceResult); // [2, 3] — the portion you asked for
// splice returns the REMOVED elements
const arr2 = [1, 2, 3, 4, 5];
const spliceResult = arr2.splice(1, 0, "new"); // Insert, remove 0
console.log(spliceResult); // [] — nothing was removed
console.log(arr2); // [1, "new", 2, 3, 4, 5] — but the array changedMemory Trick
slice = immutable (does not change the original) splice = in-place (changes the original)
Or remember: splice has a "p" for "permanent change."
Another way: slice is like taking a photocopy of some pages. The original document stays intact. splice is like cutting pages out of the original document and optionally stapling new ones in.
Performance Comparison
| Scenario | slice() | splice() |
|---|---|---|
| Extract middle section (1K array) | ~0.01ms | ~0.01ms |
| Full clone (100K array) | ~0.5ms | N/A (no clone equivalent) |
| Remove first element (100K array) | N/A (non-destructive) | ~0.3ms |
| Remove last element (100K array) | N/A | ~0.001ms |
| Insert at start (100K array) | N/A | ~0.3ms |
Both methods are fast for typical array sizes. The O(n) cost of splice() only matters with very large arrays (100K+ elements) and start-of-array operations.
Rune AI
Key Insights
- slice() is non-mutating, splice() mutates: This is the fundamental difference that drives every usage decision
- Second parameter differs: slice takes an end index (exclusive); splice takes a delete count
- Use slice for safety: React state, shared references, functional patterns all require non-destructive operations
- Use splice for efficiency: Internal data structures, reordering, and single-array operations benefit from in-place mutation
- Memory trick: slice = photocopy (original intact), splice = surgery (original changed permanently)
Frequently Asked Questions
Can I use slice and splice together?
Which is faster, slice or splice?
Does slice or splice create a deep copy?
Why does JavaScript have two methods with such similar names?
How do I remember which one mutates?
Conclusion
slice() and splice() solve different problems with confusingly similar names. slice() is a pure read operation that extracts a portion into a new array without touching the original. splice() is a write operation that modifies the original array by removing, inserting, or replacing elements. The key distinction is mutation: use slice() when you need safety and immutability, and splice() when you need in-place modification. When in doubt, prefer slice() because immutable patterns are easier to reason about and debug.
More in this topic
OffscreenCanvas API in JS for UI Performance
Master the OffscreenCanvas API to offload rendering from the main thread. Covers worker-based 2D and WebGL rendering, animation loops inside workers, bitmap transfer, double buffering, chart rendering pipelines, image processing, and performance measurement strategies.
Advanced Web Workers for High Performance JS
Master Web Workers for truly parallel JavaScript execution. Covers dedicated and shared workers, structured cloning, transferable objects, SharedArrayBuffer with Atomics, worker pools, task scheduling, Comlink RPC patterns, module workers, and performance profiling strategies.
JavaScript Macros and Abstract Code Generation
Master JavaScript code generation techniques for compile-time and runtime metaprogramming. Covers AST manipulation, Babel plugin authorship, tagged template literals as macros, code generation pipelines, source-to-source transformation, compile-time evaluation, and safe eval alternatives.