JavaScriptでのオブジェクトプロパティ削除 deleteの使い方と罠

JavaScriptにおけるdelete演算子について

これは次の場面で使います。

Objectからキーを削除したい時
Objectと変数の結びつけをなくす時

このdelete演算子は使い方自体は簡単です。

でも少し動作に対する誤解もありえるので、
JavaScriptでのdelete演算子の使い方と罠を解説

※ 僕自身への覚え書きも兼ねてます。

このページの目次

オブジェクト(Object)のプロパティをdeleteで削除
- delete演算子を実際のコードで使ってみると...
罠なのはdelete演算子はメモリ解放をしないこと
- メモリ開放しないことを体験できるコード
完全にメモリ開放するならnull代入すればいい

オブジェクト(Object)のプロパティをdeleteで削除

まずはこのdelete演算子の基本の使い方から

これは公式では次のように説明されてます。

▼ delete演算子とはこういうもの

JavaScript の delete 演算子は、オブジェクトからプロパティを削除します。同じプロパティへの参照がそれ以上保持されない場合は、自動的に解放されます。

引用元　：　https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/delete

まあココに全部書かれてるんですけどね・・・

その名の通り、オブジェクト（Object型すなわちキーと値のペア）からプロパティを削除するためのものです。Object自体にはキー削除のメソッドとかはありません。

delete演算子を実際のコードで使ってみると...

例えばこのようなコードで考えてみます。

▼ このコード

const data = {
  'user_id': 2,
  'offset': 0,
  'limit': 10
}

const data = {

'user_id': 2,

'offset': 0,

'limit': 10

}

ここからlimitプロパティを削除したいとします。

▼ その場合は次のようにdelete演算子を使う

/// 削除前の中身を確認
console.log('削除前 : ', data);

/// offsetプロパティを削除
delete data.limit;

/// 削除後の中身を確認
console.log('削除後 : ', data);

/// 削除前の中身を確認

console.log('削除前 : ', data);

/// offsetプロパティを削除

delete data.limit;

/// 削除後の中身を確認

console.log('削除後 : ', data);

▼ このコードの出力結果

削除前 :  {
  user_id: 2, 
  offset: 0, 
  limit: 10
}

削除後 :  {
  user_id: 2, 
  offset: 0
}

削除前 : {

user_id: 2,

offset: 0,

limit: 10

}

削除後 : {

user_id: 2,

offset: 0

}

きれいさっぱりlimitプロパティが消えてることが分かります。このようにdelete演算子を使うと　"そのプロパティを消すことだけ"　が可能です（二重引用符で囲ったのは強調ため）

あくまでプロパティを消してるだけです。

罠なのはdelete演算子はメモリ解放をしないこと

これは気を付けないといけない注意点です。

「delete演算子はメモリ開放をしないこと」

例えば巨大なデータ（数MB単位）を持つオブジェクトがあったとして、そのプロパティだけをdeleteしてもメモリ開放はされないってことです。

それに気づかずに使い続けるとクラッシュの原因になったり、予期せぬバグ的な何かを生み出すかもしれません。要注意

メモリ開放しないことを体験できるコード

例えばこのようなコードを書いてみます。

▼ このコードを書いてみた

const userId = 2;
const offset = 0;
const limit = 10;
var data = {
  'user_id' : userId,
  'offset': offset,
  'limit': limit
};

const userId = 2;

const offset = 0;

const limit = 10;

var data = {

'user_id' : userId,

'offset': offset,

'limit': limit

};

それぞれのプロパティには、即値ではなく変数が入っています。この時各変数のメモリはオブジェクトが管理している訳ではありません。（C言語的な考え方）

そしてlimitプロパティを削除してみます

▼ 削除するコード例

delete data.limit

/// オブジェクトの中身確認
console.log('data : ', data);

/// limitの変数の中身確認
console.log('limit : ', limit);

delete data.limit

/// オブジェクトの中身確認

console.log('data : ', data);

/// limitの変数の中身確認

console.log('limit : ', limit);

▼ このコードの出力結果

data : {
  user_id: 2,
  offset: 0
}

limit : 10

data : {

user_id: 2,

offset: 0

}

limit : 10

このようにスコープ内で変数が生きている限り、 delete data.limit; をしてもメモリに残り続けます。気を利かせてメモリ開放なんてしてくれないです（むしろされたら困る）

このコードは簡単な例です。もしグローバルな変数で巨大なデータを持つ場合、メモリ解放したと思ってコードを書くと動作不良とかバグの温床になりえますね。

だからdelete演算子を使うときは要注意です。

完全にメモリ開放するならnull代入すればいい

delete演算子はメモリ開放には使えません。

メモリ開放には有名な方法があります。

▼ このようにnull代入でOK

const dummy = {
  'hoge': 'hoge',
  'fuga': 'fuga',
  'piyo': 'piyo'
};
const data = {
  'user_id': 2,
  'offset': 0,
  'limit': 10,
  'dummy': dummy
};

delete data.dummy;
dummy = null;

const dummy = {

'hoge': 'hoge',

'fuga': 'fuga',

'piyo': 'piyo'

};

const data = {

'user_id': 2,

'offset': 0,

'limit': 10,

'dummy': dummy

};

delete data.dummy;

dummy = null;

基本的にはdelete演算子は「プロパティを削除する」だけの役割しかなく、メモリ開放には「null代入」などの別の操作が必要と考えると安全です。

ちなみに data.dummy = null; とプロパティにnullを代入しても意味はありません。参照元の変数にnull代入することでメモリ開放されます（あるいは変数の寿命切れを待ってもOK）

以上、JavaScriptでのdelete演算子についてでした。

僕自身も使い方には気を付けたいです。ではまた

JavaScriptでのオブジェクトプロパティ削除 deleteの使い方と罠

オブジェクト(Object)のプロパティをdeleteで削除

delete演算子を実際のコードで使ってみると...

罠なのはdelete演算子はメモリ解放をしないこと

メモリ開放しないことを体験できるコード

完全にメモリ開放するならnull代入すればいい

関連記事

プロフィール

人気記事

検索してみる