How to remove item from array by value in JavaScript?

To remove an item from an array by its value in JavaScript, you can use several methods depending on whether you want to remove the first occurrence, all occurrences, or handle objects. Below are detailed approaches with examples:

1. Remove the First Occurrence of a Value

Use indexOf() to find the index of the value and splice() to remove it.

Example:

const fruits = ['apple', 'banana', 'orange', 'banana'];

// Remove the first occurrence of 'banana'
const index = fruits.indexOf('banana');
if (index > -1) {
  fruits.splice(index, 1); // Remove 1 element at the found index
}

console.log(fruits); // Output: ['apple', 'orange', 'banana']

2. Remove All Occurrences of a Value

Use filter() to create a new array that excludes the value.

Example:

const numbers = [1, 2, 3, 4, 2, 5];

// Remove all occurrences of 2
const filteredNumbers = numbers.filter(num => num !== 2);

console.log(filteredNumbers); // Output: [1, 3, 4, 5]

3. Remove by Value in an Array of Objects

Use findIndex() to find the index of the object and splice() to remove it.

Example:

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

// Remove the user with id = 2
const index = users.findIndex(user => user.id === 2);
if (index > -1) {
  users.splice(index, 1);
}

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

4. Using splice() in a Loop (Remove All Occurrences)

Iterate through the array backward to avoid index issues.

Example:

const colors = ['red', 'green', 'blue', 'green'];

// Remove all 'green' entries
for (let i = colors.length - 1; i >= 0; i--) {
  if (colors[i] === 'green') {
    colors.splice(i, 1);
  }
}

console.log(colors); // Output: ['red', 'blue']

5. Using Set for Primitive Values

Create a Set to remove duplicates and convert it back to an array.

Example:

const duplicates = [1, 2, 2, 3, 4, 4, 5];
const uniqueValues = [...new Set(duplicates)];

console.log(uniqueValues); // Output: [1, 2, 3, 4, 5]

6. Notes on the delete Operator

The delete operator removes the value but leaves an empty slot (not recommended).

Example:

const arr = [10, 20, 30, 40];
delete arr[2]; // Removes the value at index 2

console.log(arr); // Output: [10, 20, empty, 40]
console.log(arr.length); // Output: 4 (length remains unchanged)

Summary Table

Method	Use Case	Modifies Original Array?
indexOf() + splice()	Remove the first occurrence of a primitive value	Yes
filter()	Remove all occurrences of a value	No (returns new array)
findIndex() + splice()	Remove an object by property value	Yes
Loop + splice()	Remove all occurrences of a value	Yes

Key Takeaways

• Use splice() to modify the original array.
• Use filter() to create a new array without the value.
• For objects, use findIndex() with a condition to locate the item.
• Avoid delete for array elements (it creates sparse arrays).

By choosing the right method, you can efficiently remove values from arrays in JavaScript!