javascriptで動的に変数名を作成・宣言したい時，例えばfor文で次々に変数を作成・宣言したい時の方法を知りたいのですが、eval以外の方法はありますか？

evalを使った時

jQuery
1for (var i = 0; i < 10; i++) {
2　　eval("var num" + i + "=" + i + ";");
3}

m.ts10806

2020/04/29 12:22

「JavaScript 変数　動的」で調べて出てくる情報では何か不足してますか？

hase_

2020/04/29 12:39

evalを使うという情報は取得しましたが、パフォーマンスも悪く、セキュリティにも問題があるという記事が多かったので質問させていただきました。

m.ts10806

2020/04/29 12:40

teratail内でもそれなりにあるので、ネット上だともっとあると思います。 https://teratail.com/search?q=%E5%A4%89%E6%95%B0+%E5%8B%95%E7%9A%84+tag%3AJavaScript

hase_

2020/04/29 12:48

参考記事ありがとうございます！

m.ts10806

2020/04/29 12:49

いえ、見てもらったら分かりますが、記事ではなく、teratail内の検索結果です。 Googleなど検索エンジンにかけるときと同じく、「過去に誰も質問しなかったかどうか」を質問前に検討してもらいたいのです。

hase_

2020/04/29 13:29

かしこまりました。ご教授ありがとうございます。

行動規範の内容に同意します

回答3件

「変数名を動的に付けたい」と思った場合、その思ったこと自体が90%以上のケースで間違っていますので、そもそものやりたいことに立ち戻って考えなおしましょう。
初心者の場合は100%です。

投稿2020/04/29 12:52

otn

総合スコア85949

hase_

2020/04/29 12:55

コメントありがとうございます。もう一度学び直してきます。

otn

2020/04/29 13:03

例えば、質問のコードだと、配列で良いはずですよね。

行動規範の内容に同意します

ベストアンサー

new Function

eval以外の方法はありますか？

Function コンストラクタで動的に引数名、変数名を定義することは可能です。

JavaScript
1new Function("a", "b", "c", "var x = a+b+c; return x;")(1,2,3); // 6

ただし、evalはStrict Modeでローカル変数を制限不可能になり、new Function も関数スコープに限定されます。

グローバル変数

グローバル変数は「グローバルオブジェクトのプロパティ」として定義される為、プロパティ名を動的指定することで、グローバル変数を動的生成は可能です。
が、グローバル変数は名前衝突のリスクがある為、お勧めしません。

HTML
1<script>
2'use strict';
3this.a = 1;
4this.b = 2;
5this.c = 3;
6
7console.log(a, b, c); // 1 2 3
8</script>

keyを動的指定する

JavaScript
1for (var i = 0; i < 10; i++) {
2　　eval("var num" + i + "=" + i + ";");
3}

こういう使い方をするなら、下記のプロパティ(キー)を動的に変更するコードが好ましいと感じます。

オブジェクト
配列
new Map

JavaScript
1var o = {}, a = [], m = new Map;
2
3for (var i = 0; i < 10; ++i) {
4  o[i] = i, a[i] = i, m.set(i, i);
5}
6
7console.log(JSON.stringify(o)); // {"0":0,"1":1,"2":2,"3":3,"4":4,"5":5,"6":6,"7":7,"8":8,"9":9}
8console.log(JSON.stringify(a)); // [0,1,2,3,4,5,6,7,8,9]
9console.log(JSON.stringify([...m])); // [[0,0],[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7],[8,8],[9,9]]

以下、参考情報。

Re: hase_ さん

投稿2020/04/29 12:30

編集2020/04/29 13:39

think49

総合スコア18189

hase_

2020/04/29 12:50

コメントありがとうございます！オブジェクト配列 new Map の理解がまだできていないので、勉強してきます。

think49

2020/04/29 13:09

オブジェクト、配列、new Mapのプロパティ名(new Mapならkey名)は、変数や文字列などの任意の名前を指定可能です。親記事にコードを追記しました。

行動規範の内容に同意します

二つ、方法を提示しようと思います。

jQueryの質問タグがあることから、ウェブブラウザ実行のJSとします。

windowオブジェクトのプロパティとして定義

ウェブブラウザ実行の場合、すべての変数は、
varで宣言している、宣言子を使わないで変数宣言している場合、windowオブジェクトのプロパティとして宣言されるので、
[]を使い、プロパティ名に文字列を使います。

javascript
1for (var i = 0; i < 10; i++) {
2  window["num" + i] = i;
3}

こうすることによって、ルートに宣言されるため、
num1などの変数名のみで呼び出せます。
（letならびにconstでの宣言は、ルートでの宣言であっても、windowオブジェクトのプロパティとはならない。つまり、上記の宣言の仕方はできない）

Object.definePropertyを使う方法

これは、第一引数のオブジェクトのプロパティとして、定数（constで定義したと同じような仕様の変数）を定義するものです。
下記のように、オプションを設定すれば、varで宣言したものと同じ仕様の変数の定義が可能です。

javascript
1for (var i = 0; i < 10; i++) {
2  // 第一引数に変数を入れたいオブジェクト、第二引数に、変数名を文字列で指定
3  Object.defineProperty(window, "num" + i, {
4    configurable: true, // 変数の削除などを許可
5    enumerable: true, // 通常変数として列挙される
6    writable: true, // 再代入の許可
7    value: i // 値
8  });
9}