Categories
arrays javascript

How do I empty an array in JavaScript?

2195

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?

1

5274

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. Some have argued that this may not work in all implementations of JavaScript, but it turns out that this is not the case. 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.

59

  • 226

    while (A.length) { A.pop(); }, no need for > 0

    Aug 8, 2014 at 12:41


  • 405

    > 0 is more readable IMHO. And there’s no performance difference between the two.

    Aug 8, 2014 at 19:46

  • 11

    @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.

    – shovavnik

    Aug 17, 2014 at 8:03

  • 19

    @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.

    Nov 7, 2014 at 14:15

  • 54

    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.

    – jgawrych

    Jan 9, 2015 at 1:29

2636

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;

34

  • 25

    what does ECMAScript 5 Standard says about this?

    – Pacerier

    Jun 21, 2011 at 7:00


  • 241

    @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”

    Jun 21, 2011 at 7:43

  • 13

    @LosManos Even in strict mode, length is a special property, but not read only, so it will still work.

    Jan 4, 2013 at 14:18

  • 14

    @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.

    Nov 16, 2013 at 19:08


  • 4

    @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.

    Oct 26, 2015 at 18:42

318

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

12

  • 5

    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 :/

    – obenjiro

    Jun 26, 2013 at 5:09

  • @naomik But this is one of the basic functionalities, which should have been there by default.

    Aug 19, 2013 at 4:43

  • 7

    @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.

    – jpillora

    Sep 14, 2013 at 10:39

  • 3

    @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().

    – jpillora

    Sep 15, 2013 at 4:58

  • 2

    It turns out this method is a lot slower than .splice() and .length=0. The benchmarks were not correct. See my updated answer.

    Feb 17, 2015 at 1:30