JavaScript | 基礎構文:オブジェクト - プロパティの削除(delete)

JavaScript JavaScript
スポンサーリンク

delete は「引き出しごと取り外す」イメージ

オブジェクトは「名前付きの引き出しがたくさんあるタンス」のようなものです。
delete は、その引き出し(プロパティ)を“丸ごと取り外す”ための演算子 です。

「中身を空にする」のではなく、
「その引き出し自体が存在しなくなる」
という点がとても重要です。

const user = {
  name: "太郎",
  age: 25,
};

delete user.age;

console.log(user);       // { name: "太郎" }
console.log(user.age);   // undefined
JavaScript

age というプロパティそのものが消えたので、
user の形が変わっています。


基本構文:ドット記法とブラケット記法

ドット記法での削除

一番よく使う形はこれです。

const user = {
  name: "太郎",
  age: 25,
};

delete user.age;

console.log(user); // { name: "太郎" }
JavaScript

delete オブジェクト.プロパティ名;
という形で、そのプロパティを削除できます。

ここでのポイントは、
user というオブジェクト自体はそのまま残り、
age という“引き出し”だけが取り外される
ということです。

ブラケット記法での削除

プロパティ名を変数で持っているときは、
ブラケット記法を使います。

const user = {
  name: "太郎",
  age: 25,
};

const key = "age";
delete user[key];

console.log(user); // { name: "太郎" }
JavaScript

delete オブジェクト[式];
の形で、式の結果をプロパティ名として削除できます。

プロパティ名が動的に決まるときは、
追加も参照も削除も、ブラケット記法でそろえるのが自然です。


「値を undefined にする」のと何が違うのか

delete は「存在そのものを消す」

よくある混乱ポイントがこれです。

const user = {
  name: "太郎",
  age: 25,
};

user.age = undefined;

console.log(user);          // { name: "太郎", age: undefined }
console.log("age" in user); // true
JavaScript

この場合、
age というプロパティは「存在しているけど中身が undefined」
という状態です。

一方、delete を使うとこうなります。

const user = {
  name: "太郎",
  age: 25,
};

delete user.age;

console.log(user);          // { name: "太郎" }
console.log("age" in user); // false
JavaScript

ここが重要です。
undefined を代入するのは「中身を空にする」だけで、
delete は「引き出しごと取り外す」。
“存在しているかどうか”というレベルで違う。

「このプロパティはもうこのオブジェクトの一部ではない」
としたいときは delete を使うべきです。


存在しないプロパティを delete したら?

エラーにはならない(静かに何も起きない)

const user = {
  name: "太郎",
};

delete user.age; // もともと存在しない

console.log(user); // { name: "太郎" }
JavaScript

存在しないプロパティを delete しても、
エラーにはなりません。
単に「何も削除されなかった」というだけです。

delete の結果は、
成功しても・削除対象がなくても true を返すことが多いので、
戻り値をチェックすることはあまりありません。

基礎の段階では、
「存在しないプロパティに対する delete は無害」
くらいの理解で十分です。


ネストしたオブジェクトのプロパティ削除

中のオブジェクトにも同じように使える

オブジェクトの中にオブジェクトがある場合も、
同じように delete でプロパティを消せます。

const user = {
  name: "太郎",
  address: {
    city: "Tokyo",
    zip: "100-0001",
  },
};

delete user.address.zip;

console.log(user.address); // { city: "Tokyo" }
JavaScript

ただし、
途中のオブジェクトが undefined の場合は注意が必要です。

const user = {
  name: "太郎",
};

// delete user.address.city; // これはエラー(address が undefined)

// こういうときは、まず存在を確認する
if (user.address) {
  delete user.address.city;
}
JavaScript

ここが重要です。
ドットでつなぐときは、「途中のオブジェクトがちゃんとあるか」を意識する。
delete 自体は安全でも、アクセスの時点でエラーになりうる。


実務的な感覚:delete をいつ使うか

「そのプロパティが“もうこのオブジェクトの一部ではない”とき」

例えば、
サーバーから受け取ったデータに、
フロント側では不要なプロパティが含まれているとします。

const user = {
  id: 1,
  name: "太郎",
  passwordHash: "xxxxxx", // 表示には不要
};
JavaScript

画面表示用に「安全な形」にしたいなら、
passwordHash を削除してしまうのは一つの手です。

delete user.passwordHash;
JavaScript

また、
一時的に付けたフラグを後で消したいときにも使えます。

user._tempFlag = true;
// 何か処理…
delete user._tempFlag;
JavaScript

ここが重要です。
「このプロパティは“もう存在してほしくない”」
というときに delete を使う。
単に「値がない」ではなく「構造から消したい」場面で選ぶ。


初心者として「プロパティの削除(delete)」で本当に押さえてほしいこと

delete は、

delete obj.key;
delete obj["key"];
JavaScript

という形で使う、
「オブジェクトからプロパティを丸ごと取り外す」ための演算子 です。

特に大事なのは次の感覚です。

undefined を代入するのは「中身を空にする」だけ
delete は「そのプロパティ自体をなくす」
存在しないプロパティを delete してもエラーにはならない
ネストしたオブジェクトにも使えるが、途中が undefined だとアクセスでエラー

まずは、

const user = {
  name: "太郎",
  age: 25,
  email: "taro@example.com",
};

delete user.email;

console.log(user);
JavaScript

のようなコードを自分で書いて、
「オブジェクトの“形”が変わる感覚」をつかんでみてください。

“引き出しの中身”をいじるのか、
“引き出しそのもの”を外すのか。

その違いを意識できるようになると、
オブジェクト設計の精度が一段上がります。

タイトルとURLをコピーしました