# 15 ways to remove elements from an array

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!**

<center>
![joe-biden-folks-do-you-have-any-idea-what-this-clown-is-doing.webp](https://cdn.hashnode.com/res/hashnode/image/upload/v1635507338176/AR0IpcVid.webp)
</center>

# Index of methods

- [Removing by index](#removing-by-index)
    - [Removing from the end](#removing-from-the-end)
        - [1) With arr.pop()](#with-arrpop)
        - [2) Changing length](#changing-length)
        - [3) With splice](#with-splice)
    - [Removing from the beginning](#removing-from-the-beginning)
        - [4) Using shift](#using-shift)
        - [5) Using splice](#using-splice)
    - [Removing from anywhere](#removing-from-anywhere)
        - [6) Splicing](#splicing)
        - [7) Custom DIY solution](#custom-diy-solution)
        - [8) Using delete](#using-delete)
        - [9) Using lodash](#using-lodash)
- [Removing by value](#removing-by-value)
    - [10) With findIndex and splice](#with-findindex-and-splice)
    - [11) The good ol' working way](the-good-ol-working-way)
    - [12) Using lodash to remove by predicate](#using-lodash-to-remove-by-predicate)
    - [13) Using lodash to remove by value](#using-lodash-to-remove-by-value)
- [Other removal methods](#other-removal-methods)
    - [14) Just remove everything](#just-remove-everything)
    - [15) Bonus: using filter to create new array with removed items](#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.

```javascript
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.

```javascript
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

```javascript
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

```javascript
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

```javascript
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

```javascript
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'

```javascript
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.*

```javascript
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](https://lodash.com/) in order to use this

```javascript
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

```javascript
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
```javascript
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
```javascript
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
```javascript
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

```javascript
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
```javascript
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"]
```

%%[three-dots-separator]

# 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!

%%[ctafollow]