JavaScriptを学び始めると、
最初に出てくる重要な概念の一つがオブジェクトです。
特に、オブジェクトにプロパティを追加する方法や、
複数のオブジェクトを一つにマージする方法は、
日常的なコードの中でよく使われます。
本記事では、「JavaScript オブジェクト 追加」の
基本と応用について解説していきます。
Contents
JavaScriptオブジェクトの基本
オブジェクトとは？
- オブジェクトは、
データをキー（名前）と
バリュー（値）のペアとして保存する仕組みです。 - オブジェクトを使うことで、
複数の関連するデータを
一つにまとめて扱うことができ、
データの管理が容易になります。 - 例えば、
以下のように人の情報を
オブジェクトとしてまとめることができます。
let person = {
name: "John",
age: 30,
occupation: "Engineer"
};この例では、name、age、occupationという
プロパティがあり、それぞれに値（”John”、30、”Engineer”）が設定されています。
プロパティの追加方法
ドット記法によるプロパティの追加
- JavaScriptでは、ドット記法を使って
簡単にオブジェクトに新しいプロパティを追加できます。 - ドット記法は、
すでに存在するオブジェクトに
新しいデータを追加する最も基本的な方法です。 - 以下のコードで、
オブジェクトに新しいプロパティを追加しています。
let person = { name: "John", age: 30 };
person.occupation = "Engineer"; // プロパティを追加
console.log(person.occupation); // "Engineer"
このように、オブジェクト名.プロパティ名 = 値;
という形式でプロパティを簡単に追加できます。
ブラケット記法によるプロパティの追加
- ブラケット記法も
オブジェクトのプロパティを追加する際に使えます。
特に、プロパティ名に変数を使いたい場合に便利です。 - ドット記法では静的なプロパティ名を使いますが、
ブラケット記法では動的にプロパティ名を設定することができます。 - 変数を使ってプロパティ名を
追加する例を見てみましょう。
let person = { name: "John", age: 30 };
let prop = "occupation";
person[prop] = "Engineer"; // ブラケット記法でプロパティを追加
console.log(person.occupation); // "Engineer"ブラケット記法は、
プロパティ名を動的に決定する必要がある場合に非常に有効です。
Object.defineProperty()を使用した追加
Object.defineProperty()を使うと、
より詳細にプロパティを定義することができます。- このメソッドでは、
プロパティが読み取り専用にしたり、
列挙不可にしたりするなど、細かい制御が可能です。 - 次の例では、
salaryプロパティを
読み取り専用で追加します。
let person = { name: "John", age: 30 };
Object.defineProperty(person, 'salary', {
value: 50000,
writable: false
});
console.log(person.salary); // 50000
person.salary = 60000; // エラーは発生しないが変更されない
console.log(person.salary); // 50000Object.defineProperty()を使うことで、
プロパティの挙動を細かく設定できます。
オブジェクトの複製とマージ
シャローコピーとディープコピーの違い
- オブジェクトを複製するときには、
「シャローコピー（浅いコピー）」と
「ディープコピー（深いコピー）」の2種類があります。 - シャローコピーでは、
オブジェクト内の参照型データはコピー元と共有され、
ディープコピーではすべてのデータが独立してコピーされます。 Object.assign()を使ったシャローコピーの例です。
let original = { name: "John", address: { city: "Tokyo" } };
let copy = Object.assign({}, original);
copy.address.city = "Osaka";
console.log(original.address.city); // "Osaka" （参照が共有されている）
ディープコピーでは、JSON.parse(JSON.stringify())を使うと、
参照も含めてすべてコピーされます。
let deepCopy = JSON.parse(JSON.stringify(original));
deepCopy.address.city = "Osaka";
console.log(original.address.city); // "Tokyo" （影響なし）複雑なオブジェクトを扱う場合は、
ディープコピーを使うことで元のデータを守ることができます。
オブジェクトのマージ
- JavaScriptでは、
Object.assign()やスプレッド構文を使って、
複数のオブジェクトを一つにマージできます。 - プロパティが重複した場合、
後から指定したオブジェクトのプロパティが優先されます。 - 以下の例では、
2つのオブジェクトをマージしています。
let obj1 = { name: "John", age: 30 };
let obj2 = { occupation: "Engineer", age: 35 };
let merged = Object.assign({}, obj1, obj2);
console.log(merged); // { name: "John", age: 35, occupation: "Engineer" }この例では、ageプロパティがobj2の値で
上書きされていることがわかります。
オブジェクト配列の操作
オブジェクトを配列に追加する
- オブジェクトは配列の中にも格納でき、
配列のメソッドを使って自由に操作できます。 - JavaScriptの配列は、
任意の型のデータを格納できるため、
オブジェクトを要素として追加することができます。 - 配列にオブジェクトを追加する方法を見てみましょう。
let people = [];
people.push({ name: "John", age: 30 });
people.push({ name: "Jane", age: 28 });
console.log(people);
配列にオブジェクトを追加することで、
複数のデータを簡単に管理できます。
まとめ
この記事では、
JavaScriptでオブジェクトにプロパティを追加する方法、
オブジェクトを複製する方法、
複数のオブジェクトをマージする方法について詳しく解説しました。
プロパティ追加やオブジェクト操作の基本を押さえることで、
より効率的にデータを管理できるようになります。
JavaScriptを使うときは、ぜひ今回学んだ内容を試してみてください！
