Remove Object from an Array by its Value in JavaScript

avatar
Borislav Hadzhiev

Last updated: Dec 21, 2022
4 min

banner

# Remove an Object from an Array by its Value in JavaScript

To remove an object from an array by its value:

  1. Use the Array.filter() method to iterate over the array.
  2. Check if each object has a property that points to the specified value.
  3. The filter() method will return a new array that doesn't contain the object.
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}]

remove object from array by its value

If you want to change the original array in place, scroll down to the next subheading.

The Array.filter method doesn't mutate the contents of the original array, it returns a new array.

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

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}]

On each iteration, we check if the current object's id property doesn't have a specific value.

The new array contains all of the objects of the original array that meet the condition.

# Remove an Object from an Array by its Value using Array.findIndex()

This is a two-step process:

  1. Use the Array.findIndex() method to get the index of the object in the array.
  2. Use the Array.splice() method to remove the object at that index.
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}]

remove object from array by its value using array findindex

The function we passed 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.

index.js
const arr = [{id: 1}, {id: 3}, {id: 5}]; const indexOfObject = arr.findIndex(object => { return object.id === 3; }); console.log(indexOfObject); // ๐Ÿ‘‰๏ธ 1

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

The arguments 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.
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 findIndex method returns -1 if the condition is never met.

If we pass -1 as a start index to the Array.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 Array.filter() method instead.

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.

The Array.filter() method 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 meets 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.

Alternatively, you can use the Array.slice() method.

# Remove an Object from an Array by its Value using Array.slice()

This is a two-step process:

  1. Use the Array.findIndex() method to get the index of the object in the array.
  2. Use the Array.slice() method to create a new array excluding the object at that index.
index.js
const arr = [{id: 1}, {id: 3}, {id: 5}]; const indexOfObject = arr.findIndex(object => { return object.id === 3; }); const newArr = [ ...arr.slice(0, indexOfObject), ...arr.slice(indexOfObject + 1), ]; // ๐Ÿ‘‡๏ธ [ { id: 1 }, { id: 5 } ] console.log(newArr);

remove object from array by its value using array slice

We used the Array.findIndex() method to get the index of the object in the array.

The method returns the index of the object that has an id property with a value of 3.

We then used the Array.slice() method to create a new array that doesn't contain the object at that index.

The spread syntax (...) is used to unpack the values of the array slices into a new array.

We passed the following arguments to the Array.slice method:

  • start index - index (zero-based) at which to start extraction.
  • end index - extract values up to, but not including this index.

We added 1 to the start index in the second call to the Array.slice() method to exclude the object from the new array.

index.js
const arr = [{id: 1}, {id: 3}, {id: 5}]; const indexOfObject = arr.findIndex(object => { return object.id === 3; }); const newArr = [ ...arr.slice(0, indexOfObject), ...arr.slice(indexOfObject + 1), ]; // ๐Ÿ‘‡๏ธ [ { id: 1 }, { id: 5 } ] console.log(newArr);

The Array.slice() method doesn't mutate the original array.

The newArr variable contains all objects of the original array excluding the object that has an id property with a value of 3.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

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.

Copyright ยฉ 2024 Borislav Hadzhiev