How do I empty an array in JavaScript?

Asked 2023-09-20 20:54:33 View 697,309

Is there a way to empty an array and if so possibly with .remove()?

For instance,

A = [1,2,3,4];

How can I empty that?

Answers

Ways to clear an existing array A:

Method 1

(this was my original answer to the question)

A = [];

This code will set the variable A to a new empty array. This is perfect if you don't have references to the original array A anywhere else because this actually creates a brand new (empty) array. You should be careful with this method because if you have referenced this array from another variable or property, the original array will remain unchanged. Only use this if you only reference the array by its original variable A.

This is also the fastest solution.

This code sample shows the issue you can encounter when using this method:

var arr1 = ['a','b','c','d','e','f'];
var arr2 = arr1;  // Reference arr1 by another variable 
arr1 = [];
console.log(arr2); // Output ['a','b','c','d','e','f']

Method 2 (as suggested by Matthew Crumley)

A.length = 0

This will clear the existing array by setting its length to 0. It also works when using "strict mode" in ECMAScript 5 because the length property of an array is a read/write property.

Method 3 (as suggested by Anthony)

A.splice(0,A.length)

Using .splice() will work perfectly, but since the .splice() function will return an array with all the removed items, it will actually return a copy of the original array. Benchmarks suggest that this has no effect on performance whatsoever.

Method 4 (as suggested by tanguy_k)

while(A.length > 0) {
    A.pop();
}

This solution is not very succinct, and it is also the slowest solution, contrary to earlier benchmarks referenced in the original answer.

Performance

Of all the methods of clearing an existing array, methods 2 and 3 are very similar in performance and are a lot faster than method 4. See this benchmark.

As pointed out by Diadistis in their answer below, the original benchmarks that were used to determine the performance of the four methods described above were flawed. The original benchmark reused the cleared array so the second iteration was clearing an array that was already empty.

The following benchmark fixes this flaw: http://jsben.ch/#/hyj65. It clearly shows that methods #2 (length property) and #3 (splice) are the fastest (not counting method #1 which doesn't change the original array).


This has been a hot topic and the cause of a lot of controversy. There are actually many correct answers and because this answer has been marked as the accepted answer for a very long time, I will include all of the methods here.

Answered   2023-09-20 20:54:33

  • while (A.length) { A.pop(); }, no need for > 0 - anyone
  • > 0 is more readable IMHO. And there's no performance difference between the two. - anyone
  • @daghan, it's not at all clear what you're trying to say. b holds a reference to the old array even after a is assigned a new one. c and d continue to reference the same array. The difference in outputs is therefore expected. - anyone
  • @DiegoJancic Method #1 doesn't count because it doesn't clear the array. It creates a new one. It shouldn't be included in a benchmark. - anyone
  • You can't use while(A.pop()) in case an item in the array is falsey. Take for example A = [2, 1, 0, -1, -2] would result in A equaling [2, 1]. Even while(A.pop() !== undefined) doesn't work because you can have an array with undefined as one of the values. Probably why the compiler doesn't optimized it. - anyone

If you need to keep the original array because you have other references to it that should be updated too, you can clear it without creating a new array by setting its length to zero:

A.length = 0;

