Remove Object from an Array by its Value in JavaScript

# 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.

Copied!
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 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.

Copied!
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.

Copied!
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 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.

Copied!
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.

Copied!
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 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.

Copied!
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);

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.

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.

Copied!
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:

• Remove Null or Undefined Values from Object in Javascript
• Remove Duplicates from an Array of Objects in JavaScript
• Remove the Empty Objects from an Array in JavaScript
• Remove Property from all Objects in Array in JavaScript