JavaScript Array splice() Explained: Delete, Insert, Replace (With Examples)

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduction: What Is the splice Method?

JavaScript provides a convenient method called splice that lets you efficiently add, remove, and replace elements in an array.

For example, have you ever run into situations like these?

• You want to remove some elements from an array.
• You want to insert new elements at a specific position.
• You want to replace existing elements with different values.

In these cases, the splice method is extremely useful.

Purpose of This Article

In this article, we’ll explain the JavaScript splice method in detail—from the basics to practical use cases. With plenty of code examples, you’ll be able to build hands-on, real-world knowledge.

Who This Article Is For

• Beginners who have just started learning JavaScript.
• Intermediate learners who want to deepen their understanding of array manipulation.
• Programmers who want to write efficient code for real-world work.

What You Will Learn

By the end of this article, you will be able to:

• Understand the syntax of splice and how to use its arguments.
• Perform basic operations such as deleting, inserting, and replacing elements.
• Clearly understand how it differs from other array methods and choose the right tool for the job.

In the next section, we’ll start with the core concept and syntax of the splice method.

2. Core Concept: Overview and Syntax of splice

In this section, we’ll explain the basic concept and syntax of JavaScript’s splice method in detail.

2.1 Overview of the splice Method

The splice method is a destructive method used to delete, insert, and replace elements in an array. A destructive method means it mutates the original array directly.

When managing data dynamically in JavaScript, being able to flexibly manipulate array elements is very valuable—so splice is commonly used.

Main capabilities:

1. Remove elements starting from a specified position.
2. Insert new elements at any position.
3. Replace existing elements with different values.

2.2 Syntax of the splice Method

The basic syntax is as follows:

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

Argument details:

1. start (required)

• Specifies the index at which to start changing the array.
• If you pass a negative value, it counts from the end of the array.

1. deleteCount (optional)

• Specifies how many elements to remove.
• If you set it to 0, no elements are removed and only new elements are inserted.
• If omitted, all elements from start to the end of the array are removed.

1. item1, item2, … (optional)

• Elements to insert into the array.
• If omitted, splice performs only deletion.

Return value:

• Returns a new array containing the removed elements.

2.3 Examples and Explanations

1. Removing elements

let fruits = ["apple", "banana", "cherry", "date"];
// Remove 2 elements starting at index 1
let removed = fruits.splice(1, 2);

console.log(fruits);   // ["apple", "date"]
console.log(removed);  // ["banana", "cherry"]

2. Inserting elements

let colors = ["red", "blue"];
// Insert 2 elements at index 1
colors.splice(1, 0, "green", "yellow");

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

3. Replacing elements

let numbers = [1, 2, 3, 4, 5];
// Replace 2 elements starting at index 1
numbers.splice(1, 2, 'a', 'b');

console.log(numbers);  // [1, 'a', 'b', 4, 5]

2.4 Key Takeaways

• splice is destructive: it mutates the original array, so use it carefully.
• Highly flexible: one method can handle deletion, insertion, and replacement.
• Versatile based on argument combinations: supports both simple and advanced operations.

In the next section, we’ll introduce more detailed usage examples and practical code patterns. Let’s deepen your understanding through real-world scenarios.

3. Examples: Basic splice Operations

In this section, we’ll walk through concrete examples of using the splice method. We’ll cover deletion, insertion, and replacement with sample code.

3.1 Removing Elements

How to remove elements starting at a specific position

Code example:

let fruits = ["apple", "banana", "cherry", "date"];
// Remove 2 elements starting at the second index
let removed = fruits.splice(1, 2);

console.log(fruits);   // ["apple", "date"]
console.log(removed);  // ["banana", "cherry"]

Explanation:

• Start index (1): starts at “banana” (index 1).
• Number of elements to remove (2): removes “banana” and “cherry”.
• Return value: returns the removed elements as a new array.

Point:
Notice that the original array fruits is mutated.

3.2 Inserting Elements

How to insert new elements at a specific position

Code example:

let colors = ["red", "blue"];
// Insert 2 elements at index 1
colors.splice(1, 0, "green", "yellow");

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

Explanation:

• Start index (1): starts inserting at index 1.
• Number of elements to remove (0): removes nothing.
• Elements to insert (“green”, “yellow”): inserts “green” and “yellow”.

Point:
If you want to insert without deleting, set deleteCount to 0.
You can insert multiple elements by separating them with commas.

3.3 Replacing Elements

How to replace existing elements with new values

Code example:

let numbers = [10, 20, 30, 40];
// Replace 2 elements starting at index 1
numbers.splice(1, 2, 25, 35);

console.log(numbers);  // [10, 25, 35, 40]

Explanation:

• Start index (1): starts at “20”.
• Number of elements to remove (2): removes “20” and “30”.
• Elements to insert (25, 35): inserts “25” and “35”.

Point:
By deleting and inserting in one call, you can replace elements.

3.4 Using a Negative Index

With splice, you can use a negative index to count from the end of the array.

Code example:

let items = ["a", "b", "c", "d"];
arr.splice(-2, 1); // Remove the second-to-last element
console.log(items);  // ["a", "b", "d"]

Explanation:

• Start index (-2): targets “c” as the removal start position.
• Negative indexes let you operate relative to the end of the array.

3.5 Inserting into an Empty Array

You can also use splice with an empty array.

Code example:

let empty = [];
empty.splice(0, 0, "new item");

console.log(empty);  // ["new item"]

Point:
This is useful when you want to initialize an empty array while inserting elements.

3.6 Summary of Examples

• Remove elements: specify a start index and a delete count.
• Insert elements: set deleteCount to 0 and provide items.
• Replace elements: delete and insert in the same operation.
• Negative indexes: specify positions from the end.
• Empty array insertion: insert while initializing.

In the next section, we’ll look at more advanced usage. Let’s learn techniques that help in real-world data manipulation and practical workflows.

4. Advanced Examples: Practical Scenarios

In this section, we’ll introduce advanced examples using the splice method. Based on real-world scenarios, we’ll explain how to handle more complex data operations.

4.1 Removing Duplicate Elements

Scenario: You want to remove duplicate elements in a list, leaving only one instance of each.

Code example:

let numbers = [1, 2, 2, 3, 4, 4, 5];

// Remove duplicates
for (let i = 0; i < numbers.length; i++) {
  while (numbers.indexOf(numbers[i]) !== numbers.lastIndexOf(numbers[i])) {
    numbers.splice(numbers.lastIndexOf(numbers[i]), 1);
  }
}

console.log(numbers); // [1, 2, 3, 4, 5]

Explanation:

1. Use indexOf and lastIndexOf to check whether the same value appears multiple times.
2. If duplicates are found, remove them using splice.

4.2 Inserting an Element at a Specific Position

Scenario: You need to insert a new element at a specific position in an array.

Code example:

let tasks = ["Start", "In Progress", "Done"];
tasks.splice(1, 0, "On Hold");

console.log(tasks); // ["Start", "On Hold", "In Progress", "Done"]

Explanation:

• We inserted “On Hold” at index 1.
• The original array is mutated, and existing elements shift to the right.

4.3 Replacing Elements That Match a Condition

Scenario: You want to replace elements that match a specific condition with a different value.

Code example:

let scores = [50, 60, 70, 80, 90];

// Replace scores of 70 or lower with "Fail"
for (let i = 0; i < scores.length; i++) {
  if (scores[i] <= 70) {
    scores.splice(i, 1, "Fail");
  }
}

console.log(scores); // ["Fail", "Fail", "Fail", 80, 90]

Explanation:

1. Loop through the array and find elements that match the condition.
2. When a match is found, replace it using splice.

4.4 Removing Multiple Elements from an Array

Scenario: You want to remove all occurrences of a specific value at once.

Code example:

let items = ["apple", "banana", "cherry", "banana", "date"];

// Remove all "banana"
for (let i = items.length - 1; i >= 0; i--) {
  if (items[i] === "banana") {
    items.splice(i, 1);
  }
}

