先生と生徒の会話形式で理解しよう

生徒

「JavaScriptで作ったオブジェクトに、新しく情報を足したり、いらない情報を消したりできますか？」

先生

「もちろんできますよ！JavaScriptでは、オブジェクトに対してあとからプロパティを追加したり削除したりするのがとても簡単です。」

生徒

「難しそうに感じます…。どんなふうに書けばいいんですか？」

先生

「心配いりません。すぐにわかるように、順番に説明していきましょう！」

1. オブジェクトとは？

JavaScriptのオブジェクトは、さまざまな情報を1つにまとめるための仕組みです。情報は「プロパティ」という形で保存され、名前（キー）と値のセットになっています。

例えば、「本」の情報をまとめたオブジェクトを作ると次のようになります。


const book = {
  title: "やさしいJavaScript",
  author: "山田太郎"
};

このbookというオブジェクトには、「title（タイトル）」と「author（著者）」というプロパティが含まれています。

2. プロパティを追加する方法

JavaScriptのオブジェクトにプロパティを追加するには、ドット記法かブラケット記法を使います。とても簡単です。

たとえば、上のbookオブジェクトに「出版年（year）」を追加したい場合、次のように書きます。


book.year = 2024;


book["publisher"] = "技術書出版";

どちらも正しく動作します。プロパティ名が英単語だけならドット記法、スペースがあるなど特殊な名前のときはブラケット記法が使いやすいです。


console.log(book);


{
  title: "やさしいJavaScript",
  author: "山田太郎",
  year: 2024,
  publisher: "技術書出版"
}

オブジェクトからプロパティを削除するには、deleteというキーワードを使います。

例えば、authorの情報がいらなくなったときは、次のようにします。


delete book.author;


{
  title: "やさしいJavaScript",
  year: 2024,
  publisher: "技術書出版"
}

deleteを使うと、そのプロパティは完全に消えます。値がnullやundefinedになるわけではなく、そもそも存在しない状態になります。

JavaScriptでは、存在しないプロパティに対して追加・削除をしてもエラーにはなりません。

たとえば、次のようにまだないプロパティを指定して追加してもOKです。


book.price = 1500;

また、存在しないプロパティを削除しようとしても、エラーにはなりません。


delete book.notExist; // 実行しても何も起きません

このように、JavaScriptのオブジェクトはとても柔軟に扱えるようになっています。

プロパティ名を変数として扱いたい場合は、ブラケット記法を使います。


const keyName = "language";
book[keyName] = "日本語";

このように変数を使うと、動的に（あとから決まる）プロパティ名を使いたい場面でとても便利です。

削除も同じくブラケット記法で行えます。


delete book[keyName]; // "language"プロパティが削除される

オブジェクトにプロパティが存在するかどうかを調べたいときは、in演算子を使う方法があります。


console.log("title" in book); // true
console.log("author" in book); // false（削除済み）

このように、inを使えば、プロパティがオブジェクトに含まれているか簡単に確認できます。