【JavaScript】オブジェクトのプロパティへのアクセス方法

JavaScriptでオブジェクト（ここでは、key-valueを持つJSON形式のオブジェクトを指します）のプロパティにアクセスする方法について解説します。

例として扱うオブジェクトはこの形とします。

const animals = {
    shopA: [
        { type: "dog", age: 5 },
        { type: "cat", age: 3 },
        { type: "parrot", age: 2 }
    ],
    shop_b: [
        { type: "hamster", age: 1 },
        { type: "rabbit", age: 4 },
        { type: "fish", age: 1 }
    ],
    "shop-c": [
        { type: "frog", age: 1 },
        { type: "mouse", age: 2 },
        { type: "gerbil", age: 3 }
    ]
};

ドット記法

ドット記法ではその名前の通り”."（ドット）を使ってプロパティにアクセスします。最も一般的な方法でしょう。

console.log(animals.shopA);
// [{ type: "dog", age: 5 }, { type: "cat", age: 3 }, { type: "parrot", age: 2 }]
console.log(animals.shop_b);
// [{ type: "hamster", age: 1 }, { type: "rabbit", age: 4 }, { type: "fish", age: 1 }]

オブジェクトにプロパティを追加したい場合も、同様の書き方が出来ます。

animals.shopD = [
    { type: "snake", age: 2 },
    { type: "lizard", age: 1 }
];
console.log(animals.shopD); // [{ type: "snake", age: 2 }, { type: "lizard", age: 1 }]

ただしこの記法では、ケバブケースののプロパティにはアクセスできません

console.log(animal.shop-d);
// ReferenceError: d is not defined

ブラケット記法

ハイフンを含むプロパティ名のプロパティにアクセスするためには、ブラケット記法を使います。

console.log(animals["shop-c"]);
// [{ type: "frog", age: 1 }, { type: "mouse", age: 2 }, { type: "gerbil", age: 3 }]

また、ブラケット記法はプロパティ名が入った変数を使用してアクセスする事も出来ます。

const shopName = "shopA";
console.log(animals[shopName]);
// [{ type: "dog", age: 5 }, { type: "cat", age: 3 }, { type: "parrot", age: 2 }]

オブジェクトにプロパティを追加したい場合も同様の書き方です。

const shopName = "shopE";
animals[shopName] = {
    normal: [
        { name: "Dog", price: 100 },
        { name: "Cat", price: 80 },
        { name: "Fish", price: 10 }
    ],
    secret: [
        { name: "Dragon", price: 1000 },
        { name: "Unicorn", price: 500 }
    ]
};

ネストした構造のオブジェクトにもアクセスしたいときはこうします。

const saleType = "secret";
console.log(animals[shopName][saleType]);
// [ { name: 'Dragon', price: 1000 }, { name: 'Unicorn', price: 500 } ]

【補足】ネストしたオブジェクトへのアクセス時の注意点

存在しないオブジェクトの、更に下の階層にアクセスしようとすると、このようなエラーが発生します。

console.log(animals.shopF.normal);
// TypeError: Cannot read properties of undefined (reading 'normal')
console.log(animals["shopF"]["normal"]);
// TypeError: Cannot read properties of undefined (reading 'normal')

このような場合、オプショナルチェイニング演算子（?.）を使うと、エラーを起こさずに実行する事が出来ます。

console.log(animals.shopF?.normal); // undefined
console.log(animals["shopF"]?.["normal"]); // undefined