It’s very common to need to remove a certain value from an array in JavaScript. In this post, I’ll show you not only how to do so, but also how to implement it as if it were a native method on arrays, with flexibility for handling different types of data, including objects, primitives, and custom comparison logic.

Before we start, I want to invite you to visit 0dev, an open-source data platform that works with natural language. Use 0dev to access your data without complex SQL queries, visualize it without any coding and generate insights without any data science experience.

Repository: https://github.com/0dev-hq/0dev

Let’s create a custom remove method on JavaScript arrays, allowing it to remove the first occurrence of a value by default or all occurrences when specified. Additionally, we’ll enhance it by adding support for a comparator function, giving us control over how values are matched.

Array.prototype.remove = function(value, removeAll = false, comparator = (a, b) => a === b) {
  if (removeAll) {
    return this.filter(item => !comparator(item, value));
  } else {
    const index = this.findIndex(item => comparator(item, value));
    if (index !== -1) this.splice(index, 1); // Remove the item if found
    return this;
  }
};

Explanation

Array.prototype.remove

Adding remove to Array.prototype makes this function available directly on any array instance, just like native methods such as map, filter, or splice.

removeAll

The removeAll parameter provides a simple way to control the behavior of the method. By default, removeAll is set to false, meaning that only the first occurrence of the specified value will be removed. If removeAll is set to true, the method will remove all occurrences of the specified value.

comparator

The comparator parameter might seem redundant at first, but it adds more flexibility to this method. When working with arrays of objects, you have to match values based on the properties rather than simple equality, this is where the comparator parameter comes handy.

For instance, if you have an array of user objects and want to remove a user with a specific name, you can use a comparator function to compare based on the name property.

Usage Examples

Removing Primitive Values

For basic use cases with primitive values like numbers, the remove method works seamlessly.

javascriptCopy codelet numbers = [1, 2, 3, 4, 2];
numbers = numbers.remove(2); // Removes the first occurrence of 2
console.log(numbers); // Output: [1, 3, 4, 2]

numbers = numbers.remove(2, true); // Removes all occurrences of 2
console.log(numbers); // Output: [1, 3, 4]

Here, removeAll defaults to false, removing only the first occurrence. Setting removeAll to true removes all 2s from the array.

Removing Objects with a Comparator

When dealing with arrays of objects, the comparator function can specify exactly how the method should identify matches.

javascriptCopy codelet people = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Alice' }
];
// Remove all occurrences of objects with the name 'Alice'
people = people.remove({ name: 'Alice' }, true, (a, b) => a.name === b.name);
console.log(people); 
// Output: [{ id: 2, name: 'Bob' }]

Happy coding! :)