女性向けエンジニアスクール
3秒でわかる
オブジェクトから値を取り出すための名前。連想配列でいうキーにあたり、どんな文字列が使えるかや読み方にいくつか決まりがあります。
もう少し詳しく
どういうものか
オブジェクトキーは、オブジェクトや連想配列に入っている値を取り出すための名前です。JavaScriptのオブジェクトは、キーと値の組を並べた入れ物で、キーには文字列かシンボルを使います。数値を書いた場合も内部では文字列に変換されます。Pythonの辞書、Javaのマップ、JSONのフィールド名も同じ役割で、キーで値を1件引くという操作はどの言語にもあります。
なぜ必要か
配列は0番、1番という位置で値を管理します。人の情報を配列で持つと、2番目が何だったかを覚えておく必要があり、項目を1つ挿入しただけで全部ずれます。キーで管理すれば、名前で意味が分かり、順番に依存しません。APIから返るJSONがオブジェクトの形をしているのも同じ理由で、項目が増えても既存の読み取り側が壊れないためです。
具体例
const user = { id: 1, name: "田中", "mail-address": "t@example.com" };
user.name; // ドット記法。使えるのは識別子として正しい名前だけ
user["mail-address"]; // ハイフン入りはブラケット記法で読む
const field = "id";
user[field]; // <a href="/glossary/variable" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">変数</a>でキーを指定できるのはブラケット記法だけ
const key = "score";
const record = { [key]: 90 }; // 計算したキーで作る
Object.keys(user); // ["id", "name", "mail-address"]
Object.entries(user).forEach(([k, v]) => console.log(k, v));つまずきやすいところ
存在しないキーを読んでも例外にならず undefined が返るため、綴りを間違えても静かに先へ進みます。user.nmae のような打ち間違いは、値が表示されない不具合として遠くで表面化します。TypeScriptを使うか、キーの一覧を定数にまとめると防げます。もうひとつは、キーが必ず文字列になる性質です。数値の1と文字列の"1"は同じキーになり、オブジェクトをキーに使うと文字列化されて全部同じ場所に上書きされます。オブジェクトや数値をそのままキーにしたいなら Map を使います。値がゼロや空文字のときに if (obj.count) で判定すると、キーは存在するのに無いものとして扱われます。存在の確認には in を使います。
似た用語との違い
| 語 | 意味 |
|---|---|
| キー | 値を引くための名前 |
| プロパティ | キーと値の組そのもの |
| インデックス | 配列で位置を指す数値 |
なお、クラウドストレージのS3では、バケット内でファイルを一意に指す名前をオブジェクトキーと呼びます。同じ語ですが別の話なので、文脈で読み分けます。
