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.

javascript programming

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

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

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

How to start writing less error-prone code in JavaScript

How to start writing less error-prone code in JavaScript - Everything in JavaScript is an object!’. We said that this assertion is false. Many things in JavaScript can behave like an object, but that doesn’t mean it’s the object. We can say we have three types of objects (objects, functions and arrays) in JavaScript.

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

Taking functional programming to JavaScript objects

Functional programming seems to be where the hype is nowadays — And for good reason; It can drastically reduce the amount of boilerplate code that you have to write in comparison to imperative programming which allows you to improve the readability of your code and consequently, maintainability.

9 JavaScript Tricks making programming life much easier

Making my programming life much easier and they look pretty cool in the editor. 9 JavaScript Tricks I Live By. Destructuring, Dynamic Property Names, map(), filter(), Template Literals, Short Circuit Conditionals, The Spread Operator Spreads values from one (or more) array(s) into another to form a single array, some(), Returns true if at least one of the elements in your array satisfies the condition you’re passing in. False otherwise, includes().

Functional Programming in JavaScript

Let’s explore the JavaScript features that make functional programming possible, discuss different functional programming concepts, and see why they are so powerful.