Detailed explanation
In JavaScript, slice() and splice() are array methods with different purposes. slice() extracts a range into a new array without changing the source array. splice() edits the source array by removing, inserting, or replacing elements, and returns an array containing the removed elements. The main interview distinction is therefore non-mutating extraction versus in-place editing. Both methods return arrays, so identifying their return values alone is not enough; explain what happens to the original array as well.
The syntax for extraction is array.slice(start, end). The start index is inclusive, while the end index is exclusive. For const a = [1, 2, 3, 4], a.slice(1, 3) returns [2, 3], and a remains [1, 2, 3, 4]. Omitting end copies through the array’s end, and calling slice() without arguments copies the entire array. Negative indices count from the end: a.slice(-2) returns [3, 4]. The result is a shallow copy: the outer array is new, but any objects inside it are still shared references. Changing a shared object through the copy can therefore affect what you observe through the original.
The editing syntax is array.splice(start, deleteCount, ...items). Unlike slice(), its second argument is a count, not an ending index. Starting again with [1, 2, 3, 4], a.splice(1, 2, 'x') removes two elements starting at index 1, inserts 'x', returns [2, 3], and leaves a as [1, 'x', 4]. A deleteCount of zero inserts without removing anything, so the return value is an empty array. With only start supplied, splice() removes everything from that position onward. Editing may shift later elements and change the array’s length.
This difference matters when multiple variables reference the same array: all those references observe a splice() mutation. Interviewers commonly check argument meanings, return values, negative indices, and shallow-copy behaviour. Choose slice() when extracting data without modifying the source, and splice() when intentional in-place editing is appropriate. For a non-mutating splice-like edit, modern JavaScript also provides toSpliced(), which returns the edited copy rather than the removed items.
Key points to remember
- slice(start, end) extracts elements; end is exclusive.
- splice(start, deleteCount, ...items) removes, inserts, or replaces elements.
- slice() leaves the source unchanged; splice() mutates it.
- slice() returns the extracted copy; splice() returns the removed elements.
- slice() creates a shallow copy, so nested object references remain shared.
Common mistakes candidates make
- Treating splice()’s second argument as an ending index instead of a deletion count.
- Assuming splice() returns the updated array rather than the removed elements.
- Calling slice() a deep copy and expecting nested objects to be independent.
Likely follow-up questions
Can splice() modify an array declared with const?
Yes. const prevents reassignment of the variable, but it does not prevent changes to the array’s contents, so a.splice(...) is allowed.
How do you insert an element without deleting anything?
Use a deletion count of zero: a.splice(1, 0, 'x') inserts 'x' at index 1. It mutates a and returns [] because nothing was removed.
What happens if you modify an object inside a slice() result?
For const a = [{ score: 1 }]; const b = a.slice();, setting b[0].score = 2 also makes a[0].score equal 2 because both arrays reference the same object. Replacing b[0] with a different object, however, does not replace a[0].
Interview tip: Lead with mutation and return values, then trace the given example while clearly distinguishing an end index from a deletion count.