ES6の文法でわからないところが

Question

コードがわからなくて困っております。

ちなみにこれはreact-reduxのコードを見ております。

arrow関数が連続で使用されている場合どの順番で評価されて行くのか理解できないです。

function createThunkMiddleware(extraArgument) {
  //このreturnでarrow関数を呼び出してnextもactionも多分関数なのでしょうか?どのようにかんがえたらよいのか。。。
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

上のコードの2行目のところが何をやっているのかわからなくて困ってます。

ES5風に書くと

return function({dispatch, getState}){
  next({dispatch, getState}){
    action({dispatch, getState})
  }
}

のような処理が実行されているということでしょうか?

ちなみにこれはreact-reduxのコードを見ております。
宜しくお願い致します。

Answer 1

この書き方は関数型プログラミングでよく使われるカリー化された関数の作り方です。

例えば、

const f = x => y => z => x + y + z;
console.log(f(1)(2)(3));

これは右から左に結合されて、

const f = (x) => {
  return (y) => {
    return (z) => {
      return x + y + z;
    };
  };
};
console.log(f(1)(2)(3)); // => 6

と解釈され、ES5に変換すると

var f = function f(x) {
  return function (y) {
    return function (z) {
      return x + y + z;
    };
  };
};
console.log(f(1)(2)(3));

となります。実際にBabelで変換してみて、どうなるかを見てください。

カリー化された関数というのは関数を返す関数、いわゆる高階関数の一種です。この関数は、引数を一つ取り、引数を一つ取る関数を返します。無限にネストすることができますので、どんどん深めることができます。複数の引数を取る関数との違いは、簡単に部分適用することができると言うことです。上の例ですが、

const f = x => y => z => x + y + z;
const g = f(1);
console.log(g(2)(3)); // => 6
console.log(g(4)(5)); // => 10

というような書き方ができます。

その他、これがどのように役に立ち、どのように振る舞うかというのはちょっと言葉では言い表せないです。たぶん、Haskell等の本物の関数型言語で関数型プログラミングを学ばないと感覚的な物はつかめないと思います。JavaScriptは関数型言語としての最低条件のもの(関数が第一級オブジェクトであると言うもの)はありましたが、言語としては決して関数型プログラミングしやすい物ではありませんでした。ES6以降に追加されたアロー関数やRamda等便利なライブラリを使うことで、なんとか関数型プログラミングが可能な物になってきています。そのため、Redux等の最近のライブラリは関数型プログラミングの考えを取り入れた物が多くなっているようです。

Answer 2

とりあえず使ってみました。

var _お寿司屋さん = createThunkMiddleware('さび抜き')
({dispatch:'まぐろ', getState:2})
(
  () => alert('売り切れだよ！')
);

_お寿司屋さん(
  (x,y,z) => alert(`${x}${y}貫おまち！${z}ね！`)
);
//まぐろ2貫おまち！さび抜きね！

_お寿司屋さん('品切れ');
//売り切れだよ！

Answer 3

実行結果としては関数が返る形です。
なので、thunkの中には関数が入っています。

function createThunkMiddleware(extraArgument) {
  return function({dispatch, getState}) {
    return function(next) {
      return function(action) {
        if (typeof action === 'function') {
          return action(dispatch, getState, extraArgument);
        }
        return next(action);
      };
    }
  }
};

const thunk = createThunkMiddleware();

/*
function({dispatch, getState}) {
    return function(next) { (略) }
}
*/

さらにthunkを実行すると、1つ内側の関数が返されます。
基本はそれだけです。

thunk();

/*
function(next) {
 return function(action) {(略)};
}
*/