How Lodash _.remove Filters and Mutates Arrays
The _.remove method in the Lodash JavaScript library
provides a streamlined way to extract elements from an array based on a
predicate condition, mutating the target array in place while returning
the removed elements as a new array. Unlike standard JavaScript array
methods that require chaining or separate steps to both filter and clean
up an existing array, _.remove accomplishes both tasks in a
single pass. This article explains how _.remove operates
under the hood, how it differs from native array methods, and how to use
it effectively in your code.
The Dual Action of
_.remove
JavaScript's native Array.prototype.filter() is an
immutable operation; it evaluates each item and returns a brand-new
array containing only the elements that satisfy the predicate, leaving
the original array completely untouched.
In contrast, Lodash's _.remove is destructive. It
combines the functionality of filter() with the in-place
deletion behavior of Array.prototype.splice(). When
invoked, it performs two distinct actions simultaneously:
- Mutates the source array: It strips out all elements that return a truthy value from the predicate function.
- Returns the extracted elements: It packages all the stripped elements into a new array and returns them to the caller.
How It Works Internally
Under the hood, _.remove iterates over the target array
and applies the provided predicate function to each item, its index, and
the collection itself.
Instead of calling the standard splice() on every
match—which would lead to \(O(n^2)\)
time complexity due to constant array re-indexing—Lodash optimizes this
process:
- It tracks the indices of items matching the predicate.
- It pulls the matched items out into a separate collection that will serve as the return value.
- It shifts the non-matching items forward in memory to fill the gaps
and truncates the source array's
lengthproperty directly.
This ensures the source array is modified in-place with optimal performance while safely handling index tracking without skipping elements.
Code Example
The following example demonstrates how passing an array through
_.remove impacts both the original array and the returned
value:
const _ = require('lodash');
const numbers = [1, 2, 3, 4, 5, 6, 7, 8];
// Remove even numbers
const evens = _.remove(numbers, (n) => n % 2 === 0);
console.log(numbers);
// Output: [1, 3, 5, 7] (Original array mutated)
console.log(evens);
// Output: [2, 4, 6, 8] (Removed items returned)You can also use Lodash's shorthand syntax for predicates, such as matching object properties:
const users = [
{ id: 1, name: 'Alice', active: false },
{ id: 2, name: 'Bob', active: true },
{ id: 3, name: 'Charlie', active: false }
];
// Remove all inactive users
const inactiveUsers = _.remove(users, { active: false });
console.log(users);
// Output: [{ id: 2, name: 'Bob', active: true }]
console.log(inactiveUsers);
// Output: [{ id: 1, name: 'Alice', active: false }, { id: 3, name: 'Charlie', active: false }]Key Considerations
- State Management: Because
_.removemutates the input array, avoid using it in environments where immutable data structures are strictly required, such as inside React component states or Redux reducers. - Reference Preservation: If other parts of your application hold a reference to the source array, they will immediately observe the changes, preventing stale references without needing reassignment.