console.log(items); // ["apple", "cherry", "date"]

Explanation:

• Looping backwards prevents index-shift issues when removing elements with splice.

4.5 Reordering Elements in an Array

Scenario: You want to reorder elements in an array.

Code example:

let numbers = [10, 20, 30, 40];

// Swap positions (reorder)
numbers.splice(1, 2, 35, 25);

console.log(numbers); // [10, 35, 25, 40]

Explanation:

• This removes existing elements and inserts new ones in the desired order.
• It can be applied to more complex data processing and list management.

4.6 Advanced Examples Summary

• Duplicate removal: useful for data cleaning.
• Element insertion: enables flexible additions in lists and arrays.
• Conditional replacement: helpful for filtering and status management.
• Bulk removal: efficient cleanup of unwanted data.
• Reordering: useful for adjusting display order and list management.

In the next section, we’ll compare splice with other array methods and explain how to choose the right method for each situation.

5. Comparison with Other Methods

In this section, we’ll compare the splice method with other array methods that serve similar purposes. Understanding their characteristics helps you choose the best approach.

5.1 splice vs slice

splice: destructive changes

• Mutates the original array (destructive).
• Can delete, insert, and replace elements.

slice: non-destructive copy

• Does not mutate the original array; returns a new array (non-destructive).
• Only extracts elements from a range; cannot insert or replace.

Comparison table:

Example: splice

let arr = [1, 2, 3, 4];
arr.splice(1, 2); // Remove 2 elements starting at index 1
console.log(arr); // [1, 4]

Example: slice

let arr = [1, 2, 3, 4];
let sliced = arr.slice(1, 3); // Get elements from index 1 up to (but not including) 3
console.log(sliced); // [2, 3]
console.log(arr);    // [1, 2, 3, 4] Original array is not changed

Key point:

• If you don’t want to change the original array, choose slice.
• If you need dynamic, in-place modifications, use splice.

5.2 splice vs push/pop

push: append to the end

• Adds an element to the end of an array.
• Mutates the original array.

pop: remove from the end

• Removes one element from the end of an array.
• Mutates the original array.

Comparison table:

Example: push

let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]

Example: pop

let arr = [1, 2, 3];
arr.pop();
console.log(arr); // [1, 2]

Key point:

• push/pop are best for simple operations at the end of an array.
• splice is better for more complex changes (such as editing a specific position).

5.3 splice vs shift/unshift

shift: remove from the beginning

• Removes the first element of an array.
• Mutates the original array.

unshift: add to the beginning

• Adds elements to the beginning of an array.
• Mutates the original array.

Comparison table:

Example: shift

let arr = [1, 2, 3];
arr.shift();
console.log(arr); // [2, 3]

Example: unshift

let arr = [2, 3];
arr.unshift(1);
console.log(arr); // [1, 2, 3]

Key point:

• shift/unshift specialize in operations at the beginning of the array.
• splice provides flexibility for middle or arbitrary positions.

5.4 Summary of Method Comparisons

How to choose:

• When you need flexibility: use splice.
• For simple operations: push/pop or shift/unshift are appropriate.
• When you want to preserve the original array: slice is best.

In the next section, we’ll discuss cautions and best practices when using splice. Let’s cover the key points for writing safe and efficient code.

6. Cautions and Best Practices

In this section, we’ll explain important cautions and best practices for using JavaScript’s splice method effectively.

6.1 Cautions

1. It mutates the original array (destructive method)
The splice method directly changes the original array. If used carelessly, it can break data consistency.

Example: the array is changed

let arr = [1, 2, 3, 4];
arr.splice(1, 2); // Remove elements
console.log(arr); // [1, 4]

Solution: copy the array before editing
If you want to keep the original array, create a copy using slice first.

let arr = [1, 2, 3, 4];
let copy = arr.slice(); // Create a copy
copy.splice(1, 2);
console.log(arr);  // [1, 2, 3, 4] Original array is not changed
console.log(copy); // [1, 4] Only the copy is changed

