JavaScriptでArrayを空にする際に参照型だという事を注意する

JavaScriptでArrayを空にする際に、Arrayが参照型だという点に注意しないと失敗する(した)例です。

javascript

$(function(){

    // 配列定義
    var array = [];

    $('.select').on('click', function(e){
        // 配列に値を入れる
        array.push($(this).html());
        alert(array);
    });

    $('#submit').on('click', {ary:array}, function(e){
        // 配列をalert
        alert(e.data.ary);
    });

    $('#reset').on('click', function(e){
        // 配列を空にする
        array = [];
    });

});

html

<ul>
    <li class="select">A</li>
    <li class="select">B</li>
    <li class="select">C</li>
    <li class="select">D</li>
</ul>
<p id="reset">リセット</p>
<p id="submit">送信</p>

やりたい事は、
* selectというclassがついてるliをクリックすると、arrayという配列に値を入れていく。
* [送信]をクリックするとarrayの中身をalertする。
* [リセット]をクリックするとarrayの配列を空にする。

実際に上のプログラムを動作させてみます。

A→B→C→Dとクリックして[リセット]をクリックし、今度はA→C→B→Dとクリックして[送信]をクリックします。
すると、alertで[A, C, B, D]とはならず、[A, B, C, D]と表示されてしまいます。

liをクリックする毎にもalert表示させていますが、こちらでは、
[A]→[A, B]→[A, B, C]→[A, B, C, D]→[A]→[A, C]→[A, C, B]→[A, C, B, D]
とクリックした順に正しく表示されます。

なぜ[A, C, B, D]とならないのでしょうか…。

これは、Arrayが参照型だからです。
// 配列を空にする
array = [];
の箇所が問題で、これはarrayを空にする処理ではなく、新たな配列をメモリ上のどこかに作成し、そのメモリ上の【場所】情報をarrayに入れている事になります。

$('#submit').on('click', {ary:array}, function(e){
　　// 配列をalert
　　alert(e.data.ary);
});
つまりこの箇所でfunctionにaryとして渡しているのは、arrayという配列ではなく、arrayという変数に格納されている、配列の【場所】情報になりますので、このonが定義された時点での参照先にある配列は、リセットする前に参照していた配列という事になります。
※なのでここでalert(array)としてみると、きちんと[A, C, B, D]と表示されます。

まとめ

配列を空にしたい場合は、
array = [];
や、
array = new Array();
とするのではなく、
array.length = 0;
とする方が良さそうです。