How To remove an item from an array In JavaScript? – Definitive Guide?

There are several ways available to remove an item from an array.

You can remove an item from an array in JavaScript using the array.splice(arr.indexOf("removableValue"), 1) method.

In this tutorial, you’ll learn about the different methods to remove an item from an array in JavaScript.

If You’re in Hurry…

You can use the code snippet to remove an item from an array in JavaScript.

    const birds = ["dove", "parrot","peacock", "finch", "owl", "cuckoos"];

    birds.splice(birds.indexOf("parrot"),1);

    console.log(birds);

Output

    ["dove", "peacock", "finch", "owl", "cuckoos"]

If You Want to Understand Details, Read on…

An array is a variable used to store the collection of multiple items and provides members to perform common array operations.

In this tutorial, you will learn about various methods to remove an item from an array in JavaScript.

Using Array Splice()

You can use Array.splice() method to remove/add/replace elements in a specific place of an array. The original array will be modified using array.splice().

Syntax

array.splice(start, deletecount, element1, ....., elementN)

Parameters

start (mandatory)

  • index position at which array changes to happen.
  • if the value specified is greater than the length of the array, then the start the value will be set to the array’s length and will act as an addition function, and no deletion will happen.
  • if the value specified is negative, start will be set to 0.

deletecount (mandatory)

  • the value indicates the number of elements from the array to be removed
  • if deletecount is not specified or the value is greater than the length of the array values, then all the elements from start to length of array will be deleted.
  • if deletecount has to be greater than zero value to delete any item from the array

elements(s) (optional)

  • elements to be added to array Return value
  • the updated array will be returned Code
    const birds = ["dove", "parrot","peacock", "finch", "owl", "cuckoos"];

    birds.splice(birds.indexOf("parrot"),1);

    console.log(birds);

Output

    ["dove", "peacock", "finch", "owl", "cuckoos"]

In the above example, you can see the string indexOf is used to find an array value(“parrot”) and the index position of that value is set as the start position.

deletecount value is set as 1, so one value from start position will be deleted.

Let’s see another example of deleting multiple values from an array by specifying the desired count in place of deletecount.
Code

    const birds = ["dove", "parrot", "peacock", "finch", "owl", "cuckoos"];
    birds.splice(2,2);
    console.log(birds);

Output

    ["dove", "parrot", "owl", "cuckoos"]

Here, start position is set to 2 and `deletecount` is set to 2, so 2 items(“”finch”, “owl””) starting index position 2 is removed from the array.
if you specify any negative value to the start position, the start index will be set to 0.

    birds.splice(-2,2)

The above code will work like the below code.

    birds.splice(0,2)

Using Array filter()

Array.filter() method will create a new array based on the values that satisfy the applied condition.

In other words, array.filter() method will remove items that don’t pass the condition.

Syntax

// Using Arrow function
array.filter((item) => { /* code* / } )

array.filter((item, index) => { /* code */ } )

array.filter((item, index, array) => { /* code */ } )

// Using Callback function
array.filter(callbackFn)

array.filter(callbackFn, thisArg)

// Using Inline callback function
array.filter(function(item) { /* code */ })

array.filter(function(item, index) { /* code */ })

array.filter(function(item, index, array){ /* code */ })

array.filter(function(item, index, array) { /* code */ }, thisArg)

Parameters
item
– the current item being processed in the array
index
– the index position of the current item that is being processed
array
– the array on which the filter applied
callbackFn
– callback function is a predicate to test each item of the array. It evaluates the condition and either keeps on true or removes an item on false from the array.
thisArg_(Optional)_
– value to use as this when executing callbackFn
return value
– a new array will be returned based on the items that satisfy the condition. If no item passes the condition, an empty array will be returned.

Code

    const ageArr = [30, 60, null, 10, 12, "fourteen", 15, 25,33]

    let newPrices = ageArr.filter(isMajor);

    console.log(newPrices);

    //function to check age majority
    function isMajor(age) {
      if (age > 18 && !Number.isNaN(age) )
        return true;
      else
        return false;
    }

Output

    [30, 60, 25, 33]

In the above example, you can see that the filter condition to pick items with numeric values and values greater than 18 is applied to the array.

So a new array is returned with items matching the condition, and other unmatched items of the array are removed.
array.filter() does not mutate the existing array but instead returns a new array.
Lets us see another example with an arrow function used for removing items from an array
Code

    const birds = ["dove", "parrot", "peacock", "finch", "owl", "cuckoos"];

    const filteredBirds = birds.filter(bird => bird.length > 4);

    console.log(filteredBirds);