2. Watch out for index mistakes
If you specify an incorrect index, you may get unexpected behavior.

Example: misuse of a negative index

let arr = [1, 2, 3, 4];
arr.splice(-5, 1); // No error, but may not behave as expected
console.log(arr);  // [1, 2, 3, 4]

Solution: validate the index range in advance

let arr = [1, 2, 3, 4];
let index = -5;

if (index >= -arr.length && index < arr.length) {
  arr.splice(index, 1);
} else {
  console.log("Index is out of range.");
}

3. Performance impact
Because splice shifts elements after each operation, it can be slow on large arrays.

Example: operating on large data

let arr = Array(1000000).fill(0);
console.time("splice");
arr.splice(500000, 1); // Remove from the middle
console.timeEnd("splice");

Solution: consider splitting the array or using a different approach

let arr = Array(1000000).fill(0);
let part1 = arr.slice(0, 500000); // First half
let part2 = arr.slice(500001);   // Second half
let result = part1.concat(part2); // Rebuild without the removed element

6.2 Best Practices

1. Use it for state management and dynamic data editing
splice is useful when managing dynamic lists or user-driven updates.

Example: remove a task in a task app

let tasks = ["Task 1", "Task 2", "Task 3"];
let index = tasks.indexOf("Task 2");
if (index !== -1) {
  tasks.splice(index, 1);
}
console.log(tasks); // ["Task 1", "Task 3"]

Point: combining index search and splice enables flexible management.

2. Make use of the removed elements
Because splice returns removed elements, you can use them for logging or temporary storage.

Example: log the removed element

let users = ["Alice", "Bob", "Charlie"];
let removed = users.splice(1, 1); // Remove Bob
console.log(removed[0] + " was removed."); // Bob was removed.

Point: makes history tracking and restore features easier.

3. Wrap common operations in reusable functions
If you use the same operation often, turn it into a function for better reusability and readability.

Example: function to remove a specific element

function removeElement(arr, value) {
  let index = arr.indexOf(value);
  if (index !== -1) {
    arr.splice(index, 1);
  }
  return arr;
}

let items = ["a", "b", "c", "d"];
console.log(removeElement(items, "b")); // ["a", "c", "d"]

Point: reduces duplication and improves readability.

6.3 Summary of Cautions and Best Practices

• Remember it’s destructive: the original array is mutated.
• Always validate index ranges: be careful with negative indexes and out-of-range access.
• Optimize for large arrays: consider splitting or alternative approaches.
• Combine with logging/restore: use removed elements to manage history.
• Use functions for reuse: improve maintainability with reusable helpers.

In the next section, we’ll cover common questions about splice in a FAQ format to help you resolve typical real-world confusion.

7. Frequently Asked Questions (FAQ)

In this section, we’ve compiled common questions and answers about the splice method. Clear up your doubts in advance and aim for a deeper understanding.

7.1 FAQ List

Q1. Is the splice method destructive?
A. Yes, splice is a destructive method.
Because splice mutates the original array, you should use it carefully.

Example: the original array is changed

let arr = [1, 2, 3, 4];
arr.splice(1, 2); // Remove elements
console.log(arr); // [1, 4]

Solution: keep the original array
If you want to preserve the original state, create a copy using slice.

let arr = [1, 2, 3, 4];
let copy = arr.slice();
copy.splice(1, 2);
console.log(arr);  // [1, 2, 3, 4] Original array is not changed
console.log(copy); // [1, 4] Only the copy is changed

Q2. What happens if there are no elements to remove with splice?
A. If nothing is removed, an empty array is returned.

Example: when deleteCount is 0

let arr = [1, 2, 3, 4];
let removed = arr.splice(1, 0, "new");
console.log(arr);     // [1, "new", 2, 3, 4]
console.log(removed); // [] (nothing was removed)

Point:

• If deleteCount is set to 0, no deletion occurs and only insertion happens.

Q3. Can I use splice on an empty array?
A. Yes, you can use it even on an empty array.

