Difference between Array.length = 0 and Array = []?

Question

Can someone explain the conceptual difference between both of them. Read somewhere that the second creates a new array, destroying all references to the existing array, and .length = 0 simply empties the array. But in my case it did not work

//Declaration var arr = new Array(); 

The following is a loop code that runs over and over.

 $("#dummy").load("something.php",function(){ arr.length =0;// expected to empty the array $("div").each(function(){ arr = arr + $(this).html(); }); }); 

But if instead of arr.length=0 replace the code with arr =[] , it works fine. Can someone explain what is happening here.

Answer 1

foo = [] creates a new array and assigns it a reference to the variable. Any other references are not affected and still point to the original array.

foo.length = 0 changes the array itself. If you access it through another variable, you still get a modified array.

I read somewhere that the second creates a new array, destroying all references to the existing array

This is back. Creates a new array and does not destroy other links.

 var foo = [1,2,3]; var bar = [1,2,3]; var foo2 = foo; var bar2 = bar; foo = []; bar.length = 0; console.log(foo, bar, foo2, bar2); 

gives:

 [] [] [1, 2, 3] [] 

---

 arr.length =0;// expected to empty the array 

and it clears the array, at least for the first time. After the first time you do this:

 arr = arr + $(this).html(); 

... which overwrites the array with a string.

The length property of a string is read-only, so setting it to 0 has no effect.

Answer 2

The difference here is best shown in the following example:

 var arrayA = [1,2,3,4,5]; function clearUsingLength (ar) { ar.length = 0; } function clearByOverwriting(ar) { ar = []; } alert("Original Length: " + arrayA.length); clearByOverwriting(arrayA); alert("After Overwriting: " + arrayA.length); clearUsingLength(arrayA); alert("After Using Length: " + arrayA.length); 

You can see the live demo here: http://www.jsfiddle.net/8Yn7e/

When you set a variable that points to an existing array to point to a new array, all you do is break the connection the variable has in this original array.

When you use array.length = 0 (for example, other methods, for example array.splice(0, array.length) ), you are actually freeing the original array.

Answer 3

Are you sure this really works?

I did a little experiment here and tried to “add” an array with a string, getting a string.

 function xyz(){ var a = []; alert(typeof(a+$("#first").html())); // shows "string" } 

http://www.jsfiddle.net/4nKCF/

(tested in Opera 11)

Answer 4

Setting arr = [] creates a new link and a new array, but the old arr = [1,2,3] array still exists in memory. The garbage collector will clean it.

Whereas arr.length = 0 saves a reference to the array and removes all elements from this array without creating a new link.