Output

    ["parrot", "peacock", "finch", "cuckoos"]

Using Array Pop()

Array.pop() is used to remove the last item of an array and returns the removed item. Also, this will change the length of the array.
Syntax

array.pop()

Parameters
– this method does not accept parameters
return value
– removes the last item of an array and returns that value.
– returns undefined if array is empty.
Code

    const birds = ["dove", "parrot", "finch", "owl", "cuckoos"];

    const bird = birds.pop(); 

    console.log(bird); // return the last item that is removed

    console.log(birds);  // returns the array after removing the last item

Output

    "cuckoos"
    ["dove", "parrot", "finch", "owl"]

Let us see another example if array.pop() is applied on an empty array.
Code

    const emptyBird = [];

    console.log(emptyBird.pop());

Output

    undefined

undefined will be returned, if array.pop() is applied on an empty array.

Using Array Shift()

Array.shift() is used to remove the first item of an array and returns the removed item.

Also, this will change the length of the array.
Syntax

    array.shift()

Parameters
– this method does not accept parameters
return value
– removes the first item of an array and return that value.
– returns undefined if array is empty.
Code

    const birds = ["dove", "parrot", "finch", "owl", "cuckoos"];

    const bird = birds.pop(); 

    console.log(bird); // return the first item that is removed

    console.log(birds);  // returns the array after removing the first item

Output

    "cuckoos"
    ["dove", "parrot", "finch", "owl"]

Let us see another example, if array.shift() is applied on an empty array.
Code

    const emptyBird = [];

    console.log(emptyBird.pop());

Output

    undefined

undefined will be returned, if array.shift() is applied on an empty array.

Using Array Slice()

Array.slice() will return a shallow portion of an array into an new array object based on the start and end index position.

array.slice() will not modify the original array.
Syntax

    slice()
    slice(start)
    slice(start, end)

Parameters
start
Index position to start copy
– if negative index is used, offset will be set from the end of the sequence and copy values from the end of the array. slice(-2), it copies the last two values of the array.
– if start is undefined, the index is set to 0
– if start is greater than array length, an empty array returned
end
index position to end copy
– if end is not specified, the slice will copy till the end of the array based on the array.length
– if end is greater than the size of the array, the slice will copy till the end of the array based on the array.length
– if end is specified with negative index, offset is set from the end of the sequence
return value
– returns a new array based on the parameters
Code

    const originalBirds = ["dove", "parrot", "finch", "owl", "cuckoos"];

    const copyBirds = originalBirds.slice(2);

    console.log(originalBirds);

    console.log(copyBirds);

Output

    ["dove", "parrot", "finch", "owl", "cuckoos"]
    ["finch", "owl", "cuckoos"]

Slice with start index 2 will return all the items starting from index 2 to the end of the array.
Let us see an example with a negative index to the array.slice().
Code

    console.log("slice sample with negative end index");

    const copyBirds = originalBirds.slice(2,-1);

    console.log(originalBirds);

    console.log(copyBirds);

Output

    ["dove", "parrot", "finch", "owl", "cuckoos"]
    ["finch", "owl"]

Here, the start index set to 2, so the copy will happen from index 2 and the end index set to -1, so the negative value will set offset to the end of an array and, as a result, one value from the end of an array is copied.

Using Array Length

This simple approach is to remove an item from an array by just specifying a new array length value.
Code

const birds = ["dove", "parrot", "finch", "owl", "cuckoos"];

birds.length = 3;

console.log(birds);

Output

    ["dove", "parrot", "finch"]

If the specified length is within the array’s length, then all the items exceeding the new length will be removed.

Using the “delete” keyword

Delete keyword will remove an item from an array but will not reindex the array and its length. So the value of the deleted position will appear as undefined.
Code

    const birds = ["dove", "parrot", "finch", "owl", "cuckoos"];

    const removed = delete birds[2];

    console.log(birds);

    console.log(removed);

Output

    ["dove", "parrot", undefined, "owl", "cuckoos"]
    true

Using the delete keyword should be avoided as deletion will only remove an item from an array and will not reindex the array length. delete keyword can lead to wrong results on array length.

JSfiddle

This tutorial is available in this JSFiddle.

Conclusion

In this tutorial, you’ve learned how to remove an item from an array in JavaScript. You’ve also known different ways to remove an item from an array.

If you’ve any questions, please comment below.

You May Also Like

Leave a Comment