JavaScript Array splice() Method

JavaScript Array splice() Method

In this tutorial, we would love to share with you how to remove the elements/items from the javascript array. We will describe splice() methods of javaScript to removing/adding the elements/items in an array.

In this tutorial, we would love to share with you how to remove the elements/items from the javascript array. We will describe splice() methods of javaScript to removing/adding the elements/items in an array.

In this tutorial, we will take several examples of the JavaScript splice() method for better demonstration.

JavaScript splice() method definition

The javascript splice() method is used to add or remove elements/items 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.

Now we will take several examples of splice() method:

Example1 -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 = ['Cabbage', 'Turnip', 'Radish', 'Carrot'];

  arr.splice(1,2);

  console.log( arr ); 

Result of the above example-1 is:

["Cabbage", "Carrot"] 

Example2 – 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 = ['Cabbage', 'Turnip', 'Radish', 'Carrot'];

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

  console.log( arr ); 

Result of the above example-2 is:

["zero", "Cabbage", "Turnip", "Radish", "Carrot"]

At position 0, add the new items.

Example3 – 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);

Result of the above example-3 is:

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

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

Example4 – 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 );  

Result of the above example-4 is:

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

Example-5 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 );  

Result of the above example-5 is:

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

How do I remove an object from an array with 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 extract/remove, add elements from JavaScript arrays using the splice() method.

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Java vs. JavaScript: Know The Difference

Java vs. JavaScript: Know the Difference, Java vs. JavaScript: What's the Difference? Java vs. JavaScript: Major Similarities and Differences. pros and cons of JavaScript and Java.

Programming a Javascript Simon Game Tutorial

In this javascript tutorial, I recorded myself live programming an html5 javascript simon game.

Understanding Memoization And Dynamic Programming in Javascript

In this Javascript tutorial I will explain what memoization is, how to use it, when you should use memoization, how to use memoization, what dynamic programming is, how to use memoization in dynamic programming. Memoization is a big complicated word that you may have never even heard before, but you may be surprised to know that you are most likely already using memoization without even realizing it.