第6章
オブジェクト操作 — プロパティアクセスとObjectの静的メソッド
約4分
この章は現在執筆中です。公開までしばらくお待ちください。
この章で扱う範囲：プロパティアクセス（ドット記法・ブラケット記法）、動的キー、プロパティの存在確認（
in/hasOwn）、Object.keys/Object.values/Object.entries/Object.assign/Object.freezeなどの静的メソッド。 なお 分割代入・スプレッド構文 は分割代入とスプレッド構文（第9章）にまとめて扱います。
プロパティアクセス — ドット記法とブラケット記法
オブジェクトのプロパティにアクセスする方法は、大きく分けて ドット記法 と ブラケット記法 の2つです。
const user = {
name: '太郎',
age: 25,
};
console.log(user.name); // "太郎"
console.log(user['name']); // "太郎"js
ふつうの固定名なら user.name のようなドット記法が読みやすいです。一方で、プロパティ名を変数や式で組み立てたい場合は、obj[key] のように ブラケット記法 を使います。
const user = {
name: '太郎',
age: 25,
};
const key = 'name';
console.log(user[key]); // "太郎"
console.log(user.key); // undefined（"key" という名前のプロパティを探してしまう）js
動的キー — テンプレートリテラルをキーにする
オブジェクトを作るときも、キー名を変数やテンプレートリテラルで組み立てられます。この場合は、オブジェクトリテラル内で [式] を使います。これは 算出プロパティ名 と呼ばれる書き方です。
const id = 10;
const scores = {
[`user_${id}`]: 80,
};
console.log(scores.user_10); // 80
console.log(scores[`user_${id}`]); // 80js
user_${id} のようなテンプレートリテラルは文字列を作る式です。その式を「キー名」として評価してほしいので、[ と ] で囲みます。
const id = 10;
const bad = {
`user_${id}`: 80, // ❌ 構文エラー
};
const good = {
[`user_${id}`]: 80, // ⭕ "user_10" というキーになる
};js
読み出すときも同じです。キーを式で組み立てるなら obj[式]、固定名で書けるなら obj.key を使います。
const userId = 10;
const scores = {
user_10: 80,
user_11: 95,
};
console.log(scores[`user_${userId}`]); // 80js