Basic Javascript: Removing Elements from an Array

I am back again this week to cover another fundamental topic on Javascript. I will be going over various ways to remove elements from an array. Although the topic is simple enough, I often find myself mixing up certain methods and what each of them actually do. By writing this guide, hopefully I will be able to further solidify my knowledge on these methods and help anyone else out who might be in the same situation.

1. shift()

let breads = [wheat, ciabatta, sourdough, brioche]
breads.shift() // returns wheat
console.log(breads) // [ciabatta, sourdough, brioche]

Using the shift method removes the first element in an array. It returns the first element and completely modifies the original array.

2. pop()

let fruits = [apple, banana, kiwi, orange]
fruits.pop() // returns orange
console.log(fruits) // [apple, banana, kiwi]

Using the pop method removes the last element in an array. It returns the last element and completely modifies the original array.

3. splice()

let cars = [Toyota, Ford, Jeep, BMW]
cars.splice(1, 1) // returns [Ford]
console.log(cars) // [Toyota, Jeep, BMW]

The splice method can be used to remove or add elements in an array. The first argument is the index location at which elements are to be removed or added. The second argument is the number of elements to be removed from the array. In the example above, the arguments call for one element at index one to be removed. This method returns a new array with the removed element and modifies the original array.

Using this method, you can remove a range of elements from an array.

let heroes = [Superman, Batman, Spiderman, Ironman, Thor, Hulk, Flash]
heroes.splice(2, 4) // returns [Spiderman, Ironman, Thor, Hulk]
console.log(heroes) // [Superman, Batman, Flash]

4. slice()

let shoes = [Nike, Adidas, Reebok, Jordan, Vans]
shoes.slice(1, 4) // returns [Adidas, Reebok, Jordan]
console.log(shoes) // [Nike, Adidas, Reebok, Jordan, Vans]

The slice method can be used to remove elements from an array without modifying the original array. The first argument specifies the starting index location and the second argument specifies the ending index location(the end is not included). A new array object will be created using the elements within the range of those indexes.

I hope this was helpful to anyone just starting to learn Javascript or to those who needed a refresher on a simple, but important topic. Let me know if there are any other methods that I missed out on. Thanks for reading!

Comments

[Adam Crockett 🌀]

I like setting an arrays length to remove items from the end. Although you could potentially create holes if your not careful.

[miku86]

I like to do it the functional way with filter().

const fruits = ["apple", "banana", "cherry"];

// remove by value (could be multiple occurrences)
const removedBananaByValue = fruits.filter((fruit) => fruit !== "banana");

// remove by index (always at max. one occurrence)
const removedBananaByIndex = fruits.filter((fruit, index) => index !== 1);