JavaScript

How to Remove Elements from an Array in JavaScript

Arrays allow us to store similar kind of data in a single variable. We can then iterate over the data stored in the arrays and perform different functions to manipulate the data according to our needs. A single piece of data in an array is known as its element. JavaScript gives us the option to add and remove elements from an array after we have declared and initialized it. In this post we will only focus on the methods which can be used removing an element from an array.

JavaScript provides numerous methods which can be used to remove array elements; In this post we will discuss four such methods. Here’s the list of the four most common methods for removing an array element in JavaScript:

  • shift()
  • pop()
  • filter()
  • splice()

We will discuss them one by one in great detail.

Note: I will use the console to demonstrate the examples present in this post.

How to Remove an Element from the Beginning of an Array using the shift() method

JavaScript shift() method is commonly used to get rid of an element from the beginning of a JavaScript array. This method does not take any arguments. We can simply call it and it will remove an element from the beginning of the array and will shift every other element down by 1 index:

var num = [0, 1, 2, 3, 4, 5];

num.shift();

console.log(num);

How to get rid of an Array Element using the pop() method

JavaScript pop method can be used to get rid of an element from the end of a JavaScript Array. Similar to the shift() method It also does not take any argument:

var num = [0, 1, 2, 3, 4, 5];

num.pop();

console.log(num);

How to Remove Elements from an Array Using the filter() method

The filter() method can be used to remove elements of an array based on a certain condition; Applying the filter() method on the array does not change it rather it creates a new array consisting of the required elements. It takes a call back function as a parameter

Now, as an example, we will use the filter() method to remove every element from an array that is greater than 2:

var num = [0, 1, 2, 3, 4, 5];

var num2 = num.filter(element => element < 3)

console.log(num2);


Now we will remove every element that less than 3:

var num = [0, 1, 2, 3, 4, 5];

var num2 = num.filter(element => element > 2)

console.log(num2);

How to Remove Elements from the middle of an Array using the splice() method

The splice() method/function can be used to insert or remove an element of an array. We will need to give two parameters to the splice() method if we want to use it to remove elements from an array. The first parameter will define the starting point from which the splice() method is going to remove the elements and the second element will specify the number of elements that will be removed from the array:

var num = [1, 2, 3, 4, 5];

num.splice(2, 2);

console.log(num);

Conclusion

In this comprehensive guide we discussed four different methods of removing elements from an array in JavaScript. We can use the shift() and the pop() methods to remove items/elements from the start and end of an array object, respectively. If we need our original array to remain unchanged and want to create a new array which has elements that pass a certain condition then we should use the filter() method. The splice() method is best when it comes to removing an element from an array because it gives us control over the elements we want to remove. We can specify the index and number of elements that we want to remove in the splice() method.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.