The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. It is a very versatile but complex mutator method.
Example 1: Removing elements
// Example of removing elements from an array
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 1); // Removes 1 element at index 1
console.log(months); // Output: ['Jan', 'April', 'June']
Explanation
splice(1, 1) starts at index 1 ('March') and removes 1 element. The original months array is modified, and 'March' is permanently removed.
Example 2: Adding elements without removing
// Example of adding elements without removing any
const numbers = [1, 2, 5];
numbers.splice(2, 0, 3, 4); // At index 2, remove 0 elements, and add 3 and 4
console.log(numbers); // Output: [1, 2, 3, 4, 5]
Explanation
Here, the second argument to splice() is 0, so no elements are removed. The elements 3 and 4 are inserted into the numbers array starting at index 2.
Example 3: Replacing elements
// Example of replacing an element
const techStack = ['React', 'Node.js', 'MongoDB'];
techStack.splice(1, 1, 'Express.js'); // At index 1, remove 1 element, and add 'Express.js'
console.log(techStack); // Output: ['React', 'Express.js', 'MongoDB']
Explanation
splice(1, 1, 'Express.js') removes one element at index 1 ('Node.js') and inserts 'Express.js' in its place, effectively replacing the element.
Example 4: Removing all elements from an index to the end
// Example of removing all elements from a specific index to the end
const items = ['pen', 'pencil', 'eraser', 'ruler'];
items.splice(2); // Removes all elements from index 2 onwards
console.log(items); // Output: ['pen', 'pencil']
Explanation
If the second argument (deleteCount) is omitted, splice() will remove all elements from the provided start index to the end of the array.
Example 5: Using negative indices
// Example of using a negative index with splice
const scores = [10, 20, 30, 40, 50];
scores.splice(-2, 1); // Removes 1 element, 2 elements from the end
console.log(scores); // Output: [10, 20, 30, 50]
Explanation
A negative start index for splice() is counted from the end of the array. splice(-2, 1) starts two elements from the end (at 40) and removes one element.
Example 6: Capturing the removed elements
// Example of capturing the elements removed by splice
const letters = ['a', 'b', 'c', 'd', 'e'];
const removedLetters = letters.splice(1, 3); // Remove 3 elements from index 1
console.log(letters); // Output: ['a', 'e']
console.log(removedLetters); // Output: ['b', 'c', 'd']
Explanation
The splice() method returns an array containing the elements that were removed. Here, removedLetters captures the array ['b', 'c', 'd'].
Example 7: Inserting an array as a single element
// Example of inserting an array as a single element
const categories = ['Electronics', 'Books'];
categories.splice(1, 0, ['Clothing', 'Shoes']); // Insert a nested array
console.log(categories); // Output: ['Electronics', ['Clothing', 'Shoes'], 'Books']
Explanation
In this example, splice() inserts the array ['Clothing', 'Shoes'] as a single new element at index 1 of the categories array.