「delete」はやめたら意外とスムーズになった話～JavaScriptのキャッシュ最適化メモ～

なんとなく「hotなコードでのdeleteは避けたほうがいい」って話は聞いたことあったけど、ぶっちゃけ半信半疑だったんだよね💭
でもちょっとしたレイテンシ上昇が気になって、自分でベンチマークを作って試してみたら…結果はなかなかハッキリしてたんだ✨

どんな実験したの？

主に3つの方法で「キャッシュっぽいオブジェクトからデータを消す」のを試したよ👀

delete obj.prop → プロパティ自体が本当に消える
obj.prop = null または undefined → プロパティは残ったまま「空っぽ」状態（これを「トゥームストーン」って呼んでる）
Map.delete(key) → “欠如”がちゃんと扱われる

あと配列でも試した。
delete arr[i]で穴あけるのと、spliceで詰めるの、どっちが速いかっての。

ベンチマークの結果（ざっくり）

方法	変更時間(ミリ秒)	読み込み時間(ミリ秒)	読み込み回数/秒	メモリ変化(MB)
delete property	38.36	25.33	約7.9億	228.6
assign null	0.88	8.32	約24億	9.5
assign undefined	0.83	7.80	約25.6億	-1.1
Map.delete baseline	19.58	104.24	約1.9億	45.4

配列の場合は、

方法	変更時間(ミリ秒)	読み込み時間(ミリ秒)	読み込み回数/秒
delete arr[i]	2.40	4.40	約45億
splice (dense)	54.09	0.12	約843億

ここで注目してほしいこと✨

トゥームストーン（nullやundefined）はdeleteより断然速い。 読み込みはだいたい3倍速くて、書き換えも40倍くらい速かったんだ🥺
null と undefined の違いは性能にはほぼ関係なし。好きな方を選べばOK👍
delete は重い。エンジンがオブジェクトの形を変えたり、辞書モードに落ちたりして余計に遅くなる。
Map は「使い方次第」。今回のテストは半分ミスヒットさせて遅く見えたけど、実際はキーがよく当たるなら問題なし。
配列の穴（delete arr[i]）は密度を壊してしまって、そこからの繰り返しが遅くなる。spliceで詰めるほうがイテレーションは速いよ。

なんでこうなるの？

delete は単に穴を開けるだけじゃなくて、そのオブジェクトの「形（hidden class）」を変えちゃうんだって。
そうすると、JavaScriptエンジンの速読み機能（インラインキャッシュ）が使えなくなって、急に重くなる感じ。

逆にnullやundefinedは「その場所は空だけど形は変えない」からサクサク動く。
ただし、元々存在しないプロパティをundefinedにすると形が変わっちゃうから注意⚠️

配列も穴ができると、密に詰まってた状態から穴あき状態に変わって、それ以降の処理が遅くなるんだ。

`delete` と `undefined` はやっぱり違うよ

const x = { a: 1, b: undefined, c: null };

delete x.a;
console.log("a" in x); // false
console.log(Object.keys(x)); // ['b', 'c']

console.log(JSON.stringify(x)); // {"c":null}