Answered   2023-09-20 20:54:33

  • what does ECMAScript 5 Standard says about this? - anyone
  • @Pacerier: It still works in ES5. From section 15.4: "...whenever the length property is changed, every property whose name is an array index whose value is not smaller than the new length is automatically deleted" - anyone
  • @LosManos Even in strict mode, length is a special property, but not read only, so it will still work. - anyone
  • @MattewCrumley I done some test, and it seems like a.length = 0 is not to efficient clearing whole array. jsperf.com/length-equal-0-or-new-array I think if you have one refence (and you haven't added extra properties that you want to keep), it is better to create new array, and leaves old to the garbage collector, that will run when appropriate. - anyone
  • @jollarvia Deleting the elements above the new length is required by the ECMAScript spec, so any correct implementation will make any inaccessible elements garbage collectible. That doesn't necessarily mean they will shrink the storage for the actual array immediately. Specifically, V8 only re-allocates the array if the new length is less than half of the original length, but setting the length to zero essentially re-allocates a new array behind the scenes. - anyone

Here the fastest working implementation while keeping the same array ("mutable"):

function clearArray(array) {
  while (array.length > 0) {
    array.pop();
  }
}

FYI it cannot be simplified to while (array.pop()): the tests will fail.

FYI Map and Set define clear(), it would have seem logical to have clear() for Array too.

TypeScript version:

function clearArray<T>(array: T[]) {
  while (array.length > 0) {
    array.pop();
  }
}

The corresponding tests:

describe('clearArray()', () => {
  test('clear regular array', () => {
    const array = [1, 2, 3, 4, 5];
    clearArray(array);
    expect(array.length).toEqual(0);
    expect(array[0]).toEqual(undefined);
    expect(array[4]).toEqual(undefined);
  });

  test('clear array that contains undefined and null', () => {
    const array = [1, undefined, 3, null, 5];
    clearArray(array);
    expect(array.length).toEqual(0);
    expect(array[0]).toEqual(undefined);
    expect(array[4]).toEqual(undefined);
  });
});

Here the updated jsPerf: http://jsperf.com/array-destroy/32 http://jsperf.com/array-destroy/152

jsPerf offline. Similar benchmark: https://jsben.ch/hyj65

Answered   2023-09-20 20:54:33

  • TT your answer is the only one that correct and fast ( at the same time ) but have some much less "upvotes". Well, it seems that people like pretty solutions that are slow :/ - anyone
  • @naomik But this is one of the basic functionalities, which should have been there by default. - anyone
  • @thefourtheye Good solution for performance, though I agree with @naomik, you should not modify native objects. Saying that it should be there is beside the point, the problem is you're modifying globals, which is bad. If you're providing your code for others to use, then it should have no unforeseen side effects. Imagine if another library also modified the Array.prototype and it was doing something slightly different, then all throughout your code [].clear() was slightly wrong. This would not be fun to debug. So, the general message is: Don't modify globals. - anyone
  • @thefourtheye The whole point of not modifying global scope is because you won't know if someone else's code is already (or will be) using the name. I suggest a function inside local scope. So, inside your application's/library's IIFE, do function clear(arr) { while(arr.length) arr.pop(); }, then clear arrays with clear(arr) instead of arr.clear(). - anyone
  • It turns out this method is a lot slower than .splice() and .length=0. The benchmarks were not correct. See my updated answer. - anyone

A more cross-browser friendly and more optimal solution will be to use the splice method to empty the content of the array A as below:

A.splice(0, A.length);

Answered   2023-09-20 20:54:33

  • Why is this more cross-browser friendly? What browsers have issues with A.length? - anyone
  • @jm2 what you are saying is not entirely true. It actually modifies the array in question and subsequently all references get affected. See the test on my jsFiddle: jsfiddle.net/shamasis/dG4PH - anyone
  • @alex no it does not, splice modifies the array and returns the deleted entries. Read the docs first: developer.mozilla.org/en-US/docs/JavaScript/Reference/… - anyone
  • We could prevent the resulting array from being returned by using the comma operator: A.splice(0, A.length),0;. This would leave a return value of 0 just as A.length = 0; would. The resulting array is still created and should cause the script to run slower: (jsperf ~56% slower). Browser implementation will affect this although I see no reason why splice would be faster than setting length. - anyone
  • I have also found that just A.splice(0) also works. - anyone

The answers that have no less that 2739 upvotes by now are misleading and incorrect.

The question is: "How do you empty your existing array?" E.g. for A = [1,2,3,4].

  1. Saying "A = [] is the answer" is ignorant and absolutely incorrect. [] == [] is false.

    This is because these two arrays are two separate, individual objects, with their own two identities, taking up their own space in the digital world, each on its own.


Let's say your mother asks you to empty the trash can.

  • You don't bring in a new one as if you've done what you've been asked for.
  • Instead, you empty the trash can.
  • You don't replace the filled one with a new empty can, and you don't take the label "A" from the filled can and stick it to the new one as in A = [1,2,3,4]; A = [];

Emptying an array object is the easiest thing ever:

A.length = 0;

This way, the can under "A" is not only empty, but also as clean as new!


  1. Furthermore, you are not required to remove the trash by hand until the can is empty! You were asked to empty the existing one, completely, in one turn, not to pick up the trash until the can gets empty, as in:

    while(A.length > 0) {
        A.pop();
    }
    
  2. Nor, to put your left hand at the bottom of the trash, holding it with your right at the top to be able to pull its content out as in:

    A.splice(0, A.length);
    

No, you were asked to empty it:

A.length = 0;

This is the only code that correctly empties the contents of a given JavaScript array.

Answered   2023-09-20 20:54:33

  • The only problem with your suggested solution is that the trash still exists, it is just that you changed the notice board saying that there is no trash. A reference to the old array should still exist. Can you be sure the garbage collector when setting .length = 0, will also remove all references to the array and its properties ? I think it does though, but to me that is magic. A .clear() method is desirable to avoid confusion to say the least. - anyone
  • No sun, that's not true at all. You might wish to test things and understand them deep enough before trying to object something as rock solid as this core JavaScript functionality basics. And it's not "my solution" it's the basic JS syntax since forever. Dubious as it may be A.length = 0; is the standard syntax to empty your array. If you wish to have a method such as A.clear, you can use this standard syntax to add that method to your arrays easily: Array.prototype.clear = function(){this.length = 0}. Have fun. - anyone
  • I never stated that this solution is wrong. The problem is that this entire thread is completely unncessary. Over 3000 votes shows that trying to figure out what the best way is should make it a valid enough case for the EMCA crack head developers to add such a method. Nobody should have to go through figuring it out. There are three - four different ways to do it. In some benchmarks, the length solutions is much slower than others. Furthermore, the idea of setting .length = 0, for any reasonable developer would not be a satisfactory one. - anyone
  • Therefore, I'd rather clear it myself. A clear method can be prototyped but that is just ugly. My point is that this implementation should already be present so that over 10 000 developers didn't have to spend hours reading just this thread, not considering all others who spent more time benchmarking. - anyone
  • I loved the metaphors with the real world in this answer. Impressive! - anyone

Performance test:

http://jsperf.com/array-clear-methods/3

a = []; // 37% slower
a.length = 0; // 89% slower
a.splice(0, a.length)  // 97% slower
while (a.length > 0) {
    a.pop();
} // Fastest

Answered   2023-09-20 20:54:33

  • Adding the percentage changes arent much use without also noting your platform. On my machine pop is only very mildly quicker in Chrome 34 but actually slower than [] in latest Firefox. - anyone
  • Testing in Firefox 39.0 32-bit on Windows NT 6.3 64-bit, the a=[] is fastest ! - anyone
  • There is definitely something fishy in this test result under Chrome. How in hell can the popping loop be that much faster then the other 3 solutions? - anyone
  • @chqrlie It's not. It's the slowest method. The benchmark test is flawed. - anyone
  • Please delete this answer as it is wrong, and links to a meaningless flawed test as fake evidence. - anyone

You can add this to your JavaScript file to allow your arrays to be "cleared":

Array.prototype.clear = function() {
    this.splice(0, this.length);
};

Then you can use it like this:

var list = [1, 2, 3];
list.clear();

Or if you want to be sure you don't destroy something:

if (!Array.prototype.clear) {
    Array.prototype.clear = function() {
       this.splice(0, this.length);
    };
}

Lots of people think you shouldn't modify native objects (like Array), and I'm inclined to agree. Please use caution in deciding how to handle this.

Answered   2023-09-20 20:54:33

  • @naomik Can you explain your reasoning why doing such a thing is frowned upon? - anyone
  • It is "frowned upon" to modify javascript primitive functions like Array and String. You could possibly be overloading an already existing function and trash the object class. There might be an obscure javascript engine that already has clear() and expects it to behave a different way. Tread carefully is all I say. - anyone
  • How about the problem where doing a foreach over the members of an array will suddenly start including a clear key? - anyone
  • As a reference: Why is extending native objects a bad practice? - anyone

You can easily create a function to do that for you, change the length or even add it to native Array as remove() function for reuse.

Imagine you have this array:

var arr = [1, 2, 3, 4, 5]; //the array

OK, just simply run this:

arr.length = 0; //change the length

and the result is:

[] //result

easy way to empty an array...

Also using loop which is not necessary but just another way to do that:

/* could be arr.pop() or arr.splice(0)
don't need to return as main array get changed */

function remove(arr) {
  while(arr.length) {
    arr.shift(); 
  }
}

There are also tricky way which you can think about, for example something like this:

arr.splice(0, arr.length); //[]

So if arr has 5 items, it will splice 5 items from 0, which means nothing will remain in the array.

Also other ways like simply reassign the array for example:

arr = []; //[]

If you look at the Array functions, there are many other ways to do this, but the most recommended one could be changing the length.

As I said in the first place, you can also prototype remove() as it's the answer to your question. you can simply choose one of the methods above and prototype it to Array object in JavaScript, something like:

Array.prototype.remove = Array.prototype.remove || function() {
  this.splice(0, this.length);
};

and you can simply call it like this to empty any array in your javascript application:

arr.remove(); //[]

Answered   2023-09-20 20:54:33

  • arr.length = 0; //change the length - anyone

If you are using

a = []; 

Then you are assigning new array reference to a, if reference in a is already assigned to any other variable, then it will not empty that array too and hence garbage collector will not collect that memory.

For ex.

var a=[1,2,3];
var b=a;
a=[];
console.log(b);// It will print [1,2,3];

or

a.length = 0;

When we specify a.length, we are just resetting boundaries of the array and memory for rest array elements will be connected by garbage collector.

Instead of these two solutions are better.

a.splice(0,a.length)

and

while(a.length > 0) {
    a.pop();
}

As per previous answer by kenshou.html, second method is faster.

Answered   2023-09-20 20:54:33

  • Apart from being wrong on a.length, I don't see what this new answer adds to the thread? - anyone
  • @Bergi I just want to focus about actual memory representation about array - anyone
  • Do you have any source to confirm which JS engines will create a new array when a.length=0; is performed? How would those engines act for a.length=500; and a.length=4;? - anyone
  • I tried it on most of browsers, like IE, Firefox, Chrome, it is creating new array. If you set length greater than 0 then it will create an array with undefined elements, i.e. it will just hold some memory locations. - anyone
  • var a = [1]; var b = a; a.length = 0; console.log(b) prints Array [ ], so it doesn't seem like it's creating a new array to me. - anyone

There is a lot of confusion and misinformation regarding the while;pop/shift performance both in answers and comments. The while/pop solution has (as expected) the worst performance. What's actually happening is that setup runs only once for each sample that runs the snippet in a loop. eg:

var arr = [];

for (var i = 0; i < 100; i++) { 
    arr.push(Math.random()); 
}

for (var j = 0; j < 1000; j++) {
    while (arr.length > 0) {
        arr.pop(); // this executes 100 times, not 100000
    }
}

I have created a new test that works correctly :

http://jsperf.com/empty-javascript-array-redux

Warning: even in this version of the test you can't actually see the real difference because cloning the array takes up most of the test time. It still shows that splice is the fastest way to clear the array (not taking [] into consideration because while it is the fastest it's not actually clearing the existing array).

