JavaScript Array splice() method

The splice() method is one of the most versatile and powerful tools in the JavaScript Array prototype. Unlike many other array methods that return a new modified copy (immutable), splice() is an in-place operation, meaning it directly mutates the original array. It can simultaneously remove, replace, and add elements at any position within the array.

1. Syntax and Parameters

The method accepts a starting index, a count of elements to remove, and an optional list of elements to add.

array.splice(start, deleteCount, item1, item2, /* …, */ itemN)

Parameters

start: The zero-based index at which to start changing the array.

• If negative, it counts back from the end of the array (e.g., -1 is the last element).
• If greater than the array length, it defaults to the end of the array.

deleteCount (Optional): An integer indicating the number of elements to remove from the start index.

• If omitted or greater than the remaining elements, all elements from start to the end are removed.
• If 0 or negative, no elements are removed.

item1, item2, ... (Optional): The elements to add to the array, beginning from the start index. If omitted, splice() only removes elements.

Return Value

The method returns an array containing the deleted elements. If no elements are removed, an empty array [] is returned.

2. Common Use Cases

A. Removing Elements

To remove items without adding new ones, provide the start index and the number of items to kill.

const months = ['Jan', 'Feb', 'March', 'April', 'June'];
const removed = months.splice(4, 1); 

console.log(months);  // ['Jan', 'Feb', 'March', 'April']
console.log(removed); // ['June']

B. Adding Elements

To insert items without removing any, set deleteCount to 0.

const colors = ['Red', 'Green', 'Blue'];
// At index 1, remove 0 items, then add 'Yellow'
colors.splice(1, 0, 'Yellow');

console.log(colors); // ['Red', 'Yellow', 'Green', 'Blue']

C. Replacing Elements

By setting a deleteCount and providing items to add, you effectively perform a “swap.”

const list = ['A', 'B', 'X', 'D'];
// Replace 'X' at index 2 with 'C'
list.splice(2, 1, 'C');

console.log(list); // ['A', 'B', 'C', 'D']

3. Advanced Manipulations

Negative Indices

Using a negative start index allows you to target elements relative to the end of the array, which is useful when you don’t want to calculate array.length.

const stack = ['First', 'Second', 'Third', 'Fourth'];
// Start 2 from the end, remove everything after
stack.splice(-2); 

console.log(stack); // ['First', 'Second']

Splicing with the Spread Operator

If you have an array of items you want to insert into another array, you can use the spread operator (...) within the splice call.

const inventory = ['Apple', 'Banana'];
const newItems = ['Cherry', 'Date'];

inventory.splice(1, 0, ...newItems);
console.log(inventory); // ['Apple', 'Cherry', 'Date', 'Banana']

const original = [1, 2, 3];
// toSpliced() returns a NEW array and leaves original intact
const updated = original.toSpliced(1, 1, "New");

console.log(original); // [1, 2, 3]
console.log(updated);  // [1, "New", 3]