Skip to main content

How to Remove an Object from an Array by Property Value in JavaScript

A common task in JavaScript is to remove an object from an array based on the value of one of its properties, such as its id. Depending on your application's needs, you might want to create a new array without the object (an immutable operation) or modify the original array directly (a mutation).

This guide will teach you the modern, standard methods for both scenarios. You will learn how to use Array.prototype.filter() for the immutable approach and Array.prototype.findIndex() with splice() for the mutating approach.

The Core Problem: Finding and Removing an Object​

Unlike primitive values, objects are compared by reference, not by value. You cannot simply use array.indexOf(objectToRemove) unless you have a direct reference to the exact same object in memory. Instead, you must find the object by searching for a unique property, like an id.

Problem: you have an array of users and you need to remove the user with id: 2.

// Problem: How to remove the object where `id` is 2?
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

Method 1 (Recommended & Immutable): filter()​

The Array.prototype.filter() method is the most common, readable, and safest way to "remove" an object. It creates a new array containing only the elements that pass a certain test, leaving the original array unchanged. This is an immutable operation, which is a best practice in modern JavaScript.

Logic: the test condition is simple: keep every object whose id is not equal to the one we want to remove.

Solution:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

const idToRemove = 2;

// The filter() method creates a new array with all elements that pass the test.
const filteredUsers = users.filter(user => {
  return user.id !== idToRemove;
});

console.log(filteredUsers); // Output: [ { id: 1, name: 'Alice' }, { id: 3, name: 'Charlie' } ]
console.log(users);         // Output: [ { id: 1, ... }, { id: 2, ... }, { id: 3, ... } ] (original is unchanged)
note

This method is highly recommended for its clarity and for avoiding side effects.

Method 2 (Mutation): findIndex() and splice()​

If you need to modify the original array directly (an in-place mutation), the standard approach is a two-step process.

Logic:

  1. Find Index: Use Array.prototype.findIndex() to get the index of the first object that matches your condition.
  2. Splice: If the index is found, use Array.prototype.splice() to remove the element at that index.

Solution:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

const idToRemove = 2;

// 1. Find the index of the object.
const indexToRemove = users.findIndex(user => {
  return user.id === idToRemove;
});

// 2. If the object is found (index is not -1), remove it.
if (indexToRemove !== -1) {
  users.splice(indexToRemove, 1);
}

console.log(users); // Output: [ { id: 1, name: 'Alice' }, { id: 3, name: 'Charlie' } ] (original is now changed)
note

The splice(index, 1) command means: "at index, remove 1 element."

Handling the "Object Not Found" Edge Case​

A robust script must handle the case where no object with the specified ID is found.

  • filter(): Handles this gracefully by default. If no elements are removed, it simply returns a new array with the same contents as the original.
  • findIndex(): This is where you must be careful. If no object is found, findIndex() returns -1. If you pass -1 to splice(), it will incorrectly remove the last element of the array.
note

The if (indexToRemove !== -1) check is not optional when using the findIndex/splice method. It is a critical guard clause to prevent bugs.

Conclusion​

Removing an object from an array based on a property value is a common task with two excellent solutions, depending on your goal.

  • The recommended best practice is the immutable approach using Array.prototype.filter(). It is safer, more readable, and aligns with functional programming principles.
  • If you must mutate the original array, the correct method is to use findIndex() to locate the element and then splice() to remove it. Always remember to check that findIndex() did not return -1 before calling splice().

Table of Contents