読者です 読者をやめる 読者になる 読者になる

JS Tips 翻訳: Tips22 配列を空にする際の注意点

Javascript

JS Tips というJavascriptのTipsを集めたサイトがあってこれがなかなかへ~となったので紹介。 Javascriptはそのクソな独特な言語仕様に驚かされることが多いがTipsのいくつかはそういった独特な言語仕様について取り上げている。

ここではひとつだけ配列を空にする際にlist = [];だとコピーした参照はメモリに残ったままになるからlist.length = 0;を使うといいよというTipsを紹介してみる。 そうなんだ、知らなかった。

github に同様のリポジトリがある。
個人的にはこっちのが見やすいと感じる。

22 - Empty an Array

定義した配列の中身を空にしたくなるとする。 ふつう、こんなふうに書くだろう。

// define Array
var list = [1, 2, 3, 4];
function empty() {
    //empty your array
    list = [];
}
empty();

だが、もっとパフォーマンスのよい別のやり方もあるのだ。

このコードのようにするとよい。

var list = [1, 2, 3, 4];
function empty() {
    //empty your array
    list.length = 0;
}
empty();
  • list = [] は変数に新しい配列への参照を割り当てる。一方、他のどの参照も影響を受けない。以前の配列の中身の参照はメモリに残ったままになっているということであり、メモリリークにつながる。

  • list.length = 0 はその配列の中身をすべて消去し、他の参照しているところにもヒットする。

配列のコピーがあるとして(A とAのコピー)、list.length = 0 で中身を削除すると、コピーの方もその中身をを失うのだ。

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);

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

開眼!  JavaScript ―言語仕様から学ぶJavaScriptの本質

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質

気が向いたら他のTipsも取り上げてみる。