Answered   2023-09-20 20:54:33

  • Very good point! I'll update the original answer with the correct benchmark results. - anyone
  • I can't believe nobody spotted that benchmark error. With over half a million views you would expect someone to notice it. Great work Diadistis - anyone
Array.prototype.clear = function() {
    this.length = 0;
};

And call it: array.clear();

Answered   2023-09-20 20:54:33

  • Please don't encourage modification of the native objects. - anyone
  • why do people have this tendency to grab the accepted answer and put it into a prototype function? Do you actually do this in your projects? Do you have a huge library of prototype additions that you include in every project? - anyone
  • Why not just type array.length = 0? - anyone
  • @naomik "Please don't encourage modification of the native objects." -- I completely agree with this, but just repeating the sentence by itself comes across as arrogant. Someone proposing such a solution is likely not aware of the consequences, and dropping this line on them instead of providing a short explanation or a link does not convey a meaning other than "we, people smarter than you, tell you not to do this, because we know better". - anyone
  • As a reference: Why is extending native objects a bad practice? - anyone

In case you are interested in the memory allocation, you may compare each approach using something like this jsfiddle in conjunction with chrome dev tools' timeline tab. You will want to use the trash bin icon at the bottom to force a garbage collection after 'clearing' the array. This should give you a more definite answer for the browser of your choice. A lot of answers here are old and I wouldn't rely on them but rather test as in @tanguy_k's answer above.

