How do you empty an array in JavaScript? In this article we will look at a few options that we can use and help you decide which one may be the best for you.
Shortening the Length of Array to Zero
Since Array.length
is a read/write property, you can simply discard all elements of an array by shortening its length to 0. For example:
const a = [1, 2, 3, 4, 5]; a.length = 0; // output: []
All browsers support this behavior, and the removed values get garbage collected. It also works when using strict mode (i.e. declaring "use strict"
before any other statements) because the length
property of an array is read/write.
An important thing to note here is that if you have any referenced variables to the original array, then they will appear empty as well because they would point to the same empty array in memory. This behavior is because shortening the length
of an array modifies the contents of it. Consider for example:
const a = [1, 2, 3, 4, 5]; const b = a; a.length = 0; console.log(b); // output: []
The same is true when length = 0
is set on a reference variable:
const a = [1, 2, 3, 4, 5]; const b = a; b.length = 0; console.log(a); // output: []
Is Emptying an Array Using array.length
an Anti-pattern?
This is a much-debated topic, and the short answer is; it is alright to use it this way! Especially because the length
property is writable as per the official specification, and is in fact an intended way to shorten or widen an array. The main concern with this method that people argue about most is that it's not very readable (i.e. looking at the code it's not immediately clear that your intention is to truncate the array). However, the length
property is widely understood and this should not be an issue.
Using Array.splice()
to Remove All Elements of Array
The array splice()
method is actually intended to add, remove or replace the contents of an array. In our case, we could do the following to remove all the elements of an array:
const a = [1, 2, 3, 4, 5]; // method 1 a.splice(0); // method 2 a.splice(0, a.length);
This way of truncating an array is equivalent to setting the length
property of the array to 0 (as discussed earlier).
Similar to shortening the array using the array.length
property, if you have any referenced variables to the original array, then they will appear empty as well because they would point to the same empty array in memory. This behavior is because splice
modifies the actual array. Consider for example:
const a = [1, 2, 3, 4, 5]; const b = a; a.splice(0); console.log(b); // output: []
The same is true when splice
is called on a reference variable:
const a = [1, 2, 3, 4, 5]; const b = a; b.splice(0); console.log(a); // output: []
Assigning the Variable to a New Empty Array
let a = [1, 2, 3, 4, 5]; a = []; // output: []
You can't use this method with variables declared as const
since the value of a constant cannot be changed through reassignment.
Be warey using this method when you have referenced an array from another variable as the original array will remain unchanged. This may lead to unexpected/unwanted side-effects. For example:
let a = [1, 2, 3, 4, 5]; let b = a; a = []; console.log(b); // output: [1, 2, 3, 4, 5];
Despite the issues mentioned above, this method may be useful (and even fast) when you want to quickly clear really large arrays. Make sure that you have no references to it though, otherwise the garbage collection won't actually remove the elements of the array from memory as it would still have a reference.
Using a Loop to Clear the Array
By using the shift()
or pop()
methods inside a loop, we can reduce the array element-by-element till it's empty. For example:
const a = [1, 2, 3, 4, 5]; // method 1: usingshift()
while (a.length) { a.shift(); } // method 2: usingpop()
while (a.length) { a.pop(); } console.log(a); // output: []
To some it might seem like a good idea to shorten the syntax of the code by putting pop
or shift
methods directly inside the conditional part of the loop (for example: while(array.pop());
or while(array.shift());
), but it's best to avoid this! It can have potential side-effects when trying to empty an array in cases where an item in the array is a falsy value.
This method linearly clears the elements of the array and can be very slow for large arrays. One way we could optimize it a bit would be to use pop
and shift
methods together inside the body of the loop. This would reduce the number of iterations required by the loop to clear the array. For example:
while (a.length) { a.shift(); a.pop(); }
Similar to using array.splice(0)
or array.length = 0
to empty an array (as discussed earlier) all variables referencing to the same array will also point to the empty array in memory once the original, or any referencing variables, empty the array.
This post was published (and was last revised ) by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.