delete は「引き出しごと取り外す」イメージ
オブジェクトは「名前付きの引き出しがたくさんあるタンス」のようなものです。delete は、その引き出し(プロパティ)を“丸ごと取り外す”ための演算子 です。
「中身を空にする」のではなく、
「その引き出し自体が存在しなくなる」
という点がとても重要です。
const user = {
name: "太郎",
age: 25,
};
delete user.age;
console.log(user); // { name: "太郎" }
console.log(user.age); // undefined
JavaScriptage というプロパティそのものが消えたので、user の形が変わっています。
基本構文:ドット記法とブラケット記法
ドット記法での削除
一番よく使う形はこれです。
const user = {
name: "太郎",
age: 25,
};
delete user.age;
console.log(user); // { name: "太郎" }
JavaScriptdelete オブジェクト.プロパティ名;
という形で、そのプロパティを削除できます。
ここでのポイントは、user というオブジェクト自体はそのまま残り、age という“引き出し”だけが取り外される ということです。
ブラケット記法での削除
プロパティ名を変数で持っているときは、
ブラケット記法を使います。
const user = {
name: "太郎",
age: 25,
};
const key = "age";
delete user[key];
console.log(user); // { name: "太郎" }
JavaScriptdelete オブジェクト[式];
の形で、式の結果をプロパティ名として削除できます。
プロパティ名が動的に決まるときは、
追加も参照も削除も、ブラケット記法でそろえるのが自然です。
「値を 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のようなコードを自分で書いて、
「オブジェクトの“形”が変わる感覚」をつかんでみてください。
“引き出しの中身”をいじるのか、
“引き出しそのもの”を外すのか。
その違いを意識できるようになると、
オブジェクト設計の精度が一段上がります。