(for an intro to the aforementioned tab you can check out here)

Stackoverflow forces me to copy the jsfiddle so here it is:

<html>
<script>
var size = 1000*100
window.onload = function() {
  document.getElementById("quantifier").value = size
}

function scaffold()
{
  console.log("processing Scaffold...");
  a = new Array
}
function start()
{
  size = document.getElementById("quantifier").value
  console.log("Starting... quantifier is " + size);
  console.log("starting test")
  for (i=0; i<size; i++){
    a[i]="something"
  }
  console.log("done...")
}

function tearDown()
{
  console.log("processing teardown");
  a.length=0
}

</script>
<body>
    <span style="color:green;">Quantifier:</span>
    <input id="quantifier" style="color:green;" type="text"></input>
    <button onclick="scaffold()">Scaffold</button>
    <button onclick="start()">Start</button>
    <button onclick="tearDown()">Clean</button>
    <br/>
</body>
</html>

And you should take note that it may depend on the type of the array elements, as javascript manages strings differently than other primitive types, not to mention arrays of objects. The type may affect what happens.

Answered   2023-09-20 20:54:33

A.splice(0);

I just did this on some code I am working on. It cleared the array.

Answered   2023-09-20 20:54:33

  • No you've just swapped a named array container with a newly created anonymous one. `var A = [1,2,3,4]; var B; B = A.splice(0); console.log(A); console.log(B); ' - anyone
  • @BekimBacaj No, splice mutates the original array and returns a new array. The returned result is ignored. The answer is correct (but redundant, since this has been suggested countless times, years before, already). - anyone

