slice() vs splice()

They look almost identical but do completely different things. Slice returns a new array containing a portion of the original and leaves the original untouched. Splice changes the original array by removing, replacing or inserting elements in place, and it returns the elements it removed.

const letters = ["a", "b", "c", "d"];

// slice returns a new array and leaves the original alone.
const part = letters.slice(1, 3);
console.log(part);            // ["b", "c"]
console.log(letters);         // ["a", "b", "c", "d"]
console.log(letters.slice(-2)); // ["c", "d"]

// splice mutates the original array.
const removed = letters.splice(1, 2, "X");
console.log(removed);         // ["b", "c"]
console.log(letters);         // ["a", "X", "d"]

The slice indexes are a start position and an end position, and the end is exclusive. Negative numbers count from the end, so a slice of minus two gives you the last two elements. Omitting the end means the end of the array.

Splice takes a start position, a count of elements to remove, and then any number of items to insert at that position. It returns the removed elements as a new array, and it modifies the array it was called on. Calling splice with only a start position removes everything from that position onwards, which is a common way to truncate an array in place.

The name confusion is the only real hazard, and it has caught everyone. If you remember that slice gives you a slice back and splice splices things out, you will not get it wrong twice.

The mutating methods are the ones to be careful with. They are push, which appends, pop, which removes the last element, shift, which removes the first, unshift, which prepends, splice, which removes and inserts in place, sort, which reorders in place, reverse, which flips the order in place, and fill and copyWithin, which overwrite existing positions.

Everything else returns new data. Slice and concat build new arrays. Map, filter, flat and flatMap produce new arrays. Reduce, find, findIndex, findLast, some and every return a value or a new array without touching the source. Includes and indexOf only read.

Two recent additions changed the pattern. The sort, reverse and with methods on the 2023 edition return a new array instead of mutating, so you can write items.toSorted(...) and get a sorted copy while items.sort(...) still sorts in place. That gives you a way to be explicit about the mutation.

The rule of thumb for interviews is that if a method returns the array itself, it mutated. If it returns a new array, it did not. And when in doubt, check whether the original variable changed after the call, because that is the only thing that really matters.

One more note on sort. It mutates, and it also sorts by converting elements to strings by default, so sorting numbers without a comparator gives you the wrong order. That is a bug people hit repeatedly, and it is the subject of its own question.

Use filter when you know which value to drop, or combine two slices when you know the index. Both build a new array and leave the source untouched, which matters when the array came from state you do not own, such as a prop or a store slice.

const items = ["a", "b", "c", "d"];

// By value, with filter:
console.log(items.filter((item) => item !== "b"));   // ["a", "c", "d"]

// By index, with two slices:
const index = items.indexOf("b");
const withoutB = [...items.slice(0, index), ...items.slice(index + 1)];
console.log(withoutB);   // ["a", "c", "d"]

// The original is untouched in both cases.
console.log(items);   // ["a", "b", "c", "d"]

// To remove several values at once:
const drop = ["b", "d"];
console.log(items.filter((item) => !drop.includes(item)));   // ["a", "c"]

Filter is the clearer choice when you are removing by value, and it handles the case where the value is not present, because the filter simply returns everything. The two-slice version is the one to use when you have an index, and it is what you want when removing duplicates by keeping the first occurrence of each value.

If you are removing a large number of elements, filter is more efficient than repeated splicing, because splice shifts the remaining elements on every call, which makes repeated removal quadratic in the worst case. Filter makes one pass.

Two more approaches worth mentioning. The newer method that removes by predicate does exactly what you want in one call, but it mutates the array it is called on, so copy it first if the original matters. And in modern code the best answer is often not to remove the element at all, but to keep the data and let the view filter it, which avoids the whole question of mutating a shared array.