JavaScript Array Splice: Remove, Add, and Replace

JavaScript Array Splice: Remove, Add, and Replace

In this tutorial, you will learn how to use the JavaScript Array splice() method to remove existing elements, add new elements, and replace elements in an array.

Here, you will take a look at examples of the JavaScript array splice() method for better demonstration.

JavaScript splice()

Definition:- The javascript splice() method is used to add, remove and replace elements from an array.

Syntax of javascript splice() method

array.splice(index, howmany, item1, ....., itemX)
  • The first argument specifies the location at which to begin adding or removing elements.
  • The second argument specifies the number of elements to remove.
  • The third and subsequent arguments are optional; they specify elements to be added to the array.

Example: javascript array splice() method

Let’s take a look at examples of javascript array splice() method.

1: Remove 2 elements from index 2

Let’s take an example, Suppose we have one array that names arr, we want to remove the elements in it. So let’s see the example below:

 var arr = [ "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten" ]; 

 arr.splice(1,2);

 console.log( arr ); 

Output

   ["one", "four", "five", "six", "seven", "eight", "nine", "ten"]
 

2: Add new element from index 0

Let’s take new an example, Suppose we have one array that names arr.

If you want to add the elements in arr array. So let’s see the example below:

  var arr = [ "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten" ]; 

 arr.splice(0,0,"zero");

 console.log( arr );  

Output

["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten"]

At position 0, add the new items.

3: Replaces 1 element at index 5

In this example, we will demonstrate how to replace the value of an array. Let’s see the below example

 var arr = [ "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten" ]; 

 arr.splice(5,1,6);

 console.log( arr );  

Output

["one", "two", "three", "four", "five", 6, "seven", "eight", "nine", "ten"]

4: Add and Remove Elements in Array

In this example, we will demonstrate how to add and remove the array.

Suppose, you have an array that name month. In this array, you want to add/remove the new items/elements. We will demonstrate how to add or remove the item in it. let’s see below example:

var months = ['Jan', 'March', 'April', 'June'];

months.splice(1, 0, 'Feb'); // add at index 1

console.log(months); 

months.splice(4, 1, 'May'); // replaces 1 element at index 4

console.log(months);

Output

 // expected output: Array ['Jan', 'Feb', 'March', 'April', 'June']

 // expected output: Array ['Jan', 'Feb', 'March', 'April', 'May']

5: Remove all elements after index 3

In this example, we will explain how to remove all the elements after particular index from an array. Let’s see the example below:

  var arr = [ "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten" ]; 

 arr.splice(3);

 console.log( arr );   

Output

 [ "one", "two", "three"];  

How do I remove an object from an array in JavaScript?

Using the javascript splice() method to remove Objects from Array in JavaScript. Let’s see the example below.

We have an array object, we want to remove the id=3 object inside the array. So use the below method:

var arr = [
 {id:1,name:'hello'}, 
 {id:2,name:'world'},
 {id:3,name:'cool'},
 {id:4,name:'javascript'},
 {id:5,name:'jquery'}
 ];
 var ind = arr.findIndex(function(element){
    return element.id===3;
 })
 if(ind!==-1){
 arr.splice(ind, 1)
 }
 console.log (arr);

Let’s take second of example remove the object from JSON array in javascript. Let’s see the example below

var arr = [
 {id:1,name:'hello'}, 
 {id:2,name:'world'},
 {id:3,name:'cool'},
 {id:4,name:'javascript'},
 {id:5,name:'jquery'}
 ];
 arr.splice(arr, 4);
 console.log (arr);

Conclusion

In this tutorial, you have learned how to use the JavaScript Array splice() method to remove existing elements, add new elements, and replace elements in an array.

You may like

  1. Sorting Using JavaScript Array Sort() Method
  2. JavaScript: Clone an Array & Object By Examples
  3. JavaScript: Convert String to Array JavaScript
  4. Remove (First, last, specific) Element From Array Javascript
  5. javaScript Push() Array By Example
  6. javaScript Push Array, Items Into Array Example
  7. JavaScript Check the Object | isArray() Function
  8. JavaScript: Important Array Methods

AuthorTuts Make

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Javascript, JQuery, Laravel, Codeigniter, Vue JS, Angular JS, React Js, WordPress and Bootstrap from a starting stage.

Leave a Reply

Your email address will not be published. Required fields are marked *