How to Remove an Array Item in TypeScript

By the end of this page, you will understand how to remove objects from a TypeScript array when you know a key such as id. You will learn the difference between mutating and non-mutating approaches, when to use filter() or splice(), and how this is commonly handled in real codebases.

In TypeScript, arrays do not have a built-in removeByKey() method. To remove an item, you usually:

• find the item’s index and remove it with splice(), or
• create a new array without that item using filter().

This matters because arrays are one of the most common data structures in applications. You often store lists of users, products, tasks, messages, or API results as arrays of objects. Removing an item by a key like id is a very common operation.

There are two important styles:

• Mutable removal: changes the original array
• Immutable removal: returns a new array and leaves the original unchanged

In TypeScript, both approaches are valid. The best choice depends on your situation:

• Use splice() if you want to update the existing array in place.
• Use filter() if you want a cleaner, safer approach that returns a new array.

Because TypeScript adds type checking, it helps ensure that your array items and keys are used correctly. For example, if id is a number, TypeScript can catch mistakes where you compare it to a string.

Think of an array like a row of labeled boxes.

Each box contains an object, and each object has a label such as id.

If you want to remove one box:

• With findIndex() + splice(), you first walk along the row, find the box number, then physically pull that box out.
• With filter(), you build a brand-new row containing only the boxes you want to keep.

So:

• splice() = remove from the existing row
• filter() = create a new row without the unwanted item

Using filter()

filter() is often the simplest way to remove an item by key.

const updatedUsers = users.filter(user => user.id !== 2);

This creates a new array containing every user except the one with id === 2.

Full example

type User = {
  id: number;
  name: string;
};

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

const updatedUsers = users.filter(user => user.id !== );

.(updatedUsers);

Consider this example:

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

const updatedUsers = users.filter(user => user.id !== 2);

Step by step

1. users contains 3 objects.
2. filter() loops through each object one by one.
3. For { id: 1, name: "Alice" }, it checks 1 !== 2.
   • This is true, so Alice stays.
4. For { id: 2, name: "Bob" }, it checks 2 !== 2.
   • This is false, so Bob is removed.
5. For { id: 3, name: "Charlie" }, it checks .

Removing array items by key appears in many real applications:

• Todo apps: remove a task by id
• Shopping carts: remove a product by productId
• Admin dashboards: delete a user from a displayed list
• API data handling: remove an item locally after a successful delete request
• Chat apps: remove a message or conversation from memory
• Data cleanup scripts: exclude records that match a certain key

Example: removing a product from a cart

type CartItem = {
  productId: number;
  name: string;
  quantity: number;
};

const cart: CartItem[] = [
  { productId: 101, name: "Keyboard", quantity: 1 },
  { productId: 102, name: "Mouse", quantity: 2 }
];

const updatedCart = cart.filter(item => item.productId !== );

In real projects, developers often choose the removal pattern based on state management and code clarity.

Immutable updates with filter()

This is common in frontend frameworks like React, where you should usually avoid mutating state directly.

setUsers(currentUsers => currentUsers.filter(user => user.id !== idToRemove));

Why this is common:

• easier to reason about
• safer for state updates
• works well with predictable rendering

Guard clauses with findIndex()

When mutating an array, developers usually protect against missing items.

const index = users.findIndex(user => user.id === idToRemove);
if (index === -1) return;
users.splice(index, 1);

This avoids accidental removal of the wrong item.

Validation before removal

In production code, the key may come from user input or an API.

1. Using delete on an array element

Broken code:

delete users[1];

This does not properly remove the item. It leaves an empty slot in the array.

Avoid it because:

• array length stays the same
• you may get unexpected undefined values

Use splice() or filter() instead.

2. Forgetting that filter() returns a new array

Broken code:

users.filter(user => user.id !== 2);
console.log(users);

This does nothing useful unless you store the result.

Correct:

const updatedUsers = users.filter(user => user.id !== 2);

filter() vs splice()

Use filter() when:

• you want a new array
• you are working with state updates
• readability is more important than in-place modification

Remove by key in TypeScript

Immutable approach

const updated = items.filter(item => item.id !== idToRemove);

• returns a new array
• original array stays unchanged

Mutable approach

const index = items.findIndex(item => item.id === idToRemove);
if (index !== -1) {
  items.splice(index, 1);
}

• changes the original array
• always check for -1

Generic helper

function removeByKey<T, K extends keyof T>(items: T[], key: K, value: T[K]): T[] {
  return items.filter(item => item[key] !== value);
}

Avoid

 items[];

How do I remove an object from an array by id in TypeScript?

Use filter() if you want a new array:

const updated = users.filter(user => user.id !== id);

Use findIndex() and splice() if you want to change the original array.

What is the best way to remove an item from an array in TypeScript?

For most cases, filter() is the best choice because it is simple, readable, and does not mutate the original array.

Can I use delete to remove an array item?

You can, but you usually should not. It leaves an empty slot instead of shifting the remaining items.

What happens if findIndex() does not find a match?

It returns -1. You should always check for that before calling splice().

Does filter() modify the original array?

No. It returns a new array.

Should I use splice() or in React?

• Arrays — removing items only makes sense if you understand how arrays store ordered data.
• Objects in TypeScript — array items are often objects with keys like id.
• filter() — a core array method for keeping only matching items.
• findIndex() — useful when you need the position of an item before removing it.
• splice() — removes or inserts items by index and mutates the array.
• Immutability — important when working with state and predictable updates.
• Type annotations — help ensure keys like id have the expected type.
• Generic functions — useful for building reusable helpers like removeByKey().