74

Can some one explain the conceptual difference between both of them. Read somewhere that the second one creates a new array by destroying all references to the existing array and the .length=0 just empties the array. But it didn't work in my case

//Declaration 
var arr = new Array();

The below one is the looping code that executes again and again.

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

But if I replace the code with arr =[] in place of arr.length=0 it works fine. Can anyone explain what's happening here.

Haim Evgi
  • 123,187
  • 45
  • 217
  • 223
Srikanth Rayabhagi
  • 1,393
  • 3
  • 12
  • 23
  • 6
    Why is your code looping `arr = arr + $(this).html();`? If you're adding stuff to your array you should use `Array.push()` instead. – BoltClock Jan 26 '11 at 11:59
  • 1
    It's funny because there's already a 9 upvoted answer, yet it's still **unclear** what the OP's intetion is... – gblazex Jan 26 '11 at 13:03
  • @Bolt - I just gave the sample of the code here, the original code adds the elements dynamically to array.. I chose to append the elements to array instead of push(). Does that make a lot of difference in what I am looking for? – Srikanth Rayabhagi Jan 26 '11 at 13:26
  • 1
    The second code block above, is it in a loop? If so, then the first time it's executed it will empty the array, but the after the first execution of that code block `arr` will be a reference to a string, so from then on `arr.length` won't have any effect (as `length` is a read-only property of String). `arr = []` will convert `arr` back to an empty array at the beginning of each iteration, but then you immediately convert it to a string again. So you either broke your code in trying to simplify it for this example, or you're just doing very weird stuff :P – Joe Dyndale Dec 10 '12 at 15:10
  • possible duplicate of [How to empty an array in JavaScript?](http://stackoverflow.com/questions/1232040/how-to-empty-an-array-in-javascript) – Shadow The GPT Wizard Sep 03 '13 at 11:49

3 Answers3

107

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

foo.length = 0 modifies the array itself. If you access it via a different variable, then you still get the modified array.

Read somewhere that the second one creates a new array by destroying all references to the existing array

That is backwards. It creates a new array and doesn't destroy other references.

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 does empty the array, at least 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 assigning 0 to it has no effect.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
3

The difference here is best demonstrated 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);

Of which a live demo can be seen 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 are doing is breaking the link the variable has to that original array.

When you use array.length = 0 (and other methods like array.splice(0, array.length) for instance), you are actually emptying the original array.

Matt
  • 74,352
  • 26
  • 153
  • 180
  • 1
    Which browsers don't support `array.length = 0`? – Arthaey Jan 04 '13 at 19:31
  • 1
    @ArthaeyAngosii: Heh, none that I'm aware of. Apparently I was naïve and enjoyed answering with rubbish back in January 2011... thanks for pointing it out ;). – Matt Jan 04 '13 at 19:39
-1

Are you sure it really works?

I did a little experiment here, and trying to "add" an Array with a String resulted in a string.

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

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

(tested in Opera 11)

Denilson Sá Maia
  • 47,466
  • 33
  • 109
  • 111