How to Remove from an Array in JavaScript

What you’ll build or solve

You’ll remove elements from arrays safely and predictably.

When this approach works best

Removing from an array works best when you:

• Delete a task from a to-do list by index.
• Remove a product from a shopping cart by ID.
• Filter out unwanted values like null or empty strings.
• Maintain application state without mutating the original data.

Avoid removing items while looping forward through the same array without care. That can skip elements and cause bugs.

Prerequisites

• A browser console or Node.js
• Basic understanding of arrays and variables

No additional setup is required.

Step-by-step instructions

Step 1: Remove by index with splice()

Use splice() when you know the index.

constnumbers= [10,20,30,40];

numbers.splice(1,1);
console.log(numbers);

Explanation:

• First argument: start index.
• Second argument: number of items to remove.

What to look for:

• splice() modifies the original array.
• It returns an array of removed elements.

Step 2: Remove by value with filter()

Use filter() when you want to remove items based on a condition.

constnumbers= [10,20,30,40];

constupdated=numbers.filter(num =>num!==20);
console.log(updated);

filter() creates a new array and leaves the original unchanged.

What to look for:

• filter() does not mutate.
• The condition must return true for values you want to keep.

Step 3: Remove the last or first item

Use built-in methods for common cases.

Remove the last item:

constitems= ["a","b","c"];

items.pop();
console.log(items);

Remove the first item:

items.shift();
console.log(items);

What to look for:

• pop() and shift() modify the original array.
• Both return the removed element.

Step 4: Remove by index without mutating using slice()

If you want a new array without the removed element, combine slice() and spread.

constnumbers= [1,2,3,4];

constindexToRemove=2;

constupdated= [
  ...numbers.slice(0,indexToRemove),
  ...numbers.slice(indexToRemove+1)
];

console.log(updated);

This keeps the original array unchanged.

What to look for:

• slice() does not mutate.
• Spread merges the remaining parts into a new array.

Examples you can copy

Example 1: Remove a completed task

consttasks= ["Buy milk","Call Alex","Write report"];

constindex=tasks.indexOf("Call Alex");

if (index!==-1) {
tasks.splice(index,1);
}

console.log(tasks);

Example 2: Remove a product by ID

constcart= [
  { id:1, name:"Book" },
  { id:2, name:"Lamp" }
];

constupdatedCart=cart.filter(item =>item.id!==1);

console.log(updatedCart);

Example 3: Remove all empty values

constvalues= ["apple","",null,"orange"];

constcleaned=values.filter(Boolean);

console.log(cleaned);

Example 4: Remove the last message

constmessages= ["First","Second","Third"];

constlast=messages.pop();

console.log(last);
console.log(messages);

Common mistakes and how to fix them

Mistake 1: Using delete instead of array methods

What you might do:

constarr= [1,2,3];
deletearr[1];

console.log(arr);

Why it breaks:

delete leaves an empty slot instead of reindexing the array.

Correct approach:

arr.splice(1,1);
console.log(arr);

Mistake 2: Forgetting that filter() creates a new array

What you might do:

constnumbers= [1,2,3];
numbers.filter(num =>num!==2);

console.log(numbers);

Why it breaks:

filter() does not modify the original array.

Correct approach:

constupdated=numbers.filter(num =>num!==2);
console.log(updated);

Mistake 3: Removing while looping forward

What you might do:

constnumbers= [1,2,2,3];

for (leti=0;i<numbers.length;i++) {
if (numbers[i]===2) {
numbers.splice(i,1);
  }
}

Why it breaks:

Removing elements shifts indexes, which can skip items.

Correct approach:

Loop backward:

for (leti=numbers.length-1;i>=0;i--) {
if (numbers[i]===2) {
numbers.splice(i,1);
  }
}

Or use filter():

constcleaned=numbers.filter(num =>num!==2);

Troubleshooting

• If an item becomes undefined, check whether you used delete instead of splice().
• If your original array remains unchanged, confirm you assigned the result of filter().
• If items disappear unexpectedly, review your splice() arguments.
• If you get TypeError: arr.pop is not a function, verify the variable is actually an array.

Quick recap

• Use splice() to remove by index and mutate.
• Use filter() to remove by condition without mutating.
• Use pop() or shift() for last or first items.
• Avoid delete for arrays.
• Be careful when removing items inside loops.