How to Remove an Element from an Array in JavaScript

So you are learning JS concepts through projects and you realised you need to remove an item from an array but not from the beginning(shift.()) or the end ( pop.()). Well, I was in your shoes once, while building a food-ordering app using JS. In this tutorial, we will discuss how to remove an element from an array using other array methods.

Let's revise the array methods we know

An array is a single variable used to store elements of different data types. Example:

const array = [1, 'red', 100]

The two methods used to remove an item from an array that you probably don't need for this tutorial but are good to know:

Array.pop()

The .pop() method removes the item at the end of an array

const array = [1, 2, 3, 4]
array.pop()
console.log(array)
// returns array = [1, 2, 3]

Array.shift()

The .shift() removes the item at the beginning of an array

const array = [1, 2, 3, 4]
array.shift()
console.log(array)
// returns array = [2, 3, 4]

The problem with the above methods is it is not specific and will only remove things from the end or beginning regardless.

How about how to remove an item from anywhere in an array?

Well to do that, you need to know the 2 additional methods which are:

Array.filter()

Array.filter()returns a copy of the elements that pass the criteria in a new array. It doesn't change the original Array.

const array = ['lion', 'elephant', 'zebra' , 'hen']

const newArray=  array.filter(( item) => item.length > 4 )

console.log(newArray) // returns ["elephant", "zebra"]
console.log(array)  // array = ['lion', 'elephant', 'zebra' , 'hen']

Array.splice()

1. The .splice() method modifies an array to give a new array.

splice(start) //needed
splice(start, deleteCount) // 2nd value optional
splice(start, deleteCount, item1) // 3rd value optional
splice(start, deleteCount, item1, itemN) //add as many values after the 3rd

1. Takes 3 values(start, stop, add)

   1. "Start" is compulsory and refers to the index of the item you want to remove.

   2. "Stop"(optional) refers to where to stop but you do that by telling it how many items it will remove

   3. "Add"(optional), if you want to add an item you specify it there. However, If you do not specify any elements to be added, splice() will only remove elements from the array.

const animalArray = ['lion', 'elephant', 'zebra' , 'hen']

const deletedItemsArray = array.splice(1, 3, 'monkey') // eqauls items removed

console.log(deletedItemsArray) // deletedItemsArray = [ 'elephant', 'zebra' , 'hen']

console.log(animalArray) // animalArray = ['lion', 'monkey']

The code above uses the splice() to remove an item from an array and saved it to a new array called deletedItemsArray. The original array animalArray equals the item not deleted and item(s) added.

What if the array is too long and you can't sit and count the index from 0?

You can use array methods called indexOf() and findIndex() then use the result to remove that item.

Array.indexOf()

The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present. If you have the value and are looking for the index of an element, then this method is for you.

const array = ['lion', 'elephant', 'zebra' , 'hen']

const index =  array.indexOf('hen')
console.log(index) // index = 3

Array.findIndex()

The findIndex() method takes a function and runs the function on each element of an array then returns the index of the first element that matches the criteria. If no elements satisfy the testing function, -1 is returned. Example:

const array = ['lion', 'elephant', 'zebra' , 'hen']

const index =  array.findIndex(( item) => item === 'zebra')

console.log(index) // returns 2

Combing findIndex()/indexOf() with splice()

Use the example above to find the index, then use splice to remove an item from the array. Example:

const array = ['lion', 'elephant', 'zebra' , 'hen']

const index =  array.findIndex(( item) => item === 'zebra')

console.log(index) // returns 2
const deletedItemsArray = array.splice(index, 1)
console.log(deletedItemsArray, array)

This code deletes an item at the index of 2 and stops after only removing one item.

Wrapping Up

In this article, we looked at 4 different methods for removing an item from an array. We also looked at 2 extra array methods that can be used to help find the index of an element when the array is too long. These methods are important to know as a JS programmer because you will most likely use them as you progress in your coding journey.

Congratulations on making it here! Don't forget to comment, like and subscribe to my newsletter!

Happy Coding!