Remove Object from an Array by its Value in JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

Remove Object from an Array by its Value #

To remove an object from an array by its value:

  1. Call the findIndex() method to get the index of the object in the array.
  2. Use the splice() method to remove the element at that index.
  3. The splice method changes the contents of the array by removing or replacing existing elements.
index.js
const arr = [{id: 1}, {id: 3}, {id: 5}]; const indexOfObject = arr.findIndex(object => { return object.id === 3; }); console.log(indexOfObject); // 👉️ 1 arr.splice(indexOfObject, 1); console.log(arr); // 👉️ [{id: 1}, {id: 5}]

The function we pass to the Array.findIndex method gets called with each element (object) in the array until it returns a truthy value or iterates over the entire array.

In the example, we got the index of the first object in the array that has an id property with a value of 3.

The next step is to use the Array.splice method to remove the object at that index from the array.

The parameters we passed to the Array.splice method are:

  1. start index - the index at which to start changing the array
  2. delete count - how many elements should be deleted from the array
Our start index is the index of the object to be removed and we only want to delete a single array element.

The findIndex method returns -1 if the condition is never satisfied.

If we pass -1 as a start index to the splice method, it would remove the last element from the array, which would be a bug in our program.

If this is a possible scenario in your code, use the filter() method from the next example.

The splice method changes the contents of the original array, which can be confusing and difficult to follow. Most of the time it's better to create a new array, containing only the elements that we need.

An alternative approach is to use the filter method, which returns a new array containing only the elements we need.

To remove an object from an array by its value:

  1. Call the Array.filer() method on the array.
  2. Check if a property in each object points to the specific value.
  3. The filter method returns a new array, containing only the elements that satisfy the condition.
index.js
const arr = [{id: 1}, {id: 3}, {id: 5}]; const newArr = arr.filter(object => { return object.id !== 3; }); console.log(newArr) // 👉️ [{id: 1}, {id: 5}]

The Array.filter method does not mutate the contents of the original array, it returns a new array.

The function we passed to the filter() method will get invoked with each object in the array. If it returns a truthy value, the object is added to the new array.

This is different from the findIndex and splice approach for a couple of reasons:

  1. The findIndex method returns the index of the first element that satisfies the condition, whereas the filter method might filter out multiple elements with the same value

  2. The splice method changes the contents of the original array, whereas the filter method creates a new array

Further Reading #

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.