Whether you are resetting an array’s state or populating it with fresh data, one operation is common: “empty your array.” Wanna run a large web application efficiently, you need to clean up the array and free up space from time to time. It is as important as appending new data to the array and managing it without degrading the performance.

In this write-up, you will learn how to clear an existing array to make room for fresh data. You will gain knowledge of the ins and outs of each method we will discuss, and by the end of this tutorial, you will know which method is helpful for which usecase.

Here are six ways:

Method 1: Assign an empty array

The fastest and most efficient way to empty an array is to assign an empty array to an existing array. This approach is helpful when you want to break your original array because it directly modifies the original array and does not create a new one.

If you do not want to modify the original array, this approach is not for you because it does not create any reference to it.

 

The above image is self-explanatory. However, what happens is that we defined an input array with three elements and assigned an empty array to that input array, and now that array becomes empty. Ensure that all the existing elements will be overridden, and now the array is fresh and available for new entries.

Here’s a program demonstration of what I mean:

let arr = ["rain", "cloud", "air"];
console.log("Before clearing the array");
console.log(arr);

console.log("After clearing the array");
arr = [];
console.log(arr);

Output

Before clearing the array
[ 'rain', 'cloud', 'air' ]

After clearing the array
[]

You can tweak this to create a reference to the original array and then empty it. That way, you will not directly modify the original array.

let arr = ["rain", "cloud", "air"];
console.log("Before clearing the array");
console.log(arr);

console.log("Creating a reference array");
let arr1 = arr;
console.log(arr1);

console.log("After clearing the array");
arr1 = [];
console.log(arr1);

console.log("Logging the original array");
console.log(arr);

Output

Before clearing the array
[ 'rain', 'cloud', 'air' ]

Creating a reference array
[ 'rain', 'cloud', 'air' ]

After clearing the array
[]

Logging the original array
[ 'rain', 'cloud', 'air' ]

Method 2: Setting the length to zero (0)

Another reliable, fast, and effective method is setting the length to 0. Yes, you heard that right. Simply assign the 0 to the array’s length, and it becomes empty.

The way an Array data structure works in JavaScript is that it provides a readable and writable “length” property. Therefore, using an array.length expression, you can either get or set the length.

This approach has one disadvantage is that it modifies the array in-place which means you are directly modifying the original array.

let arr = ["rain", "cloud", "air"];
console.log("Before emptying an array");
console.log(arr);

console.log("After emptying an array");
arr.length = 0;
console.log(arr);

Output

Before emptying an array
[ 'rain', 'cloud', 'air' ]

After emptying an array
[]

Method 3: Array toSpliced()

JavaScript has introduced toSpliced(), a new array method that creates a new empty array without modifying the original. It does not empty an original array; instead, it returns a new empty array.

It is evident from the above image that the arr.toSpliced() method creates a copy of the new array, modifies it by emptying that array, and returns that newly created array.

Here is a program that shows what I have said:

let arr = ["rain", "cloud", "air"];
console.log("Before emptying an array");
console.log(arr);

console.log("After returning a new empty array");
new_arr = arr.toSpliced(0);
console.log(new_arr);

console.log("Logging an original array");
console.log(arr);

Output

Before emptying an array
[ 'rain', 'cloud', 'air' ]

After returning a new empty array
[]

Logging an original array
[ 'rain', 'cloud', 'air' ]

In this program, we used the toSpliced() method to change the content of the array. By passing 0 as an argument, we are saying to remove all the contents of the array, make it empty and return it as new array.

Method 4: Array splice()

Ah, the original splice() method that acted as a base for the toSpliced() method. If the toSpliced() method returns a new array, then you can guess that the splice() method will modify the original array and return that array.

This method is flexible as it will remove any portion of the array, but it becomes verbose if you have an extensive array. It might be slower than setting a length to 0.

let arr = ["rain", "cloud", "air"];
console.log("Before emptying an array");
console.log(arr);

console.log("After emptying an array");
arr.splice(0);
console.log(arr);

Output

Before emptying an array
[ 'rain', 'cloud', 'air' ]

After emptying an array
[]

Method 5: Array fill() and slice()

This is an alternate approach to the toSpliced() method. First, fill the array with 0 using array.fill() and then slice it using array.slice() from index 0 to index 0, resulting in an empty array.

Let me show you through a program what I am talking about:

let arr = ["rain", "cloud", "air"];
console.log("Before emptying an array");
console.log(arr);
console.log("The length of the array is", arr.length)

console.log("After emptying an array");
new_arr = arr.fill(0).slice(0, 0);
console.log(new_arr);
console.log("The length of a new array is", new_arr.length)

Output

Before emptying an array
[ 'rain', 'cloud', 'air' ]
The length of the array is 3

After emptying an array
[]
The length of a new array is 0

From the above output, you can see that it returns a new empty array but does not maintain its length because if an array is empty, its length becomes 0.

The array.fill() method will maintain the length of original array but after that, we used slice() method and that method will reduce the length to 0.

Method 6: Array pop()

Array pop() is the least performant method when you use it to empty an array. The pop() method’s main idea is to remove a single element from the array but when you use to remove mass elements, it will take longer time and less efficient.

Furthermore, at a time, it will remove a single element. Therefore, you need a hand in the form of “for loop” to remove all the elements and make it empty.

let arr = ["rain", "cloud", "air"];
console.log("Before emptying an array");
console.log(arr);
console.log("The length of the array is", arr.length)

console.log("After emptying an array");
while (arr.length > 0) {
    arr.pop();
}
console.log(arr)
console.log("The length of the array is", arr.length)

Output

Before emptying an array
[ 'rain', 'cloud', 'air' ]
The length of the array is 3

After emptying an array
[]
The length of the array is 0

Closing remarks

In summary, there are two schools of thought here:

1. If you want to empty an original array, assign a length to 0, which is the fastest way.
2. If you want to create a reference and return a new array, use the Array.toSpliced() method. It is a built-in and performant way.

The choice depends on whether you need to modify the original array, create a new one, or maintain references. I’m available to answer any questions or provide further clarification if you need it.