How to Remove Item From Array In JavaScript

JavaScript developers frequently use arrays to store data. They are very easy to use and offer tons of features. Often, while working with JS arrays, developers need to remove one or more items from the array. There are plenty of different ways to do this using plain JavaScript, without using any third-party library. In this article, we will learn how to remove item from array in JavaScript.

How to Remove Item From Array In JavaScript

Here are some of the common ways to remove one or more items from JavaScript array. Most of these solutions involve calling a function that is already supported by the array. Let us say you have the following array.

var num = [1, 2, 3, 4, 5]

1. Using pop()

The pop() function removes and returns the last item of a JavaScript array, every time it is called. Let us say you call it on the above mentioned num array.

var num = [1, 2, 3, 4, 5];

console.log(num.pop());
console.log(num); 

console.log(num.pop());
console.log(num);

Here is the output you will see.

5
[ 1, 2, 3, 4 ]
4
[ 1, 2, 3 ]

In the above code, when we first call pop() function it returns the last item 5. This modifies the original array and reduces its length by 1. When we call it again, it returns the current last item 4 and reduces the array length by 1 once again.

pop() function works well on all kinds of arrays not just numbers, strings or mixed data types.

Please note, if you call pop() function on an empty array, it will return ‘undefined’ value.

2. Using shift()

On the other hand, shift() function will remove and return the first item in JavaScript array. It works similar to pop() function, except that it returns the first item instead of last item, every time you call it on an array.

var num = [1, 2, 3, 4, 5];

console.log(num.shift());
console.log(num);

console.log(num.shift());
console.log(num);

Here is its output.

1
[ 2, 3, 4, 5 ]
2
[ 3, 4, 5 ]

In the above code, when we call shift() function, it returns the first item 1 and reduces array length by 1. When we call it again, it once again returns the present first item 2 and reduces the array length by 1.

Like pop() function, if you call shift() function on empty arrays, it will return undefined value. It works on all kinds of array items, whether they are numbers, strings, or complex data types.

3. Using delete operator

Delete operator allows you to remove the value of an item using its index. It returns true if the item is successfully removed and returns false if it is not removed. Also, the value of item is set to undefined. Here is its syntax.

delete array_name[index]

Here is an example to delete item with index=2.

var num = [1, 2, 3, 4, 5];

console.log(delete num[2]);
console.log(num);

console.log(delete num[7]);
console.log(num);

Here is the output you will see.

true
[1, 2, undefined, 4, 5]

true
[1, 2, undefined, 4, 5]

In the above code, we first call delete operator to remove item with index=2. We receive true as its output and see that the original array has been modified.

Please note, then we call it again with an index=6 that is outside the array bounds. Still we get true but not false or any error.

Also, it only removes the value of the item but not the item itself. So the length of array remains unchanged. The value of removed item becomes undefined.

4. Using splice()

Splice function allows you to easily remove/add items in a JavaScript array. Here is the syntax for item removal.

array_name.splice(starting_index, num_of_items);

Here is an example to remove 2 items from num array starting from index=1.

var num = [1, 2, 3, 4, 5];

console.log(num.splice(1,2));
console.log(num);

Here is the output.

[ 2, 3 ]
[ 1, 4, 5 ]

In the above example, we first call splice() function which returns an array of 2 items starting from index=1. We also see that the original array has been modified.

splice() is one of the most useful functions for manipulating arrays. It can also be used with other functions and loops to deal with some powerful use cases.

5. Using slice()

slice() is another useful function that allows you to easily extract items from an array, but it does not remove those items from original array. Here is its syntax.

array_name.slice(start_index, end_index)

slice() function returns items starting from the start_index up to end_index excluding the item with end_index.

var num = [1, 2, 3, 4, 5];
console.log(num.slice(1,3));
console.log(num);

In the above code, we call slice() function to extract items starting with index=1 up to index=3 excluding the item with index=3.

Here is the output you get.

[ 2, 3 ]
[ 1, 2, 3, 4, 5 ]

6. Using filter()

filter() function allows you to issue a set of commands, conditions or function for all the items of an array, and get an array of items that result in true values. It is typically used to extract a sub-array from a given array, using a set of conditions. It can also be used to remove items from an array. Here is an example to illustrate it.

var num = [1, 2, 3, 4, 5];

function extract(val){
    return val>= 2 && val < 5;
}

console.log(num.filter(extract));
console.log(num);

In the above code, we define a function extract() that returns true if it is >=2 and <5 else false. We call this function in filter() of num array. So it is called for all items of the array. Here is the output you get.

[ 2, 3, 4 ]
[ 1, 2, 3, 4, 5 ]

We strongly recommend that you read up about filter() function since it is extremely versatile and helpful.

7. Using for loop

This is the good old fashioned method of simply looping through the original array, checking each item for one or more conditions and removing those items that fulfill the condition. Here is an example.

var num = [1, 2, 3, 4, 5];
var new_num=[];
for(i =0;i<num.length;i++){
    if(i==3){
        new_num.push(num[i]);
    }
}

console.log(num);
console.log(new_num);

Here is the output you see.

[ 1, 2, 3, 4, 5 ]
[ 4 ]

The above method does not alter the original array, but it offers tremendous control over the items you want to extract. This can be difficult to do using other methods but for loop makes things easy. For example, you can choose to remove alternate items (index=0,2,4) as shown below.

for(i =0;i<num.length;i++){
    if([0, 2, 4].includes(i)){
        new_num.push(num[i]);
    }
}

console.log(num);
console.log(new_num);

Here is the output you will see.

[ 1, 2, 3, 4, 5 ]
[ 1, 3, 5 ]

This method is similar to using filter() function but it is similar to understand and works well for small-medium arrays. For large arrays, use filter().

8. Using Spread Operator

Another off-beat way to remove array items is to use the spread operator along with splice() function. Spread operator is used to merge two or more arrays and JS objects. Here is its syntax.

new_array = (...arr1, ...arr2, ...arr3);

So we can use use splice() function to extract the sub arrays other the items to be removed and merge them back using the spread operator. Here is an example to remove item 3 from num array.

var num = [1, 2, 3, 4, 5];

var sub1 = num.splice(0,2);
var sub2 = num.splice(1,2);

console.log(sub1);
console.log(sub2);

console.log([...sub1,...sub2]);

In the above example, we first call splice() function on array to extract starting 2 elements to create sub array sub1. This will modify the original array. We call splice() again on modified array to remove the last 2 items to create sub array sub2.

Lastly, we use spread operator to merge both sub arrays sub1 and sub2.

This example is mainly meant for demonstration of spread operator. Obviously, there are more efficient methods mentioned above.

Conclusion

In this article, we have learnt several simple ways to remove items from array in JavaScript. Each of them has specific use cases so you can pick any of them as per your requirement. Among them, splice() and filter() functions are super powerful that can help you extract items from between the array. splice() allows you to remove items using their index. filter() allows you to extract items using conditions.

None of the above methods require any third-party library and work with plain JavaScript. They are fast and work well with large arrays also. If you use a JS library, then you may also try any of its methods to remove items from JavaScript.

Also read:

How to Set Checked for Checkbox in jQuery
How to Include JavaScript File in Another JavaScript File
How to Clone JavaScript Object