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;
とする方が良さそうです。