If you use constants then you have no choice:

const numbers = [1, 2, 3]

You can not reasign:

numbers = []

You can only truncate:

numbers.length = 0

Answered   2023-09-20 20:54:33

Use a modified version of Jan's initial suggestion:

var originalLength = A.length;
for (var i = originalLength; i > 0; i--) {
     A.pop();
}

Terser:

for (let i = A.length; i > 0;A.pop(),i--) {}

Or here's another take:

while(!A[Symbol.iterator]().next().done)A.shift()

Answered   2023-09-20 20:54:33

  • Why would you want to do such thing? Why add two more variables and a bunch of code to do the same thing? - anyone
  • the pop method will change A.length so the iteration will be half of the amount of the item you will want to pop; store it in var will keep the original length value; - anyone

enter image description here

To Empty a Current memory location of an array use: 'myArray.length = 0' or 'myArray.pop() UN-till its length is 0'

  • length : You can set the length property to truncate an array at any time. When you extend an array by changing its length property, the number of actual elements increases.
  • pop() : The pop method removes the last element from an array and returns that returns the removed value.
  • shift() : The shift method removes the element at the zeroeth index and shifts the values at consecutive indexes down, then returns the removed value.

Example:

var arr = ['77'];
arr.length = 20;
console.log("Increasing : ", arr); // (20) ["77", empty × 19]
arr.length = 12;
console.log("Truncating : ", arr); // (12) ["77", empty × 11]

