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!

joe-biden-folks-do-you-have-any-idea-what-this-clown-is-doing.webp

Index of methods

Removing by index
Removing by value
Other removal methods
- 14) Just remove everything
- 15) Bonus: using filter to create new array with removed items

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);
// [object Array] (8)
// [1,2,3,4,5,6,7,8]

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);
// [object Array] (3)
// [1,2,3]

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);
// [object Array] (2)
// [1,2]

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);
// [object Array] (8)
// [2,3,4,5,6,7,8,9]

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);
// [object Array] (6)
// [4,5,6,7,8,9]

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);
// [object Array] (6)
// [1,5,6,7,8,9]

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);
// [object Array] (6)
// [1,2,6,7,8,9]

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);
// [object Array] (9)
// [,2,3,4,,6,7,8,9]

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);
// [object Array] (6)
// [3,4,5,6,7,8]

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);
// [object Array] (2)
// [{
//    id: 16,
//    first_name: 'Jane',
//    last_name: 'Doe'
// }, {
//    id: 20,
//    first_name: 'Guy',
//    last_name: 'Incognito'
// }]

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);
// [object Array] (1)
// [{
//    id: 20,
//    first_name: 'Guy',
//    last_name: 'Incognito'
// }]

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);
// [object Array] (3)
// [1,2,3]

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);
// [object Array] (6)
// [1,2,3,4,5,9]

Other removal methods

Just remove everything

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.length = 0;
console.log(arr);
// [object Array] (0)
// []

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);
// [object Array] (5)
// ["spray", "limit", "exuberant", "destruction", "present"]

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!

Marcelo Zárate