JS Array Slice vs Splice: What is the Difference?

const 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!

// slice
array.slice(start, end)
 
// splice
array.splice(start, deleteCount, item1, item2, ...itemN)

const 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]

const 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!

const 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]

const 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 copying

const 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"] — modified

// 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"]

// 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"]

// 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"]

const 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

const 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 changed