JavaScriptのオブジェクトのプロパティに変数を指定する方法と取得する方法

JavaScript

Javasciriptのオブジェクトのキー値に変数を指定したい場合が多々あります。キー値に同じ文字列を毎回指定するとメンテナンスが煩雑になったり、手間が増え非効率です。

そこでオブジェクトのキー値を一括で変数にまとめてしまう方法を解説します。
Javasciriptのオブジェクトについては『JavaScript オブジェクトとは何か?概要と記述方法を基礎から解説』を、Object型については『JavaScriptにおけるObject(オブジェクト)型』に詳しくまとめてありますので併せてご覧ください。

オブジェクトのキーに変数を指定する方法

まずおさらいになりますがオブジェクトの基本形は以下のようになります。

let user = {
  "name": "mangataro",
  "age": 17,
  "gender": "male",
  "phone": "080-XXXX-XXXX"
};

userオブジェクトを定義し、ブラケット表記法やドット表記法でプロパティにアクセスする基本形です。ブラケット記法とドット記法については『JavaScript オブジェクトとは何か?概要と記述方法を基礎から解説 3.プロパティの取得』を参照してみてください。

上記サンプルで例えば"name"というキー値を変数で表現したい場合、最も単純で直感的な方法は次のように記載します。

const name = "username";

let user = {
  [name]: "mangataro", // []で変数名を囲んであげる
  "age": 17,
  "gender": "male",
  "phone": "080-XXXX-XXXX"
};

console.log(user);

最初のサンプルではキー値を"name"という文字列で指定していましたが、今回のバージョンでは[name]という表記に変更してあります。この「[]」の中に変数名を指定してあげるとうまく動作します。

上記、キー値を変数で指定したオブジェクトをログに出力すると次のようになります。

// console.log(user)の出力結果
{
  "username": "mangataro",
  "age": 17,
  "gender": "male",
  "phone": "080-XXXX-XXXX"
}

きちんとnameに”username”が指定されていることが分かりますね。

オブジェクトのキー値に変数を指定する別の方法はブラケット表記法による記述です。上記サンプルは次のようにも書くことが出来ます。

const name = "username";

let user = {
  "age": 17,
  "gender": "male",
  "phone": "080-XXXX-XXXX"
};

user[name] = "mangataro"; // ブラケット表記法で別途追加してあげる

console.log(user);

この場合、userオブジェクトは

// console.log(user)の出力結果
{
  "age": 17,
  "gender": "male",
  "phone": "080-XXXX-XXXX",
  "username": "mangataro"
}

となり、オブジェクトの末尾に"username": "mangataro"が追加されます。プロパティにアクセスする際は順序はほぼ気にすることはないのでこの方法でも同様の結果が得られると考えてOKです。

どちらが良いかは好みによりますが、個人的には前者が利用できる場合には前者にした方が誤認のリスクが無くなるのではないかと思います。

変数で指定したキーにアクセスする方法

先ほどのサンプルを少し書き換えてみます。

const name = "username";

let user = {
  [name]: "mangataro", // []で変数名を囲んであげる
  "age": 17,
  "gender": "male",
  "phone": "080-XXXX-XXXX"
};

console.log(user[name]); // キー"username"のプロパティにアクセス

変数でプロパティにアクセスする際には必ずブラケット表記法を用います。ドット表記法にすると下記のようになりますが、"name"がないよ、というundefinedが返されてしまうので注意が必要です。

console.log(user.name); // ドット表記法ではundefined

console.log(user.username); // mangataro

説明は不要かと思いますが、この場合userオブジェクトのキーnameを指定してしまっているため、定義されておらず、undefinedとなります。user.usernameであればmangataroが取得可能ですね。

結論としては、変数を使ってプロパティにアクセスするには必ずブラケット表記法のオブジェクト[変数名]という形をとる必要があります。

タイトルとURLをコピーしました