Blog

To remove an object from an array by it’s value in JavaScript, we can use two methods –

1. Use the findIndex() and splice() methods
2. Use the filter() function

There are a few differences between the two approaches, so it’s important to understand when to use each one.

Remove An Object From An Array By It’s Value In JavaScript

findIndex() And splice() To Remove An Object From An Array By It’s Value In JavaScript

The findIndex() method returns the index of the first element in an array that passes a given test.

If it doesn’t find any matching element, it will return -1.

We can use this method with the splice() method to remove the object from an array.

The splice() method changes the contents of an array by removing or adding elements.

Here’s an example of how to use these two methods together for an array of Objects –

var arr =  [{id: 1}, {id: 2}, {id: 3}];

var index = arr.findIndex(function(item) {

  return item.id === 1;

});

if (index > -1) {

 arr.splice(index,1);

}

console.log(arr);

Output:

[{

id: 2

}, {

id: 3

}]

In the above code, we have an array of objects. We use the findIndex() method to get the index of the object with an id of 1.

If it exists, we use the splice() method to remove that object from the array.

The splice() method takes two arguments here –

1. The first argument is the index of the element we want to remove.
2. The second argument is the number of elements we want to remove.

In our case, we’re only removing one element, so we set it to 1.

There are a few drawbacks of using this approach –

1. The splice() method changes the content of the original array, so if we want to keep the original array intact, we need to make a copy of it.
2. The findIndex() method only returns the index of the first element that passes the test.
3. If there are multiple elements with the same value (in our case, an id of 1), only the first one will be removed.

filter() To Remove An Object From An Array By It’s Value In JavaScript

The filter() function creates a new array with all elements that pass the given test.

We can use this to create a new array without the object we want to remove. Here’s an example –

var arr =  [{id: 1}, {id: 2}, {id: 3}];

var newArr = arr.filter(function(item) {

  return item.id !== 1;

});

console.log(newArr);

Output:

[{

id: 2

}, {

id: 3

}]

In the code above, we use the filter() function to create a new array without the object with an id of 1.

This is a more elegant solution than using the findIndex() and splice() methods because –

1. The original array is not changed.
2. We can remove multiple objects from the array if they have the same value.

For example, if we have an array of objects with duplicate ids –

var arr =  [{id: 1}, {id: 2}, {id: 1}];

var newArr = arr.filter(function(item) {

  return item.id !== 1;

});

console.log(newArr);

Output:

[{

id: 2

}]

In the code above, both objects with an id of 1 will be removed from the array.

One thing to keep in mind is that the filter() function creates a new array, so that’s a useful side-effect if we need a new array without the object we’re removing.

But if we just want to remove an object from an existing array, and we don’t care about creating a new array, then the findIndex() and splice() methods are more efficient because they only change the content of the original array.

Conclusion

In this article, we looked at two ways to remove an object from an array by it’s value in JavaScript.

The first approach uses the findIndex() and splice() methods, while the second approach uses the filter() function.

Both approaches have their own advantages and disadvantages, so it’s important to choose the right one depending on the situation.