How to remove an item from an array JavaScript

• Remove the first element from the array in JavaScript
• Remove the last element from the array in JavaScript
• Remove element from the array by its index
• Remove element from the array by value
• Other methods
• Create a helper to remove element from the array by condition
• How does an array work in JavaScript?

Whenever you work with JavaScript, you are likely to run into arrays at some point. Arrays are a fundamental data structure in many programming languages, and JavaScript is no exception.

An array is a collection of values that can be of different data types such as integers, strings, and objects. Removing elements from an array is a common operation in programming, and there are several ways to do this in JavaScript.

In this article, we will explore different ways of removing elements from an array in JavaScript.

#Remove the first element from the array in JavaScript

If you need to remove the first element, use Array.shift(). This method not only removes the element but also returns it.

let a = [0, 1, 2, 3, 4, 6, 7, 8]
const firstElement = a.shift()
console.log(firstElement) // 0
console.log(a) // [1, 2, 3, 4, 6, 7, 8]

#Remove the last element from the array in JavaScript

If you need to remove the last element you can use Array.pop() method. This method not only removes the element but also returns it.

const lastElement = a.pop()
console.log(lastElement) // 8
console.log(a) // [1, 2, 3, 4, 5, 6, 7]

Another way to delete the last element(s) id to set the length of the array, that will remove the other elements with indexes more than length.

a.length(4)
console.log(a) // [1, 2, 3, 4]

#Remove element from the array by its index

If you know the index of the element you want to remove, you can use Array.splice(start, ?deleteCount) method. The first argument is the start index, the second one is how many elements you want to remove.

const mySlice = a.slice(0,1)
console.log(mySlice) // [1]
console.log(a) // [2, 3, 4]

#Remove element from the array by value

In case you need to find the element with specific value you can use Array.splice(start, ?deleteCount) method. First you have to find the element index. We can use simple "for loop":

let array = [0, 1, 2, 3, 4, 6, 7, 8]

for(let index = 0; index < array.length; index++){
    if ( array[index] === 7) {
        array.splice(index, 1)
        index-- // make sure you don't forget this
    }
}
console.log(array) //[0, 1, 2, 3, 4, 6, 8]

Another option is to use Array.filter() method, but with this approach a new array will be created:

const array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
const filteredArray = array.filter((value, index, arr)=>{
    return value > 6
});
console.log(filteredArray) [7, 8, 9]
console.log(array) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

#Other methods

Other methods will be just a fancy ways of doing the same things I described above. You also can use utility libraries, like Lodash (using _.remove) or Underscore (using .findWhere with .without)

#Create a helper to remove element from the array by condition

You also can hide the implementation in your own helper:

// This function will modify existing array
function removeItemFromArray(array, condition){
    for(let index = 0; index < array.length; index++){
        if ( condition(index, array[index])) {
            array.splice(index, 1)
            index-- // make sure you don't forget this
        }
    }
    return array // optional
}

const array = [
    {name: 'John Dow'},
    {name: 'Alice Dow'},
    {name: 'Mr Beast'},
]

const filteredArray = removeItemFromArray(array, (index, value)=> value.name === 'Mr Beast')
console.log(filteredArray) // [{name: 'John Dow'}, {name: 'Alice Dow'}]

#How does an array work in JavaScript?

Before diving into the methods of removing elements from an array, it is essential to understand how JavaScript arrays work. An array is a built-in data-type in JavaScript that can store multiple values in a single variable. JavaScript arrays are dynamic, which means you can add or remove elements from an array at any time. Each element in an array has an index, starting from 0 for the first element.

Removing an element from an array in Javascript can be done in multiple ways, depending on your specific needs.

The splice method is useful when you want to remove a specific element by its index, the filter method is great for removing multiple elements that match a certain condition, the pop and shift methods are ideal for removing the first or last element of an array, and the unshift method can be used to remove the first element by creating a new array.

By understanding and utilizing these methods, you can manipulate your Javascript arrays with greater ease and precision.

Related video