iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Use slice() to copy a range of an array without changing the original. Use splice() to remove, insert, or replace elements in the original array. The key difference is mutation: slice() returns a new array of selected elements, while splice() edits its source and returns the elements it removed.
How do slice() and splice() differ?
| Method | Changes original? | Arguments | Returns | Use it to |
|---|---|---|---|---|
slice(start, end) |
No | Start and end positions; the end position is excluded | A new shallow array containing the selected elements | Read or copy part of an array |
splice(start, deleteCount, ...items) |
Yes | Start position, number of elements to remove, and optional items to insert | An array of removed elements | Edit an array in place |
toSpliced(start, skipCount, ...items) |
No | Start position, number of elements to remove, and optional items to insert | A new array with the edit applied | Make a splice-like edit without changing the original |
A quick mnemonic: slice takes a slice; splice edits the source. This is just a memory aid, not a general rule for similarly named methods.
What does slice() do?
slice(start, end) returns a new array containing elements from start up to—but not including—end. The second argument is an index position, not the number of items to take. MDN confirms that the original array is not modified.
Recommended Free Tools
const colors = ["red", "green", "blue", "purple"];
const middle = colors.slice(1, 3);
// middle: ["green", "blue"]
// colors: ["red", "green", "blue", "purple"]Here, indexes 1 and 2 are copied; index 3 is the stopping point and is left out.
#1 Best Overall
slice() argument behavior
- Calling
slice()with no arguments returns a shallow copy of the whole array. - If
endis omitted orundefined, the selection continues to the end. - Negative indexes count backward from the end. A start before the beginning is treated as zero; a start at or beyond the array length returns an empty array.
- If the normalized end is at or before the normalized start, the result is empty.
What does splice() do?
splice(start, deleteCount, ...items) changes the original array: it can remove elements, insert new ones, or do both. It returns an array containing the removed elements, not the edited source array. MDN describes splice() as a mutating method.
const colors = ["red", "green", "blue", "purple"];
const removed = colors.splice(1, 2, "gold");
// removed: ["green", "blue"]
// colors: ["red", "gold", "purple"]This starts at index 1, removes two elements, and inserts "gold" at that position. The removed elements are returned in removed; the changed array remains in colors.
Rank #2
splice() argument behavior
splice(start)with only a start argument removes from that position through the end. Callingsplice()with no arguments removes nothing.splice(start, 0, item)inserts without removing anything.- A start position beyond the array length inserts at the end. A negative start counts backward from the end and is clamped at the beginning.
- If no elements are removed, the returned array is empty. Do not mistake that return value for the edited source array—or for
push(), which returns the array’s new length.
Does slice() make an independent copy?
It makes a new array, but only a shallow copy. Primitive values are copied as values. For object elements, the new array contains references to the same objects, so changing an object through one array is visible through the other. MDN explains this behavior in its Array reference.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →How can you edit an array without mutating it?
Use toSpliced() for splice-like removal, insertion, or replacement when the target runtime supports it. It returns a new edited array and leaves the original intact; unlike splice(), it does not separately return the deleted elements. MDN marks toSpliced() as widely available since July 2023.
const months = ["Jan", "March", "April"];
const updated = months.toSpliced(1, 1, "Feb");
// updated: ["Jan", "Feb", "April"]
// months: ["Jan", "March", "April"]Choose slice() when you need a non-mutating copy of a range, splice() when you intend to edit the existing array, and toSpliced() when you want a splice-like edit that preserves the original.
Quick Recap
Rank #4
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
