JavaScript: How to Delete an Item From an Array

Problem

• You need to remove one or more elements from a JavaScript array.
• You may know the index, the value, or just need first/last removal.
• You want the safest, most readable option and to avoid pitfalls like delete leaving holes.

---

Solutions

Remove by index (mutates the array) — use splice(index, count)

const arr = ['a','b','c','d'];
const index = 1;              // remove 'b'
arr.splice(index, 1);         // arr => ['a','c','d']

Remove by value (returns a new array) — use filter

const arr = ['a','b','c','b'];
const val = 'b';
const out = arr.filter(x => x !== val);   // ['a','c']

Remove first or last item (mutates) — shift() / pop()

const arr1 = [1,2,3];
arr1.pop();    // removes last -> [1,2]

const arr2 = [1,2,3];
arr2.shift();  // removes first -> [2,3]

Remove by predicate (first match) — findIndex + splice (mutates)

const users = [{id:1},{id:2},{id:3}];
const i = users.findIndex(u => u.id === 2);
if (i !== -1) users.splice(i, 1);         // remove {id:2}

Remove all items matching a predicate (immutable) — filter

const users = [{role:'admin'},{role:'user'},{role:'admin'}];
const withoutAdmins = users.filter(u => u.role !== 'admin');

Remove multiple by index range (mutates)

const arr = [0,1,2,3,4,5];
arr.splice(2, 3);   // remove 3 items starting at index 2 -> [0,1,5]

Avoid delete (leaves a hole)

const arr = [10,20,30];
delete arr[1];      // [10, empty, 30], arr.length === 3  (bad)

---

Things to Consider

• Mutation vs immutability:

  • splice, pop, shift mutate the original array.
  • filter, slice, spread ([...]) return new arrays (safer for React/NgRx patterns).

• Index correctness:

  • Recompute indexes after removals or iterate from the end when splicing in loops.

• Equality:

  • Removing objects by “value” requires a predicate (compare fields), not indexOf.

• Performance:

  • filter creates a new array; splice is in-place. Choose based on data size and style.

• NaN edge case:

  • indexOf(NaN) is -1; use arr.findIndex(Number.isNaN) to target NaN.

---

Gotchas

• delete arr[i] does not reindex; it leaves a sparse array.
• Splicing while iterating forward can skip elements; iterate backward or collect indexes first.
• indexOf works for primitives; for objects it compares references, not contents.
• Don’t mutate arrays shared across state unless you intend to update in place.

---

Sources

• Official Documentation — MDN: Array.prototype.splice
• Relevant StackOverflow answer
• Other reputable resource — MDN: delete operator

---

Further Investigation

• Immutable update patterns (React, Redux/NgRx) with filter, map, and spreads.

• Performance tradeoffs of splice vs filter on large arrays.

• De-duplication via Set and when it’s appropriate.

• MDN references:

  • Array.prototype.filter
  • Array.prototype.findIndex

---

TL;DR

• Know the index? Use splice. Need by value? Use filter. Ends? Use pop/shift.

// by index (mutates)
arr.splice(i, 1);

// by value (immutable)
arr = arr.filter(x => x !== value);

// ends (mutates)
arr.pop();     // last
arr.shift();   // first