引数の括弧が3つある下記のような関数を見かけたのですが、これはどのような時に使用されるのでしょうか。
なぜ通常の const hoge =(h1, h2) => {}
という書き方との違いはなんでしょうか。
何も出力されないです。
const hoge = (h1) => (h2) => () => {
console.log(h1);
console.log(h2);
}
hoge('わたしは')('さるだ')
// 実行結果
const hoge = (h1, h2) => { ほにゃらら }
では「引数を 2 つ受け取って実行結果を返す関数」が定義されますが、const hoge = (h1) => (h2) => { ほにゃらら }
では「引数を 1 つ受け取って、『引数を 1 つ受け取って実行結果を返す関数』を返す関数」が定義されます。
たとえば h1
を固定した上で h2
を色々変化させて実行したくなったときにはこのような実装にしたくなる場合があります。つまり const fuga = hoge('わたしは')
と代入してしまって fuga('さるだ')
とか fuga('ひとだ')
とか実行する場合です。hoge
がとても抽象的な関数になっている場合で分かりやすさを得られることがあります。h2
まで含めて関数呼び出ししないと「ほにゃらら」部分が評価されない(実行されない)という性質をうまく使っています。
また、今回の質問に載っている関数は、更にもう 1 つネストして const hoge = (h1) => (h2) => () => { ほにゃらら }
という形になっています。このため関数呼び出しを 3 回やらないと「ほにゃらら」部分は評価されません。このため hoge('わたしは')('さるだ')
だけではコンソールログに出力されなくて、hoge('わたしは')('さるだ')()
までやらないといけません。
アロー関数が3つ並んでいるので関数が3つ定義されているだけです。
ES5に適用させると以下のようになります
var hoge = function hoge(h1) {
return function (h2) {
return function () {
console.log(h1);
console.log(h2);
};
};
};
もとのソースコードはわからないですが、何らかの関数を連続して呼び出して処理したいのでしょう。
アロー関数がわからなければ、
babelのオンライン変換を用いて、ES5に変換して確認してみるとよいでしょう。
https://babeljs.io/repl/