JavaScriptで動的に関数を指定する

はじめに

JavaScriptで実行する関数をif文で振り分けるのではなく変数で指定する方法を示す。

動的に関数を指定する

参考にしたのがこちら。

基本のかたち

連想配列とか辞書とか呼ばれるキーと値から構成される配列で、値として関数を指定する。
関数を直接記載するのではなく、「関数を呼び出す」という内容の無名関数を指定する。

基本

var doSomething = {
    "A": function(){funcA();},                        // 関数を呼び出すやり方
    "B": function(){console.log("Bが実行された");},    // 直接記載するやり方
    "C": funcC(),                                     // こう書くと定義された瞬間に呼び出されてしまうようだ
};

function funcA(){
    console.log("Aが実行された");
}

function funcC(){
    console.log("Cが実行された");
}

// キーの変数で関数を呼び出す
var funcName = "A";
doSomething[funcName]();

// 変数を使わないならこう書いてもよい
doSomething.B();


//以下、実行結果
Cが実行された
Aが実行された
Bが実行された

引数を使う

関数に引数を使うときはこうする。
hogeよりも明示的に変数であることをあらわす変数名は…hensuだ！ hensuしかない！

引数あり

var doSomething = {
    "A": function(x){funcA(x)},
};

function funcA(x){
    console.log("Aが実行された：引数は" + x);
}

var funcName = "A";
var hensu = 123;
doSomething[funcName](hensu);


//以下、実行結果
Aが実行された：引数は123

関数の戻り値を利用する

連想配列の各キーの値は「関数を呼び出す」という内容の無名関数。だから呼び出された関数がreturnで戻り値を返すだけでは駄目。呼び出された関数だけでなく無名関数にもreturnが必要だ。

戻り値を活用

var calc = {
  "+": function(a, b){return funcAdd(a, b)},  // 正しい
  "-": function(a, b){funcSubtract(a, b)},    // 正しくない：undefinedを返す
  "*": function(a, b){return a*b},            // 正しい
};

function funcAdd(a,b) {
  return a+b;
}

function funcSubtract(a, b) {
  return a-b;
}

var ans = calc["+"](5, 2);
console.log(ans);

//以下、実行結果
7

オチ

これを活用して、DateオブジェクトからgetDate()やgetHours()といった個別のメソッドを呼び出すのではなく、引数として"d"を指定してやれば日付を返し"H"を指定してやれば時を返すような独自関数を作ることを考えた。というか見事に作り上げた。
そして記事を書こうとして、その途中でMoment.jsを知り、自分がこれまでおこなってきたことが無駄だったと知ったのだった。

私の場合、VBAやPythonなど他言語も正しい教材で学んだわけではないが、特にJavaScriptに関してはつまみ食いの傾向が強かった。桃鉄ガチャを作ったときにjQueryを知ったが、そのときに「JavaScriptには便利な外部ライブラリがありそれを取り込んで使うことができる」ことをより汎用的に学んでおけばこのような二度手間もなかったのだが。

終わりに

これはこれで良しとしよう。私は経験を積んだのだ。