2016/10/12

【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.');
  }
}



参考サイト



以上

written by @bc_rikko

0 件のコメント :

コメントを投稿