4 Different Ways to Effectively Empty an Array in JavaScript

While working with an array in JavaScript, you can add, remove and modify items very easily. You may also need to empty a JavaScript array for various reasons.

There are 4 different ways to remove all elements from arrays in JavaScript:

• Replace the old array with the new empty array.
• Set the length property value of an array to 0.
• Use the splice() method to remove all elements.
• Use the pop() method to empty an array.

Replacing an existing array with a new empty array is the simplest way to empty the array. But it is only possible if you define your array using let keyword. Otherwise, you can set the length property to 0 or use methods like splice() and pop() to empty JavaScript arrays.

In this blog post, we will go through all these 4 techniques to effectively empty an array in JavaScript with examples.

Replacing It with a New Array

One way to empty a JavaScript array is by re-defining it with an empty array. But if you store your previous array in a constant variable, you won't be able to assign it again.

You have to keep it in mind. If you have the intention of replacing your array later, define it using let instead of const keyword.

          let myArray = [1, 2, 3, 4, 5];

myArray = [];    // Replacing with new array

console.log(myArray);
// Output: []
        

I have the myArray variable that holds an array with 5 elements. To remove all items from this array, you simply assign a new empty array [] to the myArray variable.

This will overwrite the original array with the new one that contains no elements. It is a very simple technique but there is a problem.

As this technique creates a new array and discards the old one, it may not be the most memory-efficient method. If the old array is very large, this could lead to performance issues.

Also Read: Remove Duplicates From a JavaScript Array Like a Pro (Easy)

Empty a JavaScript Array Using The length Property

If you don't want to replace the old array with a new one, you can use the length property to empty an array in JavaScript. It doesn't create a new array instead only changes the length of the existing one.

          const myArray = [1, 2, 3, 4, 5];

myArray.length = 0; // Setting length to 0

console.log(myArray);
// Output: []
        

To empty the myArray array, you can set the length property of the array to 0. This will remove all the elements from the array and you are left with an empty array.

Also Read: Best Ways to Check If a Variable is an Array in JavaScript

Remove All Elements from Array Using splice() Method

The splice() method can remove all elements from arrays in JavaScript. When you call this method on an array, it will modify and delete items from the original array.

          const myArray = [1, 2, 3, 4, 5]

myArray.splice(0)

console.log(myArray)
// Output: []
        

When you call the splice() method in the myArray array and pass 0 (starting index) to it as an argument, it will empty this array by removing all items.

You don't need to assign a new array, as this method automatically updates the original array. In this case, it deletes everything from the main myArray array.

Also Read: Conditionally Define or Add Elements to a JavaScript Array

Empty a JavaScript Array Using pop() Method

The pop() method in JavaScript removes the last element from an array. It also modifies the original array and changes the length property value.

As this method only remove one element at a time, you have to loop through the array to delete all the items from an array. We will use the while loop and for loop in our examples.

Using the while loop:

          const myArray = [1, 2, 3, 4, 5]

while (myArray.length) {
    myArray.pop()
}

console.log(myArray)
// Output: []

        

You can loop through the myArray array using the while loop until the length of the array becomes zero. Inside the loop, you call the pop() method on the array to remove the last element.

When it removes all the elements from this array, the length property value will be 0, which will complete the while loop.

Using the for loop:

          const myArray = [1, 2, 3, 4, 5]

const array_length = myArray.length

for (let i = 0; i < array_length; i++) {
    myArray.pop()
}

console.log(myArray)
// Output: []
        

To iterate over an array using for loop, you have to use the array length. It is important to store the length of the myArray array in a variable. Because the length of this array will change as you remove elements from it.

Therefore, it is necessary for you to ensure that you are iterating over all the elements of the myArray array. You will continue this loop until the i is less than array_length.

Inside the loop, every time it will call the pop() method on this array to delete the last element. When the loop completes, you will have an empty array in the myArray variable.

One advantage of using the pop() method to empty an array is that it allows you to remove elements one by one. You can perform other operations on each element before removing it if you want.

Also Read: In-Depth Guide to Shuffle Any Type of JavaScript Array

Conclusion

There are many ways to empty an array in JavaScript. I have shown you 4 different techniques. You can choose any one of them depending on the specific requirements of your application.

If your array is small and you define it using the let keyword, you can replace it with a new empty array. Otherwise, if you need to empty an array quickly, using the splice() method or setting the length property to 0 is an efficient method.

However, if you want to perform some processing on each element before removing it, you can iterate over the array and call the pop() method inside the loop to empty an array in JavaScript.