Explain Codes LogoExplain Codes Logo

How to remove element from an array in JavaScript?

javascript
array-manipulation
javascript-methods
performance-optimization
Nikita BarsukovbyNikita Barsukov·Sep 13, 2024
TLDR

Here's the quick code to remove an element from a JavaScript array using splice(index, 1):

let array = [1, 2, 3, 4, 5]; array.splice(2, 1); // Wave goodbye to the 3rd element (3) console.log(array); // Output: [1, 2, 4, 5] Awaited surprise!

And if you want to remove an element but keep the original array untouched, use slice() and the spread operator:

let newArray = [...array.slice(0, 2), ...array.slice(3)]; console.log(newArray); // Output: [1, 2, 4, 5] Magic, isn't it?

The toolbox: Alternative methods and efficiency

Is the shift() method the one for me?

When you just need to remove the first element from an array, then shift() is your guy:

let firstElement = array.shift(); // The first one bites the dust! console.log(array); // Output: [2, 3, 4, 5] console.log(firstElement); // Output: 1 Found and dunked!

Don't forget, shift() not only alters the original array, but also returns the removed element. Which is a pretty neat party trick!

Don't touch the original: The wonders of slice()

Preserve the original array by creating a new array using slice(). Consider it digital art preservation:

let withoutFirst = array.slice(1); console.log(withoutFirst); // Output: [2, 3, 4, 5] Whoa, where'd the first one go? console.log(array); // Oh, here it is! Our original array remains unchanged.

Slice is your pal when maintaining the integrity of your original masterpiece array.

Large arrays: Don't get buried in efficiency

Working with large arrays? Well, pull up your socks, we're about to discuss performance. Direct manipulation with splice() or shift() might slow you down due to re-indexing. In such cases, filter() or non-destructive slice() can come to your rescue:

let newArray = array.filter(item => item !== "Huge"); // Removes all "Huge" without touching original array

Power tools: Choose the right method for the job

Conditional removal: Filter does the trick

Got a condition to meet to decide what stays and what goes? filter() is your secret weapon:

let filteredArray = array.filter(item => item !== "Not today, please"); // Not today, please, not today! console.log(filteredArray); // Output: Array with a polite rejection of the specified value.

This method comes in handy when you'd rather remove elements conditionally instead of precise indexing.

Multitasking: Splice hard, splice smart

Need to get rid of more than one element? splice() has you covered:

array.splice(startIndex, deleteCount); // Bulk operation, for when one isn't enough!

This method isn't just versatile, it also gives you superpowers for multiple removals.

Beyond removal: All-round array manipulation

Remember, array manipulation isn't all about removal. Combining arrays with concat(), sorting, searching, and iterating. All in a day's work for our array manipulation crew. Know your tools and you'll be reshaping arrays like a pro in no time.