JavaScriptのdelete演算子を配列に使うと起こる厄介な挙動

JavaScriptにおけるdelete演算子は、本来オブジェクトのプロパティを削除するための演算子です。

しかし、JavaScriptでは配列も「インデックスをキーとしたオブジェクト」の一種として扱われるため、実は配列に対してもdelete演算子を使用することができます。

ここで問題なのが、この使い方によって予想外の挙動が引き起こされるという点です。実際に見ていきましょう。

サンプルコード

まず、次のような配列リテラルを用意します。

const arr = ['a', 'b', 'c', 'd', 'e'];

この配列の末尾の要素（インデックス4）をdeleteで削除してみます。実行結果を予想しながら、以下のコードをご覧ください。

const arr = ['a', 'b', 'c', 'd', 'e'];
delete arr[4];
console.log(arr);
console.log(arr.length);

実行結果

このプログラムをコンソールで実行すると、次のように出力されます。

[ 'a', 'b', 'c', 'd', <1 empty item> ]
5

なぜこのような結果になるのか？

多くの方は、「1つの要素を削除したのだから、arr.lengthは5ではなく4になるはずだ」と予想したのではないでしょうか。

しかし実際には、delete演算子はその位置にある値だけをメモリ上から取り除くだけで、配列内の「スロット（場所）」そのものは残り続けます。

そのため、配列の長さ（length）はまったく変化せず、要素数は5のままです。ただし、1つ分のスロットが「空き（empty item）」として残り、いわゆる疎な配列（スパース配列）になってしまうのです。

要素を正しく削除したい場合の方法

配列から要素を完全に取り除き、lengthも適切に更新したい場合は、deleteではなく以下のメソッドを使うのが安全です。

• splice()：指定した位置の要素を取り除き、残りの要素を詰めてくれる
• pop() / shift()：末尾・先頭の要素を取り除く
• filter()：条件に合わない要素を除外した新しい配列を生成する

例えば先ほどのケースなら、次のように書きます。

const arr = ['a', 'b', 'c', 'd', 'e'];
arr.splice(4, 1); // インデックス4から1個の要素を削除
console.log(arr);      // [ 'a', 'b', 'c', 'd' ]
console.log(arr.length); // 4

このように、splice()を使えば配列が詰められ、lengthも4に正しく更新されます。

まとめ

delete演算子はあくまでオブジェクトのプロパティ削除用のものであり、配列に使うと値だけが消えて穴の開いた配列になります。lengthが変わらないためバグの温床にもなりやすいので、配列からの要素削除にはsplice()やfilter()などの専用メソッドを使うことを強くおすすめします。