Good day fellow reader, today I will show you fifteen different ways to remove elements from a javascript array. Feel free to suggest more if you please!
Introduction
Removing elements from an array might sound like a trivial task in many languages. However, in Javascript, there are multiple ways to achieve this desired result, depending on knowing the index of the item, or just knowing its value. Some options are more performant than others, some are easier to read, be sure to check them all out and use what best suits your needs.
You can remove an element or elements group of an array using:
- length change: chop the end of the array.
- shift: removes an element from the start of the array.
- splice: removes elements from a specific array index.
- pop: removes an element from the end of the array.
- custom code: writing custom lines/functions to achieve the removal.
- libraries: using javascript libraries to remove items.
- filter: filter elements by value and return the desired ones.
Note: Filter will be kind of an exception here because every option presented mutates the original array. And filter does not. Still, it is advisable to use it if you don't need the original reference to the array.
Let's get there folks! We'll see 15 ways to remove items from an array!
Index of methods
Remember, all the methods presented mutate the original array. If you are interested in keeping the removed elements, look for the options that set the "removed" variable
Removing by index
Removing from the end
With arr.pop()
This will just remove the last element. Simple, powerful, universal.
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let removed = arr.pop();
console.log(arr);
Changing length
You can truncate an array setting its length. Be warned, if you set it to a greater value than the current one, last element will be a non-iterable empty slot.
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.length = 3;
console.log(arr);
With splice
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let howmany = 7;
let removed = [];
if (howmany <= arr.length) {
removed = arr.splice(arr.length - howmany, howmany);
} else {
removed = arr.splice(0, arr.length);
}
console.log(arr);
Removing from the beginning
Using shift
Removing only one element
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let removed = arr.shift();
console.log(arr);
Using splice
Removing multiple elements
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let howmany = 3;
let removed = arr.splice(0, howmany);
console.log(arr);
Removing from anywhere
Splicing
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let from = 1;
let to = 3;
let removed = arr.splice(from, to);
console.log(arr);
Custom DIY solution
This ones assumes 'from' <= 'to'
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let from = 2;
let to = 5;
for (let i = from; i < arr.length - (to - from); i++) {
arr[i] = arr[i + (to - from)];
}
arr.length = arr.length - (to - from);
console.log(arr);
Using delete
Note: This one will leave undefined or empty spaces in the corresponding positions, the array size will not be changed.
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
delete arr[0];
delete arr[4];
console.log(arr);
Using lodash
You need to install lodash in order to use this
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let removed = _.pullAt(arr, [0, 1, 8]);
console.log(arr);
Removing by value
With findIndex and splice
let people = [{
id: 15,
first_name: 'John',
last_name: 'Doe'
}, {
id: 16,
first_name: 'Jane',
last_name: 'Doe'
}, {
id: 20,
first_name: 'Guy',
last_name: 'Incognito'
}];
let indexToRemove = people.findIndex(elem => elem.first_name === 'John');
if (indexToRemove !== -1) {
people.splice(indexToRemove, 1);
}
console.log(people);
The good ol' working way
let people = [{
id: 15,
first_name: 'John',
last_name: 'Doe'
}, {
id: 16,
first_name: 'Jane',
last_name: 'Doe'
}, {
id: 20,
first_name: 'Guy',
last_name: 'Incognito'
}];
for (let i = people.length - 1; i >= 0; i--) {
if (people[i].last_name === 'Doe') {
people.splice(i, 1);
}
}
console.log(people);
Using lodash to remove by predicate
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let removed = _.remove(arr, (item) => item > 3);
console.log(arr);
Using lodash to remove by value
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let removed = _.pull(arr, 6, 7, 8);
console.log(arr);
Other removal methods
Just remove everything
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.length = 0;
console.log(arr);
Bonus: using filter to create new array with removed items
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const newArr = words.filter(word => word != 'elite');
console.log(newArr);
Final thoughts
Phew! This article took more time than I estimated. Remember to use whatever fits your needs. Hope you find it useful!
See you around!
