【JavaScript】変数を使って関数名を動的に指定する方法

let MY_FUNC = 'myFunction' という変数や定数を使って、関数名を指定したい場合がある。
たとえば、FluxライクなVuexライブラリで、mutation-typesにアクションの名前を定義し、actionやstoreのmoduleなどで同じ関数名を使いまわすときなどだ。

ということで、このMY_FUNCという変数を関数名として定義する方法をまとめる。

変数を関数名に指定する

const MY_FUNC = 'myFunction';

// シンタックスエラーになる
MY_FUNC () {
  console.log('myFunction was called.');
}

// シンタックスエラーにならないが、関数名が"MY_FUNC"になる
const actions = {
  MY_FUNC: () => {
    console.log('myFunction was called.');
  }
};

// actions.myFunctionで呼び出し可能
const actions = {
  [MY_FUNC]: () => {
    console.log('myFunction was called.');
  }
};

17行目のようにMY_FUNCを[]で囲むと、変数の中身が関数名として使われる。
これは、ES2015（ES6）で新たに追加された「Computed property names」という機能だ。
大カッコ（Boc branckets/Square branckets）を使うことで、動的にオブジェクトのキーを指定することができる。

呼び出しは、以下の2通りが考えられる。
変数を使っているんだから、フツーは後者が使われる。

actions.myFunction();
actions[MY_FUNC](); 

おまけ

通常、オブジェクトリテラルを書くときは、 { key: value } のようにする。
だが、これまたES2015（ES6）から追加された機能を使うことで、 { key () { ... } } のように指定することができる。
関数名がkeyに、関数がvalueに自動的に分解されるイメージだ。

const actions = {
  hoge: () => { console.log('hoge') },
  fuga () { console.log('fuga') }
}

actions.hoge();
actions.fuga();

そのため、この機能を使うと、今回紹介したactionsオブジェクトを以下のように書くことができる。

const actions = {
  [MY_FUNC] () {
      console.log('myFunction was called.');
  }
}

参考サイト

• Object initializer#Computed property names | MDN
• Object initializer#メソッドの定義 | MDN

以上

written by @bc_rikko