Introduction

In JavaScript, removing an array item by value usually means one of two things: remove the first matching value from the existing array, or build a new array without that value. Which approach is correct depends on whether you want to mutate the original array.

That distinction matters because JavaScript arrays are reference types. If other code holds the same array object, an in-place change affects everyone who can see it.

Remove the First Matching Value In Place

If you want to change the existing array, the classic approach is indexOf() plus splice():

1const fruits = ["apple", "banana", "cherry"];
2const index = fruits.indexOf("banana");
3
4if (index !== -1) {
5  fruits.splice(index, 1);
6}
7
8console.log(fruits);

indexOf() returns the first matching index or -1 if the value is not present. splice(index, 1) removes one element starting at that index.

This is the most direct answer when you want to remove only the first occurrence.

Remove All Matching Values Without Mutating

If you want a new array and you do not want to touch the original one, filter() is usually cleaner:

1const fruits = ["apple", "banana", "banana", "cherry"];
2const result = fruits.filter(item => item !== "banana");
3
4console.log(result);
5console.log(fruits);

This returns a new array containing only the elements that passed the test. It is often preferred in React, Redux, and other codebases where immutable updates are easier to reason about.

Removing Objects by Value-Like Criteria

Arrays often hold objects, not primitive values. In that case, indexOf() only works if you pass the exact same object reference.

For example, this usually does not work the way people expect:

const items = [{ id: 1 }, { id: 2 }];
const index = items.indexOf({ id: 2 });
console.log(index); // -1

That fails because the new object literal is not the same reference as the object inside the array.

Instead, search by a property with findIndex():

1const items = [{ id: 1 }, { id: 2 }, { id: 3 }];
2const index = items.findIndex(item => item.id === 2);
3
4if (index !== -1) {
5  items.splice(index, 1);
6}
7
8console.log(items);

This is the right pattern when "by value" really means "by matching object fields."

A Reusable Helper

If you need this often, wrap it in a helper function:

1function removeFirstByValue(array, value) {
2  const index = array.indexOf(value);
3  if (index !== -1) {
4    array.splice(index, 1);
5  }
6  return array;
7}
8
9const numbers = [1, 2, 3, 2];
10removeFirstByValue(numbers, 2);
11console.log(numbers);

And if you prefer an immutable helper:

1function removeAllByValue(array, value) {
2  return array.filter(item => item !== value);
3}
4
5const numbers = [1, 2, 3, 2];
6const result = removeAllByValue(numbers, 2);
7console.log(result);
8console.log(numbers);

The helper names make the behavior explicit, which is useful when both mutation styles exist in the same codebase.

Why delete Is Usually Wrong

New JavaScript developers sometimes try:

1const numbers = [10, 20, 30];
2delete numbers[1];
3console.log(numbers);
4console.log(numbers.length);

delete removes the property at that index, but it does not shift the array or reduce its length. You end up with a sparse array containing an empty slot.

If your goal is actual removal, use splice() or create a filtered copy.

Performance and Behavior Tradeoffs

splice() is good when you intentionally mutate the existing array and only need to remove one element. filter() is cleaner when you want every matching value removed or when immutable updates fit the architecture better.

Both operations are still linear in the size of the array because JavaScript may need to inspect each element and shift later elements.

For very large collections where frequent removals matter, a different data structure such as Map or Set might be a better fit than an array.

Common Pitfalls

The biggest pitfall is forgetting that indexOf() only removes the first match. If the value appears several times, the rest stay in the array unless you use filter() or loop intentionally.

Another common mistake is using delete and expecting the array length to shrink. It will not.

Developers also get tripped up by object identity. indexOf() compares object references, not object contents, so matching an object "by value" requires findIndex() or filter() with a predicate.

Finally, choose mutation deliberately. splice() changes the original array, while filter() returns a new one. Using the wrong version can create subtle bugs in UI state management.

Summary

• Use indexOf() plus splice() to remove the first matching primitive value in place.
• Use filter() when you want a new array or need to remove all matches.
• For arrays of objects, use findIndex() or filter() with a predicate instead of indexOf().
• Avoid delete for array removal because it leaves holes.
• Decide explicitly whether the operation should mutate the original array or return a new one.