codewithjohn.dev
Published on

JavaScript Array splice() Method

In this tutorial, we are going to discuss how you can remove, add, or replace elements of an array by using the splice() method.

The splice() method is a built-in method for JavaScript Array objects. It allows you to change the content of your array by removing or replacing existing elements. The method modifies the original array and returns the removed elements as a new array. If there are no elements removed, it returns an empty array.

Array.splice() Syntax

array.splice(start, deleteCount, item1, item2, ...)
  • array: The array on which the splice() method is called.
  • start: The index at which to start changing the array. If it is a negative value, then it will calculate the position from the end of the array.
  • deleteCount: The number of elements to remove from the array starting at the start index. If this parameter is set to 0 or negative, then no elements will be removed.
  • item1, item2, ...: The elements to add to the array at the start index. If no items are specified, splice() will only remove elements from the array.
The splice method change mutates the original array.

How to Insert an Item in An array using JavaScript's Array.splice() Method?

Let's start with a very basic example by adding an item in a languages array with the JavaScript's Array splice() method.

const languages = ['Python', 'Typescript', 'Ruby', 'Java', 'C#']
let removed = languages.splice(0, 0, 'Dart')
console.log(removed) // []
console.log(languages) //[ 'Dart', 'Python', 'Typescript', 'Ruby', 'Java', 'C#' ]

In the above example, we start from the first index, which is Python, and we remove the zero element, which is why we pass 0; we also added Dart at the first position.

How to Remove an Item in An array using Splice Method?

You can also use the splice method to Remove elements in an array. Here is an example:

const languages = ['Python', 'Typescript', 'Ruby', 'Java', 'C#']

let removed = languages.splice(0, 2)
console.log(removed) // ["Python", "Typescript"]
console.log(languages) // [ 'Ruby', 'Java', 'C#' ]

In the example above, we start from the first index, which is python, and we remove 2 elements, so python and typescript will be removed. If you notice, we didn't pass the third argument to the splice method, so no elements will be added.

How to Replace an Item in An array using JavaScript's splice() Method?

You can also use the splice method to replace some elements in an array Here's an example.

const languages = ['Python', 'Typescript', 'Ruby', 'Java', 'C#']

let removed = languages.splice(2, 1, 'dart')
console.log(removed) // [‘Ruby’]
console.log(languages) //[ 'Python', 'Typescript', 'dart', 'Java', 'C#' ]

In the above example, we start from the second index, which is Ruby, and we remove one element, so Ruby is removed, and we add dart in place of Ruby.

Conclusion

In this article, you have learned about The splice() method. In JavaScript arrays, we use the splice method to Add, remove, or Insert the values in a JavaScript array. Javascript's splice method works better with sorted arrays. If you need to learn more about the splice method, check out Developer Mozilla Org.