javascript関数名をfor文でループ処理させたい

Question

前提・実現したいこと

現在javascriptファイルにtest1,test2,test3という関数があります。

そのjavascriptファイルを読み込んでいるviewをリロードした時、下記（修正前）の関数が呼び出されるように行いたかったので以下（修正前）のような記述をし、リロードしたところ関数はしっかり呼び出せました。

しかし、３つとも似たような関数名だったのでループ処理でリファクタリングしようと思いましたが、関数名の一部だけをiに書き換えてループ処理をしたことが自分は初めてだったので、とりあえず式展開などを行ったり試してみましたが（下記に記述の修正後コード）、関数を呼び出すことができず、解決に至らなかったので対処法をご教示願いたいです。

修正前

$(function() {
	test1();
	test2();
	test3();
});

修正後

$(function() {
	for (var i=1; i<4; i++) {
		test`${i}`();
	}
});

Answer 1

ちょっとサンプルを作ってみました。
処理が、初期化(init)、実行（exec）、後始末（final）の3つに分かれているとして、それぞれの関数をfoo_init、foo_exec、foo_finalと仮定します。hentaimanさんが指摘されているように、evalを使えば、これらをループで呼び出すこと自体はできます。

function foo_init() { console.log('init') }
function foo_exec() { console.log('exec') }
function foo_final() { console.log('final') }

var funcnames = ['init', 'exec', 'final'];
$(function() {
  for (var i = 0; i < 3; i++) {
    eval("foo_" + funcnames[i] + "()");  // 関数呼び出しを文字列として作りevalで呼び出す
  }
});

しかし、このプログラムには以下の問題があります。

• ループにしない単純なプログラムと比べて読みにくく、理解しづらい
• evalを使うこと自体は非常によくない（特にセキュリティ上の問題が大きい）

evalを使うことの問題については、以下のQ&Aが参考になると思います。

JavaScript - eval｜teratail

evalを使わないだけなら、以下のように「関数の配列」を使っても書けますが…

funcs = [
  function() { console.log('init') },
  function() { console.log('exec') },
  function() { console.log('final') },
];

$(function() {
    for (var i = 0; i < 3; i++) {
        funcs[i]();
    }
});

はたしてこのプログラムは前よりも改良されているでしょうか?単に以下でよいと思います。

function foo_init() { console.log('init') }
function foo_exec() { console.log('exec') }
function foo_final() { console.log('final') }

// 中略

foo_init();
foo_exec();
foo_final();

こうすれば、初期化・実行・後始末を順に呼んでいるのだなということがひと目で分かります。
ということで、そもそも「リファクタリング」の方向性が妥当でないのではないかという疑問を持ちました。

Comments

[Homaresan]

ご回答ありがとうございます！eval初めて知りました！eval()には色々問題があるみたいなので、回答を参考にしながらどのように記述するか自分でもう少し考えて見ます！

Answer 2

飽くまでそういうループの仕方で実行したいならeval
リンク先をよく読んでから使うかどうか判断しましょう
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/eval

でも似たようなfunction名だからという理由だけならちゃんと定義通りの名前で呼んだ方が良いです
似たような機能だからまとめたいという目的があるなら各functionをひとつの配列にまとめてしまえば質問に書いてあるコードに近い書き方でできます

Comments

[Homaresan]

ご回答ありがとうございます！eval初めて知りました！eval()には色々問題があるみたいなので、回答を参考にしながらどのように記述するか自分でもう少し考えて見ます！

Answer 3

トップレベルで定義された関数、かつより狭いスコープに同名の関数がないという条件であれば、以下のような関数を作れば動かせると思います。
可能というだけでよい書き方かは別ですが…

var defineTemplateAccessorFunc = name => {
  window[name] = (strs, ...vals) => window[name + String.raw({raw: strs}, vals)];
};
defineTemplateAccessorFunc('test');


$(function() {
    for (var i=1; i<4; i++) {
        test`${i}`();
    }
});

Comments

[Homaresan]

ご回答ありがとうございます！今回の場合はトップレベルで定義された関数、かつより狭いスコープに同名の関数がないという条件に当てはまるので参考にさせていただきます！

Answer 4

ockeghem さんの発展

// 実際の関数を格納したオブジェクト
var view = {
  init : function () { console.log('init') }
, exec : function () { console.log('exec') }
, final: function () { console.log('final') }
}

// 関数名を配列に格納
var types = ["init", "exec", "final"];
, fname
, i
;
for( i=0; i<3; ++i ) {
  fname = types[i];
  view[fname]();
}

Comments

[Homaresan]

ご回答ありがとうございます！なるほど！そのような書き方もあるんですね！参考にさせていただきます！

Answer 5

なんの解決にも繋がりませんがsetTimeoutのようなレガシーな関数の
「コールバックを文字列で指定できる」という今となっては
半分バグのような仕様を利用すれば、動かすことはできます

ただし非同期処理の調整などより煩雑になるのでよい選択肢ではありません
（一応できるというだけの話）

const test1=()=>{console.log("responce1");};
const test2=()=>{console.log("responce2");};
const test3=()=>{console.log("responce3");};
for(var i=1;i<=3;i++){
  setTimeout(`test${i}()`,0);
}

あ、たしかにグローバルな関数ならwindowの引数で指定できますね

function test1(){console.log("responce1");};
function test2(){console.log("responce2");};
function test3(){console.log("responce3");};
for(var i=1;i<=3;i++){
  window["test"+i]();
}

Comments

[Homaresan]

ご回答ありがとうございます！グローバルな関数ならwindowの引数で指定する方法を試してみます！

Answer 6

スマホからなので簡単に。
関数を配列に入れてから呼び出すと、関数名に規則性無くても順次呼び出さますよ。
https://qiita.com/_shimizu/items/ae97c4f3208a7c10134a

Comments

[Homaresan]

なるほどです！ご回答ありがとうございます！