Remove Object from an Array by its Value in JavaScript

avatar

Borislav Hadzhiev

Sun Oct 10 20213 min read

banner

Photo by Brandi Redd

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 in the array until it returns a truthy value or iterates over all array elements.

In our case, we get 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 pass to the 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 in the array and we only 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 in this article.

Note that the findIndex method is not supported in Internet Explorer, if you need to support the browser, use the next approach covered in this article.

The splice method changes the contents of the original array, which can be confusing and difficult to follow in a code base. 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 would return a new array containing only the elements we need.

To remove an object from an array by its value:

  1. Call the filter() method, passing it a function.
  2. The function will get called with each object in the array and should perform an equality check on the value.
  3. The filter method returns a new array, containing only the elements that satisfy the condition.
index.js
// Supported in Internet Explorer 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 kept in the returned 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

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee