Remove Array Element Based on Object Property in JavaScript

In JavaScript, we often work with arrays of objects. Sometimes we may need to remove an element from an array based on a specific property of the object it contains. For example, we may want to remove all objects from an array where the value of the id property matches a certain value. In this article, we will discuss various approaches to achieve this in JavaScript.

There are several methods that can be used to remove array elements based on object property:

Approach 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. The filter() method creates a new array with all the elements that pass the test implemented by the provided function. 

Syntax:

array.filter(callback(element, index, array), thisArg);

Parameters:

• callback: A function that accepts up to three arguments. The filter() method calls the callback function for each element in the array and returns a new array with all the elements for which the callback function returns “true”.
• element: The current element being processed in the array.
• index (optional): The index of the current element being processed in the array.
• array (optional): The array filter() was called upon.
• thisArg (optional): Object to use as this when executing callback.

Example: In this example, The code removes the object with id: 2 from the array arr using the filter() method and logs the updated array.

Javascript

let arr = [{
    id: 1,
    name: 'John'
},
{
    id: 2,
    name: 'Jane'
},
{
    id: 3,
    name: 'Bob'
},
{
    id: 4,
    name: 'Alice'
}
];

arr = arr.filter(item => item.id !== 2);

console.log(arr);

Output

[
  { id: 1, name: 'John' },
  { id: 3, name: 'Bob' },
  { id: 4, name: 'Alice' }
]

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

Syntax:

array.splice(start, deleteCount, item1, ..., itemX);

Parameters:

• start: The index at which the array is changed. If greater than the length of the array, the actual starting index will be set to the length of the array. If negative, it will begin that many elements from the end of the array.
• deleteCount (optional): An integer indicating the number of old array elements to remove. If deleteCount is 0 or negative, no elements are removed.
• item1, …itemX (optional): The elements to add to the array, beginning at the start index. If you don’t specify any elements, splice() will only remove elements from the array.

Example: The following code demonstrates the forEach() method. In this example, we are using the forEach() method to iterate over the array. Inside the callback function, we check if the ‘id’ property of the current element matches the value we want to remove. If it does, we use the splice() method to remove that element from the array. Since we are modifying the array while iterating over it, we need to use the index parameter to ensure that we remove the correct element. Finally, we log the updated array to the console.

Javascript

let arr = [{
    id: 1,
    name: 'John'
},
{
    id: 2,
    name: 'Jane'
},
{
    id: 3,
    name: 'Bob'
},
{
    id: 4,
    name: 'Alice'
}
];

arr.forEach((item, index) => {
    if (item.id === 2) {
        arr.splice(index, 1);
    }
});

console.log(arr);

Output

[
  { id: 1, name: 'John' },
  { id: 3, name: 'Bob' },
  { id: 4, name: 'Alice' }
]

Approach 3: Using forEach()

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

Syntax:

array.forEach(callback(currentValue, index, array), thisArg);

Parameters:

• callback: A function that accepts up to three arguments. The forEach() method calls the callback function for each element in the array.
• currentValue: The value of the current element being processed in the array.
• index (optional): The index of the current element being processed in the array.
• array (optional): The array forEach() was called upon.
• thisArg (optional): Object to use as this when executing callback.

Example: The following code demonstrates the splice() method. In this example, we are using a for loop to iterate over the array. Inside the loop, we check if the ‘id’ property of the current element matches the value we want to remove. If it does, we use the splice() method to remove that element from the array. We also decrement the index variable to ensure that we don’t skip any elements. Finally, we log the updated array to the console.

Javascript

let arr = [{
    id: 1,
    name: 'John'
}, {
    id: 2,
    name: 'Jane'
},
{
    id: 3,
    name: 'Bob'
}, {
    id: 4,
    name: 'Alice'
}
];

for (let i = 0; i < arr.length; i++) {
    if (arr[i].id === 2) {
        arr.splice(i, 1);
        i--;
    }
}

console.log(arr);

Output

[
  { id: 1, name: 'John' },
  { id: 3, name: 'Bob' },
  { id: 4, name: 'Alice' }
]

Approach 4: Using reduce() method

In this approach we are using reduce() method, the reduce() method to remove an object from the array based on a specific property value:

Syntax:

array.reduce( function(total, currentValue, currentIndex, arr), 
initialValue );

Example: In this example, we are using reduce() to iterate through arr. Objects with id not equal to 2 are pushed to acc, resulting in an updated array without the object with id: 2.

Javascript

let arr = [
    {
        id: 1,
        name: 'John'
    },
    {
        id: 2,
        name: 'Jane'
    },
    {
        id: 3,
        name: 'Bob'
    },
    {
        id: 4,
        name: 'Alice'
    }
];

let idToRemove = 2;

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

console.log(arr);

Output

[
  { id: 1, name: 'John' },
  { id: 3, name: 'Bob' },
  { id: 4, name: 'Alice' }
]

By leveraging the appropriate approach, you can efficiently remove unwanted elements from an array and manipulate data as needed.