JavaScript: Splicing Arrays

In JavaScript, arrays are used to store lists of items, like numbers, names, or objects. Sometimes, we want to change an array by removing, adding, or replacing elements. That’s where the powerful splice() method comes in.

In this article, you’ll learn how splice() works, how to use it, and how to avoid common mistakes. Let’s dive in!

Table of Contents

What is `splice()`?

The splice() method lets you change the content of an array. You can use it to:

Remove elements
Add new elements
Replace elements

Here’s the basic syntax:

array.splice(start, deleteCount, item1, item2, ...);

start: The index where the change begins.
deleteCount: How many elements to remove.
item1, item2, ...: Optional items to add at the start position.

Removing Items from an Array

To remove items from an array, you can use splice() by giving it a starting index and the number of items to delete.

let fruits = ['apple', 'banana', 'cherry', 'date'];
fruits.splice(1, 2);

console.log(fruits); // ['apple', 'date']

In this example, splice(1, 2) starts at index 1 (which is ‘banana’) and removes 2 items: ‘banana’ and ‘cherry’. The original array is changed directly.

If you only provide the starting index, like splice(1), it will remove everything from that index to the end of the array:

let fruits = ['apple', 'banana', 'cherry', 'date'];
fruits.splice(1);

console.log(fruits); // ['apple']

This makes splice() a powerful tool for cutting out parts of an array.

Adding Items to an Array

To add new items, set deleteCount to 0 and pass the items you want to insert.

let colors = ['red', 'blue'];
colors.splice(1, 0, 'green');

console.log(colors); // ['red', 'green', 'blue']

It starts at index 1 and removes nothing, then inserts ‘green’ at that spot.

Replacing Items in an Array

You can remove and add items at the same time by setting a non-zero deleteCount and including new items.

let numbers = [1, 2, 3, 4];
numbers.splice(1, 2, 20, 30);

console.log(numbers); // [1, 20, 30, 4]

It starts at index 1, removes two items (2 and 3), and adds 20 and 30 in their place.

What Does `splice()` Return?

The splice() method returns an array of the items it removed.

let items = ['a', 'b', 'c', 'd'];
let removed = items.splice(1, 2);

console.log(removed); // ['b', 'c']
console.log(items);   // ['a', 'd']

The method removed ‘b’ and ‘c’ and returned them as a new array.

Common Mistakes to Avoid

Mutating the original array: splice() changes the original array. If you need the original data, make a copy first.
Wrong index: JavaScript uses zero-based indexing. splice(0, 1) removes the first item, not the second.
Over-deleting : If deleteCount is too large, it will just delete up to the end of the array without error.

When (and When Not) to Use `splice()`

Use splice() when you want to directly modify the original array.

Use slice() if you want to copy parts of an array without changing it.

Example (slice):

let letters = ['a', 'b', 'c', 'd'];
let part = letters.slice(1, 3);

console.log(part);    // ['b', 'c']
console.log(letters); // ['a', 'b', 'c', 'd'] — unchanged

Conclusion

The splice() method is a powerful tool in JavaScript. It allows you to remove, add, or replace elements right inside the original array. Just remember that it modifies the array directly and returns the items it removed.

Take some time to practice splice() with different examples. It’s one of those tools that makes working with arrays a lot easier once you get the hang of it!

What is splice()?