Use filter() to remove items by value or condition without changing the original array. Use splice() to remove an item at a known index when you want to change the existing array, or toSpliced() when you need an index-based removal that returns a copy.
Choose the removal method that matches your goal
| Goal | Method | Effect |
|---|---|---|
| Remove every item matching a value or condition | filter() |
Returns a shallow copy; the original array is unchanged. |
| Remove one item at a known index and change the array | splice() |
Mutates the original array and returns the removed items. |
| Remove one item at a known index without changing the array | toSpliced() |
Returns a copy with the selected range removed; runtime and TypeScript library support are required. |
These behaviors are documented by MDN for filter() and MDN for splice() and toSpliced().
As an Amazon Associate I earn from qualifying purchases.
Remove every matching item with filter()
filter() keeps elements whose callback returns a truthy value. To remove a value, return false for the values you want excluded:
const numbers = [1, 2, 3, 2];
const withoutTwos = numbers.filter(number => number !== 2);
// withoutTwos: [1, 3]
// numbers: [1, 2, 3, 2]This removes all occurrences of 2, not just the first one. The result is a new shallow array: its elements are selected from the original, rather than deeply cloned.
#1 Best Overall
For objects, choose a property that identifies the target:
const withoutTarget = users.filter(user => user.id !== targetId);This keeps every user whose ID differs from targetId. If several users share that ID, all of them are excluded.
Remove one matching item by finding its index
When you want to remove only the first matching object and update the existing array, find its index and pass that index to splice():
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Rank #2
- TypeScript implements a superset of syntax for strictly typed development, facilitating deep static analysis and enhanced development environment integration. The compiler translates source into standard script formats, ensuring parity across any runtime.
- TypeScript is ideal for front-end developers, full-stack engineers, and software architects who build large-scale web applications. It serves those looking to improve code excellence, reduce bugs through static checking, and maintain complex projects more.
- Lightweight, Classic fit, Double-needle sleeve and bottom hem
const index = users.findIndex(user => user.id === targetId);
if (index !== -1) {
users.splice(index, 1);
}findIndex() returns -1 when there is no match. Check for that result before calling splice(): negative start positions count from the end of an array, so splice(-1, 1) removes the last item rather than doing nothing. MDN’s Array reference documents array indexes and method behavior.
splice(index, 1) changes users and returns an array containing the removed entry. It does not return the remaining array. Therefore, this is usually wrong if you mean to keep the remaining users:
users = users.splice(index, 1);After that assignment, users refers to the removed entries returned by splice().
Remove by index without mutating the original
Use toSpliced() when you know the index but need a new array:
const nextUsers = users.toSpliced(index, 1);Unlike splice(), toSpliced() leaves users unchanged and returns the array with that range removed. Check that the JavaScript runtime supports this method and that the TypeScript library configuration provides its type declaration; these are separate requirements.
To remove only the first matching entry while preserving the original array, guard the missing case if you want to keep the original reference when there is no match:
const index = users.findIndex(user => user.id === targetId);
const nextUsers = index === -1
? users
: users.toSpliced(index, 1);If toSpliced() is unavailable in your runtime or TypeScript library configuration, you can build a copy with filter():
const nextUsers = users.filter((_, i) => i !== index);For the no-match case, this filter still creates a new array. Use the index check first if preserving the original reference matters.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Use non-mutating methods with readonly arrays
A parameter typed readonly T[] or ReadonlyArray<T> cannot be changed through that reference with mutating methods such as splice(). A function can accept readonly input and return a filtered result:
Best Value
function withoutId<T extends { id: string }>(
items: readonly T[],
targetId: string,
): T[] {
return items.filter(item => item.id !== targetId);
}TypeScript’s documentation on readonly properties and its ReadonlyArray reference describe this restriction. It applies to writes through the typed reference; it does not make the underlying JavaScript array deeply immutable at runtime.
Filter out undefined and account for TypeScript versions
Filtering can also remove values of a particular type. For example, lookups that may return undefined can be narrowed by a suitable filter callback:
const found = ids
.map(id => userMap.get(id))
.filter(user => user !== undefined);TypeScript 5.5 documents inference of type predicates for suitable callbacks, allowing the filtered result to have a narrower element type. Inference depends on the callback and compiler version; for complex conditions or older versions, define an explicit type predicate and ensure that its logic accurately describes the values it keeps. See the TypeScript 5.5 release notes.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
