3秒でわかる
データと、そのデータを扱う操作をひとまとめにした入れ物。バラバラの変数を「誰の何か」という単位で束ねて、扱いやすくするための仕組みです。
もう少し詳しく
どういうものか
オブジェクトは、関係のある値を名前つきでまとめ、その値に対する操作も一緒に持たせたものです。名前と値の組をプロパティ(属性)、オブジェクトが持つ操作をメソッドと呼びます。
userName、userAge、userEmail という三つの変数を持ち回る代わりに、user というひとつのオブジェクトにまとめる、というのが最も基本的な使い方です。
なぜ必要か
変数がバラバラだと、関数へ渡す引数が増え続け、順番を間違えても気づけません。まとまっていれば引数はひとつで済み、後から項目が増えても呼び出し側の書き換えが要りません。さらに、値とその値を正しく扱う手続きが同じ場所にあるので、「この配列は空でないことが前提」といった暗黙のルールがコードの中に閉じ込められます。
具体例
const user = {
name: "田中",
age: 28,
greet() {
return `${this.name}です`;
},
};
console.log(user.name); // 田中
console.log(user["age"]); // 28 変数でキーを指定したいときはこちら
console.log(user.greet()); // 田中です
user.email = "tanaka@example.com"; // 後から増やせる
delete user.age; // 消せる
for (const [key, value] of Object.entries(user)) {
console.log(key, value);
}つまずきやすいところ
代入がコピーではないところで多くの人がつまずきます。
const a = { count: 1 };
const b = a;
b.count = 99;
console.log(a.count); // 99 同じ実体を見ているb は a の複製ではなく、同じオブジェクトを指す別の名札です。複製したいなら { ...a } のように新しいオブジェクトを作ります。ただしこれで複製されるのは一段目だけで、入れ子のオブジェクトは共有されたままです。
存在しないプロパティを読むとエラーではなく undefined が返る点も見落としがちです。綴りを間違えても静かに undefined が流れていき、離れた場所で表示が空になります。
似た用語との違い
| 用語 | 関係 |
|---|---|
| クラス | オブジェクトを作るための設計図 |
| インスタンス | 設計図から実際に作られたオブジェクト |
| 配列 | 順番で取り出す入れ物。オブジェクトは名前で取り出す |
覚え方
配列が「番号で呼ぶ箱」、オブジェクトが「名前で呼ぶ箱」です。
