How to Empty Array in JavaScript

Web developers often use arrays to store different kinds of data in a compact manner. Arrays are easy to use and support many built in functions to perform various tasks. Sometimes, web developers need to empty an array or remove all its items, at one go. There are several ways to do this. Some of them are fast while some are slow. In this article, we will learn how to empty array in JavaScript.

How to Empty Array in JavaScript

Here are the different ways to empty array in JavaScript.

1. By Assigning Empty Array

In this approach, we simply reset the array variable to a new empty array. This will completely remove all items from the array and re-assign it a new empty array. Here is an example.

var a = [1, 2, 3];
a=[];
console.log(a); // output is []

This is perhaps one of the fastest ways to empty an array, and great for even large arrays with many items.

Please note, the above method works if the original array is not referenced elsewhere. If it is referenced from another property or variable, then the original array will remain unchanged. Here is an example to demonstrate it.

var a = [1, 2, 3];
var b = a;  // reference a from another variable 
a = [];
console.log(b); // output [1, 2, 3]
console.log(a); // output is []

You will notice that the original array has become empty while the referencing array still refers to the old array items.

2. By Resetting its Length

Another way to empty an array is to set its length to 0. This works because the length property of a JS array is readable as well as writable.

var a = [1, 2, 3];
a.length = 0;
console.log(a); // output is []

3. Using Splice() function

JavaScript splice() function adds/removes elements from JS array. Here is its syntax.

array.splice(index, count, item1, ..., itemn)

In the above function, only the index argument is required. Rest of the arguments are optional. So it can also be used to empty an array. Just specify the index as 0, and do not mention other arguments.

var a = [1, 2, 3];
a.splice(0);
console.log(a); // output is []

Let us look at how the above mentioned splice() function works. Since we have specified index=0, it will start removing items from the first element. Since we have not specified any other argument, it will remove all items one by one.

4. Using pop() function

Every JS array supports pop() function, that removes last item of the array, every time it is called. It can be used to empty by array by removing its items one by one. Here is an example.

var a = [1, 2, 3];
while( a.length > 0){
    a.pop()
}
console.log(a); // output is []

In the above code, we loop through the array, and in each iteration, we call pop() function, which removes the last item of the array. The loop continues as long as there is at least one item left. Although it is slow, it allows you to carefully examine and remove items one by one.

Conclusion

In this article, we have learnt several ways to empty a JavaScript array. You can use any of them as per your requirement. The first couple of methods are the fastest and work great even for large arrays. The last method is the slowest, but it allows you to selectively remove items, which is not possible with other methods.

Also read:

How to Merge Two JavaScript Objects
How to Check if Key Exists in JS Object
How to Insert Item in JS Array At Specific Index