配列のクリア「length=0」と「[]で上書き」の使い分け

JavaScriptで配列をクリアする際に2通りのパターン（length=0、[]で上書き）がありますが、どちらを使った方がいいのか、という疑問を前から持っていたので、ちょっとだけ調査してみました。

配列をクリアするコードは以下の2パターン。

◆lengthでクリア

arr.length = 0;

◆新インスタンス（[]）で上書き

arr = [];

上記の2パターンは処理結果としては同じものとなります。

まず見た目で選ぶなら、新インスタンスで配列を上書きする方法です。

var arr = [];
arr.push("a");
arr.push("b");
console.log(arr);

arr = [];
arr.push("c");
arr.push("d");
console.log(arr);

パッと見で、途中で配列をクリアしているのが見て取れるので、分かりやすいです。

配列にデータを追加した後にクリアするという処理を何度も繰り返して、処理にかかる時間を計測してみました。

var arr = [];
var start = new Date();
for(i = 0; i < 1000000; i++){
  arr.push("a");
  arr.push("b");
  arr.push("c");

  arr.length = 0;
}
console.log("lengthでクリア：", new Date() - start);

var arr2 = [];
var start2 = new Date();
for(i = 0; i < 1000000; i++){
  arr2.push("a");
  arr2.push("b");
  arr2.push("c");

  arr2 = [];
}
console.log("[]でクリア：", new Date() - start2);

実行結果は以下の通りとなります。

lengthでクリア： 112
[]でクリア： 43

出力された数値の単位はミリ秒です。

「lengt=0」の方は指定した配列数以降のデータを削除するという処理が実行されているようで、[]で上書きしたよりも時間がかかっています。

以下は「length」の指定で、配列の要素が削除されていることを確認するためのコード。

var arr3 = [];
arr3.push("a");
arr3.push("b");
arr3.push("c");
console.log(arr3);

arr3.length = 1;
console.log(arr3);

arr3.length = 3;
console.log(arr3);

実行結果は以下の通り。

["a", "b", "c"]
["a"]
["a", empty × 2]

配列の要素数や繰り返しの回数にもよりますが、処理速度という面では新インスタンス（[]）で上書きした方が良さそうです。

配列のインスタンスが変わってしまうと問題がある場合は「length = 0」を使うしかありませんが、それ以外の見た目や処理速度では [] で上書きした方がいいという結果でした。

ただし、処理速度については、差が出るほどの要素数や繰り返しを行うことはそうそう無いので、既存システムの改修であれば前に倣えで作って、新規であれば好みで選んでもいいと思います。