Free tools Windows power users keep installed
One-click scans. No signup required.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Use filter() to remove elements by value or condition without changing the original array. Use splice() to remove an element at a known index in place. If you need an index-based removal that keeps the original unchanged, use toSpliced() when your runtime and TypeScript library configuration support it.
Choose the removal method that matches your goal
| Goal | Pattern | Effect |
|---|---|---|
| Remove every element matching a value or condition | items.filter(item => item !== target) |
Returns a shallow copy; leaves items unchanged. MDN documents filter(). |
| Remove one element at a known index and change the original | items.splice(index, 1) |
Mutates items and returns the removed elements. MDN documents splice(). |
| Remove one element at a known index while preserving the original | items.toSpliced(index, 1) |
Returns a copy with that range removed; support depends on the runtime and TypeScript library configuration. MDN documents toSpliced(). |
| Remove only the first matching element | Find its index, check it is not -1, then use splice() or a copy-based method |
The guard prevents a missing match from removing the last element, because a negative splice() start counts from the end. MDN explains the method behavior. |
Remove all matching values with filter()
filter() keeps elements for which its callback returns a truthy value. To remove a value, return false for that value. This removes every matching occurrence and creates a shallow array copy; it does not modify the input.
const numbers = [1, 2, 3, 2];
const withoutTwos = numbers.filter(number => number !== 2);
// withoutTwos: [1, 3]
// numbers: [1, 2, 3, 2]For objects, filter by a property that identifies the target rather than comparing separate object references:
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11const withoutTarget = users.filter(user => user.id !== targetId);This removes every user with that ID. If the ID is duplicated and you intend to remove just one user, find the first matching index instead.
#1 Best Overall
Remove one matching item by index
Mutate the existing array with splice()
Use findIndex() to locate the first match. Check for -1 before calling splice(): when no match is found, passing -1 removes the last element.
const index = users.findIndex(user => user.id === targetId);
if (index !== -1) {
users.splice(index, 1);
}splice(index, 1) changes users and returns an array containing the removed element. Do not assign that return value back to the original variable if you want the remaining users: users = users.splice(index, 1) makes users refer to the removed entries instead.
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
Preserve the original with toSpliced()
When available, toSpliced() provides a copy-producing alternative:
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →const index = users.findIndex(user => user.id === targetId);
const nextUsers = index === -1
? users
: users.toSpliced(index, 1);The conditional preserves the original array reference when there is no match. If you call toSpliced() with a valid index, it returns a new array with that element removed; the input remains unchanged.
Use a copy-based alternative when toSpliced() is unavailable
Older JavaScript runtimes or TypeScript library configurations may not provide toSpliced(). To remove one element at a known index without mutation, filter out that position:
const nextUsers = users.filter((_, i) => i !== index);Check how you want a missing match handled before using this pattern. If index is -1, no array position equals it, so filter() keeps every element but still returns a new array. To preserve the original reference when nothing was found, use the conditional form shown above.
Work with readonly arrays
A parameter typed readonly T[] or ReadonlyArray<T> cannot be changed through that reference with mutating array methods. A non-mutating method such as filter() can produce a result from readonly input:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
function withoutId<T extends { id: string }>(
items: readonly T[],
targetId: string,
): T[] {
return items.filter(item => item.id !== targetId);
}TypeScript’s readonly modifier restricts writes through the typed reference; it does not make the underlying JavaScript array deeply immutable at runtime. See the TypeScript Handbook’s ReadonlyArray documentation and its TypeScript 3.4 notes on readonly arrays.
Best Value
Filter out undefined and narrow the result type
For suitable callbacks, TypeScript 5.5 can infer a type predicate from a filter() callback. For example, filtering out missing map results can produce an array whose element type excludes undefined:
const found = ids
.map(id => userMap.get(id))
.filter(user => user !== undefined);This inference depends on the callback being suitable for narrowing and on using a compiler version that supports the behavior. If a more complex callback does not produce the type you intend, define an explicit type predicate and ensure that its condition correctly describes the type it keeps. See the TypeScript 5.5 release notes.
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.