var mainArr = new Array();
mainArr = ['1', '2', '3', '4'];

var refArr = mainArr;
console.log('Current', mainArr, 'Refered', refArr);

refArr.length = 3;
console.log('Length: ~ Current', mainArr, 'Refered', refArr);

mainArr.push('0');
console.log('Push to the End of Current Array Memory Location \n~ Current', mainArr, 'Refered', refArr);

mainArr.poptill_length(0);
console.log('Empty Array \n~ Current', mainArr, 'Refered', refArr);

Array.prototype.poptill_length = function (e) {
  while (this.length) {
    if( this.length == e ) break;

    console.log('removed last element:', this.pop());
  }
};

  • new Array() | [] Create an Array with new memory location by using Array constructor or array literal.

    mainArr = []; // a new empty array is addressed to mainArr.
    
    var arr = new Array('10'); // Array constructor
    arr.unshift('1'); // add to the front
    arr.push('15'); // add to the end
    console.log("After Adding : ", arr); // ["1", "10", "15"]
    
    arr.pop(); // remove from the end
    arr.shift(); // remove from the front
    console.log("After Removing : ", arr); // ["10"]
    
    var arrLit = ['14', '17'];
    console.log("array literal « ", indexedItem( arrLit ) ); // {0,14}{1,17}
    
    function indexedItem( arr ) {
        var indexedStr = "";
        arr.forEach(function(item, index, array) {
            indexedStr += "{"+index+","+item+"}";
            console.log(item, index);
        });
        return indexedStr;
    }
    
  • slice() : By using slice function we get an shallow copy of elements from the original array, with new memory address, So that any modification on cloneArr will not affect to an actual|original array.

    var shallowCopy = mainArr.slice(); // this is how to make a copy
    
    var cloneArr = mainArr.slice(0, 3); 
    console.log('Main', mainArr, '\tCloned', cloneArr);
    
    cloneArr.length = 0; // Clears current memory location of an array.
    console.log('Main', mainArr, '\tCloned', cloneArr);
    

Answered   2023-09-20 20:54:33

  • "length : Pops till length of an array is of Specified Size." Who told you this nonsense? - anyone
  • @BekimBacaj In essence, it does the same effect. It should probably have said length = ? instead of just length. - anyone
  • @BekimBacaj i have updated my answer, I just assumed that length pops till length, but i corrected now that length just truncates or increases the size of an array. - anyone

I'm surprised no one has suggested this yet:

let xs = [1,2,3,4];
for (let i in xs)
    delete xs[i];

This yields an array in quite a different state from the other solutions. In a sense, the array has been 'emptied':

xs
=> Array [ <4 empty slots> ]

[...xs]
=> Array [ undefined, undefined, undefined, undefined ]

xs.length
=> 4

xs[0]
=> ReferenceError: reference to undefined property xs[0]

You can produce an equivalent array with [,,,,] or Array(4)

Answered   2023-09-20 20:54:33

  • It could be a good answer to a different question: "How to convert all elements in an array to undefined elements". - anyone
  • Though internally there is a difference between undefined elements and empty slots ("holes") - anyone
  • Then this can be shortened to const originalLength = array.length; array.length = 0; array.length = originalLength;. - anyone