JavaScriptの連想配列でキーを動的に作成する方法

JavaScriptにおける連想配列は、実体としてはオブジェクトリテラルそのものです。キーが文字列であれば、角括弧（ブラケット）記法を使うことで、オブジェクトに動的に新しいキーを追加できます。この記事では、その具体的な方法をサンプルコードとともに解説します。

連想配列（オブジェクト）への動的なキー追加

JavaScriptのオブジェクトは、キーと値のペアを保持できるため、他言語でいう「連想配列」や「ハッシュマップ」として機能します。あらかじめ定義されていないキーでも、実行時に文字列として指定すれば自由に追加できます。

サンプルコード

let a = {
  name: 'Ayush'
};
let key = 'age';
// 存在しないキーを動的に追加する
a[key] = 35;
console.log(a);

実行結果

上記のコードを実行すると、以下の出力が得られます。

{ name: 'Ayush', age: 35 }

ポイント解説

• ドット記法との違い：ドット記法（a.age = 35）でも同じことができますが、キー名が変数に入っている場合や、スペース・特殊文字を含むキーを使いたい場合は、角括弧記法（a[key]）が必須です。
• 変数をキーとして使える：上の例のように、key 変数の値がそのままプロパティ名になります。ループ処理などで複数のキーを順次追加したい場合にも便利です。
• ES2015以降の代替手段：計算されたプロパティ名（computed property names）を使えば、オブジェクトリテラル作成時にも { [key]: 35 } のように書けます。また、キーが常に文字列とは限らない場合は Map オブジェクトの利用も検討しましょう。