Example: insert into an empty array

let arr = [];
arr.splice(0, 0, "item");
console.log(arr); // ["item"]

Point:
This is useful when inserting new elements.

Q4. How are negative indexes handled?
A. Negative indexes indicate positions from the end of the array.

Example: using a negative index

let arr = [1, 2, 3, 4, 5];
arr.splice(-2, 1); // Remove the second-to-last element
console.log(arr); // [1, 2, 3, 5]

Point:

• Negative indexes provide flexible editing from the end.
• They are useful when you want to operate near the array’s end.

Q5. What’s the difference between splice and slice?
A. The main difference is whether the original array is mutated.

Example: splice behavior

let arr = [1, 2, 3, 4];
arr.splice(1, 2); 
console.log(arr); // [1, 4]

Example: slice behavior

let arr = [1, 2, 3, 4];
let sliced = arr.slice(1, 3);
console.log(sliced); // [2, 3]
console.log(arr);    // [1, 2, 3, 4] Original array is not changed

Q6. Can I add multiple elements with splice?
A. Yes, you can add multiple elements by listing them separated by commas.

Example: inserting multiple elements

let arr = [1, 4];
arr.splice(1, 0, 2, 3);
console.log(arr); // [1, 2, 3, 4]

Point:

• Provide multiple elements from the third argument onward.
• This is helpful for flexible data management.

7.2 FAQ Summary

1. Be aware it’s destructive: the original array is mutated.
2. No deletion does not cause errors: it returns an empty array.
3. Negative indexes allow editing from the end: a convenient approach.
4. Choosing between splice and slice matters: use slice if you want to preserve the original array.
5. Multiple insertions are easy: useful for practical data management.

In the next section, we’ll recap the main points of the article and introduce additional resources for further learning.

8. Conclusion

In this article, we explained the JavaScript splice method from basics to practical applications. Let’s review the key points and provide suggestions for next steps.

8.1 Key Takeaways

1. Core capabilities

• splice is a powerful method for deleting, inserting, and replacing array elements.
• It is a destructive method, meaning it mutates the original array.

1. Syntax and arguments

• Use the form splice(start, deleteCount, item1, item2, ...).
• Combine the start index, delete count, and inserted items to perform flexible operations.

1. Basic and advanced usage

• In addition to basic deletion, insertion, and replacement, we covered advanced patterns such as duplicate removal and conditional replacement.

1. Comparison with other methods

• splice mutates the array, while slice extracts subarrays without mutation.
• For simple additions/removals, push/pop and shift/unshift are also useful.

1. Cautions and best practices

• Because it mutates the array, create a copy when you need safety.
• Be mindful of index ranges and performance, and consider optimization when needed.

1. FAQ coverage

• We answered common questions such as negative indexes and inserting multiple elements.

8.2 Next Steps

While splice is essential for learning array manipulation, JavaScript provides many other helpful array methods. Learning the following methods will enable more advanced operations:

• map method: transforms elements and returns a new array.
• filter method: extracts elements that match a condition into a new array.
• reduce method: aggregates elements into a single result.

Recommended learning order:

1. Practice data transformations using map and filter.
2. Try more advanced aggregation with reduce.
3. Compare destructive methods (push, pop, etc.) with non-destructive methods (slice, concat, etc.) and use each appropriately.

8.3 Reference Resources

To deepen your understanding, consider using these resources:

• Official documentation MDN Web Docs – splice
• Online learning sites
• JavaScript.info – covers JavaScript from basics to advanced topics.
• Codecademy – offers interactive learning experiences.
• Build practical projects
• CodePen – great for creating and sharing code demos.
• JSFiddle – ideal for testing and debugging JavaScript.

8.4 Final Notes

The splice method is a key skill for understanding array manipulation in JavaScript. Through this article, you should now have learned everything from basic usage to practical techniques.

Going forward, try applying what you learned here to real projects, and explore combining splice with other array methods and performance optimizations.

Keep digging deeper into JavaScript, and build more efficient and powerful code!