Remove Array Element Based on Object Property in JavaScript

Here are the several methods that can be used to remove array elements based on object property in JavaScript

1. Using the filter() method

The filter() method is useful if you want to preserve the original array and create a new one without the element(s) you want to remove.

let a = [{ id: 1, name: 'Aahana' },{ id: 2, name: 'Neha' },{ id: 3, name: 'Charu' }];
let up = a.filter(a => a.id !== 2);
console.log(up);

[ { id: 1, name: 'Aahana' }, { id: 3, name: 'Charu' } ]

In this example

• Input Array: people(a) contains objects with id and name properties.
• Filter Method: The filter() method creates a new array, including only objects where person.id is not 2.

2. Using splice() method

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. 

let a = [{ id: 1, name: 'Aahan' }, { id: 2, name: 'Neha' }, { id: 3, name: 'Charu' }];
let rem = a.findIndex(a => a.id === 2);
if (rem !== -1) {
	a.splice(rem, 1);
}
console.log(a);

[ { id: 1, name: 'Aahan' }, { id: 3, name: 'Charu' } ]

In this example

• findIndex(): Finds the index of the object where id === 2. If found, it returns the index; otherwise, it returns -1.
• Condition: Checks if the index is valid (!== -1).
• splice(): Removes the element at the found index directly from the original array.

3. forEach()

The forEach() method executes a provided function once for each array element. 

let a = [{id: 1,name: 'Luvkush'}, {id: 2, name: 'Jenni'},{id: 3,name: 'Daya'}];
for (let i = 0; i < a.length; i++) {
    if (a[i].id === 2) {
        a.splice(i, 1);
        i--;
    }
}
console.log(a);

[ { id: 1, name: 'Luvkush' }, { id: 3, name: 'Daya' } ]

In this example

• The code removes the object with id: 2 from the array using a loop and splice, adjusting the index with i-- to avoid skipping elements.

4. Using reduce() method

The reduce() method in JavaScript processes an array to produce a single output by applying a callback function to each element.

let arr = [{ id: 1, name: 'Tanu' }, { id: 2, name: 'Jayant' }, { id: 3, name: 'Riya' },];
let id = 2;

arr = arr.reduce((acc, item) => {
	if (item.id !== id) {
		acc.push(item);
	}
	return acc;
}, []);
console.log(arr);

[ { id: 1, name: 'Tanu' }, { id: 3, name: 'Riya' } ]

In this example

• The code removes an object with id = 2 from the array using the reduce() method.
• It iterates through the array, pushing only the objects that don’t match the specified id into a new array, which becomes the updated arr.

5. Using findIndex() Method with splice()

The findIndex() method is used to locate the index of the element that matches the specific property value. Once the index is found, we use the splice() method to remove the element from the array.

let a = [{ id: 1, name: 'Jaya' },{ id: 2, name: 'Raha' },{ id: 3, name: 'Daya' }];
const id = 2;
const index = a.findIndex(element => element.id === id);

if (index !== -1) {
    a.splice(index, 1);
}
console.log(a);

[ { id: 1, name: 'Jaya' }, { id: 3, name: 'Daya' } ]

In this example

• The code removes the object with id = 2 from the array.
• It uses findIndex() to locate the index of the matching object and, if found (index !== -1), removes it using splice().

6. Using map() method

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

let a = [{ id: 1, name: 'Jaya' },{ id: 2, name: 'Jenni' },{ id: 3, name: 'Bhavya' },];
const id = 2;

a = a.map(item => {
    return item.id !== id ? item : null;
}).filter(item => item !== null); 

console.log(a);

[ { id: 1, name: 'Jaya' }, { id: 3, name: 'Bhavya' } ]

In this example

• The code removes the object with id = 2 from the array.
• It uses map() to replace the matching object with null, then filters out null values using filter(), leaving the remaining objects in the array.