JavaScriptで変数名を動的に生成する方法を解説！
JavaScriptで変数名を動的に生成する方法をサンプルコード付きで解説します。変数定義の「var num_{i}」のiの部分をすでに存在している変数の値を使って動的に生成する方法を紹介します。
JavaScriptで変数名を動的に生成したい
JavaScriptでは変数は通常下記のように変数名の文字列は自ら記述して、その変数名をイコールでつないで、数値や文字列などの値を代入するのが一般的な変数の定義の記述です。
JavaScriptで変数の代入
var price = 100;
var name = "鈴木";しかし時に、すでに変数に格納されている文字列や数値の値を使って新たな変数を作りたい時があります。このように変数名に対してすでにある変数を組み込んで動的に生成する変数を可変変数と言います。
この記事では変数名を動的に生成する可変変数の作り方を解説していきます。
JavaScriptで変数名を動的に生成する方法
それでは早速JavaScriptで変数を動的に生成する方法を見ていきましょう。
下記のサンプルコードを見てみましょう。
console.jsはconsole.logの結果を表側（ブラウザ上）に表示するためのJSです。index.jsの処理が本体になります。
動的な変数名を設定している記述
// すでに設定されている「name」の値を使い変数を作成
eval("var user_" + name + " = 'hogehoge';");
evalは引数で渡された文字列をJavaScriptのコードとして評価します。つまり内部に渡されたnameという変数も展開され下記のように評価されます。
evalの内部に渡された文字列
// すでに設定されている「name」の値を使い変数を作成
var user_suzuki = 'hogehoge';
あとは変数の情報をconsole.logとして出力しているだけです。
いかがでしょうか。このようにevalを使うと動的な変数名を生成することが出来ます。
forを使ってループで複数の動的な変数名を生成
では次にforを使ってループで複数の動的な変数名を生成して変数に値を代入してみましょう。
上記のサンプルコードでもindex.jsの中で動的な変数名を生成しています。forで0〜4までをループで回し、その値を使って「num_●」という変数に値を代入しています。
このようにループで一括で動的な変数名を生成することも出来ます。
