「プロパティの追加」は“あとから引き出しを増やす”イメージ
オブジェクトは「名前付きの引き出しがたくさんあるタンス」のようなものです。
プロパティの追加は、
「そのタンスにあとから新しい引き出しを増やす」イメージです。
最初にこういうオブジェクトがあったとします。
const user = {
name: "太郎",
};
ここには name という引き出ししかありません。
ここに「年齢」や「メールアドレス」の引き出しを、あとから足していくのが
“プロパティの追加”です。
基本：ドット記法でのプロパティ追加
一番よく使う書き方
const user = {
name: "太郎",
};
user.age = 25;
user.email = "taro@example.com";
console.log(user);
// { name: "太郎", age: 25, email: "taro@example.com" }
user.age = 25; と書いた瞬間、user オブジェクトの中に age という新しいプロパティが生まれます。
ここで大事なのは、
「オブジェクトは“固定された形”ではなく、あとから自由に引き出しを増やせる」
という感覚です。
const で宣言していても、
「オブジェクトそのものを別の値に入れ替えない限り」
中身のプロパティは追加・変更できます。
const user = { name: "太郎" };
user.age = 25; // OK（中身の変更）
user.name = "花子"; // OK
// user = {}; // これは NG（再代入）
ブラケット記法でのプロパティ追加
プロパティ名を変数で決めたいとき
ドット記法の他に、user["age"] = 25; のような ブラケット記法 でも追加できます。
const user = {
name: "太郎",
};
user["age"] = 25;
console.log(user.age); // 25
console.log(user["age"]); // 25
ブラケット記法が本領発揮するのは、
プロパティ名が変数で決まるときです。
const key = "email";
const user = { name: "太郎" };
user[key] = "taro@example.com";
console.log(user.email); // taro@example.com
ここが重要です。
「プロパティ名を動的に決めたいとき」は、obj[変数] = 値 という形で追加する。
どのタイミングでも追加できる
最初に全部決めなくていい
オブジェクトリテラルで最初から全部書いてもいいし、
あとから少しずつ育てても構いません。
const user = {}; // まずは空のオブジェクト
user.name = "太郎"; // あとから追加
user.age = 25;
user.isAdmin = false;
console.log(user);
// { name: "太郎", age: 25, isAdmin: false }
このように、
「最初は何もない箱を用意して、必要になったらプロパティを足していく」
というスタイルもよく使われます。
逆に、
「このオブジェクトはこういう形だ」と最初から分かっているなら、
オブジェクトリテラルでまとめて書いてしまってもOKです。
const user = {
name: "太郎",
age: 25,
isAdmin: false,
};
既存プロパティとの違い：追加と上書き
「なければ追加、あれば上書き」
obj.key = 値 という書き方は、
「そのプロパティがなければ追加、あれば上書き」
という動きをします。
const user = { name: "太郎" };
user.age = 25; // 追加
user.age = 30; // 上書き
console.log(user.age); // 30
つまり、
「追加専用の文法」と「変更専用の文法」が分かれているわけではなく、
同じ書き方で“結果として追加になったり上書きになったりする」
ということです。
だからこそ、
「このプロパティはもう存在しているのか？」
「新しく作ってしまっていないか？」
を意識しておくことが大事になります。
ネストしたオブジェクトへのプロパティ追加
中のオブジェクトにも同じように足せる
オブジェクトの中にオブジェクトがある場合も、
同じ感覚でプロパティを追加できます。
const user = {
name: "太郎",
address: {
city: "Tokyo",
},
};
user.address.zip = "100-0001";
console.log(user.address);
// { city: "Tokyo", zip: "100-0001" }
ただし、
途中のオブジェクトがまだ存在しない場合は注意が必要です。
const user = {
name: "太郎",
};
// user.address.city = "Tokyo"; // これはエラー（address が undefined）
user.address = {}; // まずオブジェクトを用意
user.address.city = "Tokyo"; // そのあとでプロパティ追加
console.log(user);
// { name: "太郎", address: { city: "Tokyo" } }
ここが重要です。
「ドットでつなぐときは、途中のオブジェクトがちゃんと存在しているか」を
意識しておくこと。
実務的な感覚：プロパティ追加を“設計”として考える
「何でも足せる」からこそ、何でも足さない
JavaScript のオブジェクトは柔軟なので、
どこからでも好きなだけプロパティを追加できます。
user.randomFlag = true;
user.tempData = [1, 2, 3];
user._debug = "test";
技術的には全部できますが、
無秩序に足していくと「このオブジェクト、何が入っているのか分からない」
というカオスな状態になります。
だからこそ、
「このオブジェクトは何を表しているのか？」
「このプロパティはその“意味”にふさわしいか？」
を一度考えてから追加するのが大事です。
ここが重要です。
プロパティの追加は「ただの代入」ではなく、
“このオブジェクトの形を設計している行為”だと意識する。
初心者として「プロパティの追加」で本当に押さえてほしいこと
プロパティの追加は、
一言で言えばこうです。
obj.key = value;
obj["key"] = value;
この2つの形を使い分けられれば、基礎は十分です。
特に大事なのは次の感覚です。
オブジェクトはあとからいくらでもプロパティを足せるconst でも中身（プロパティ）は変更・追加できる
ドット記法は「固定の名前」、ブラケット記法は「変数で決まる名前」
「なければ追加・あれば上書き」という動き
まずは、
const user = {};
user.name = "太郎";
user.age = 25;
user.email = "taro@example.com";
console.log(user);
のようなコードを、
自分の手で何度か書いてみてください。
「空の箱から、少しずつ“1人のユーザー”を形作っていく」
その感覚がつかめたら、
オブジェクトとかなり仲良くなれているはずです。