(JavaScript) アロー関数について

Question

JavaScriptのアロー関数について、わからない表現がでてきたので、質問させてください。

Reactのコードを読んでいたら以下のような表現がでてきました。

const navigateOnce = getStateForAction => (action, state) => {
  const { type, routeName } = action;

  if (state && type === NavigationActions.NAVIGATE) {
    
    //直前のrouteNameと遷移先のrouteNameが同じであれば遷移無効化
    if(routeName === state.routes[state.routes.length - 1].routeName) return null;

  }
  return getStateForAction(action, state);
};

アロー関数は A = (args...) => {} という表現かと思っていたのですが、
今回は A = B => (args ... ) => {} となっており、AとBの関係をどう解釈すれば良いかわからない状態で困っています。Aの後にBを実行するのか？　A=Bとして同じ関数とみなすのか？ ... 混乱しております。どなたかアドバイスいただけますでしょうか。。よろしくお願いいたします。

Answer 1

数値nに1足してから２を掛ける関数で説明しようと思います。

アロー関数は A = (args...) => {} という表現かと思っていたのですが、

ということですので、以下は分かりますよね？

const addOneThenDouble = (n) => { return (n + 1) * 2; };
addOneThenDouble(5);
//=> 12

アロー関数は() => {return 式;}の時は() => 式と書くことが出来ます。

const addOneThenDouble = (n) => (n + 1) * 2;
addOneThenDouble(5);
//=> 12

また、(n) => n + 42のように、引数が唯一つのとき、n => n + 42のように引数部まわりのカッコを省略できます。

const addOneThenDouble = n => (n + 1) * 2;
addOneThenDouble(5);
//=> 12

ここで、数値nに1足してから２を掛ける関数を、数値nにX足してからYを掛ける関数に拡張してみようと思います。

const addXMulY = (x, y, n) => (n + x) * y;
addXMulY(1, 2, 5);
//=> 12

足す数、掛ける数が固定でnが様々に変わる場合、いちいち引数に1,2を与えなければならないのが面倒ですね。
そこで以下のように「XとYを引数に取り、「nにX足してからYを掛ける関数」を返す関数」を作ることができます。（念のため、「アロー関数だから」できるわけではありません。functionでもできます。アロー関数で書くとこうなります、ということです）

const addXMulY = (x, y) => n => (n + x) * y;
const add1Mul2 = addXMulY(1, 2);
add1Mul2(5);
//=> 12
// 途中関数を変数に保存せず以下のようにも書けます
addXMulY(1, 2)(5);
//=> 12

さらに進めて「Xを引数に取り、「Yを引数に取り、「nにX足してからYを掛ける関数」を返す関数」を返す関数」を作ることもできます。

const addXMulY = x => y => n => (n + x) * y;
const add1MulY = addXMulY(1);
const add1Mul2 = add1MulY(2);
add1Mul2(5);
//=> 12
// 途中関数を変数に保存せず以下のようにも書けます
addXMulY(1)(2)(5);
//=> 12

一番最後のものをfunctionで書き換えると以下になります。他のも書き換えてみてください。理解が進むと思います。

const addXMulY = function(x) {
  return function(y) {
    return function(n) {
      return (n + x) * y;
    };
  };
};
const add1MulY = addXMulY(1);
const add1Mul2 = add1MulY(2);
add1Mul2(5);
//=> 12
addXMulY(1)(2)(5);
//=> 12

Comments

[gano]

非常に分かりやすい説明ありがとうございます。
関数を引数にとったり、関数をreturnする関数は散々やっているのに、アロー関数で⇒ が２つでてきて頭混乱してしまいました。
よく頭整理できました。

Answer 2

古典となりつつある無名関数の書式に展開すると理解できるはずです。

const navigateOnce = function(getStateForAction) {
  return function(action, state) {
    const { type, routeName } = action;
    if (state && type === NavigationActions.NAVIGATE) {
      //直前のrouteNameと遷移先のrouteNameが同じであれば遷移無効化
      if(routeName === state.routes[state.routes.length - 1].routeName) {
        return null;
      }
    }
    return getStateForAction(action, state);
  }
};

---

無名関数から置き換わる中で覚えた特徴はこんな感じでした

関数の処理（=> の右辺）：
return が明確なとき、ブロック構文や return を省略できる

1. () => { ステートメント } ステートメントを処理するが、返値は void 0
2. () => { return ステートメント } ステートメントの結果を返す。
3. () => ステートメント 2. と同じ。省略できるので短く書ける

関数の引数：（=>の左辺）：
functionを省略でき、引数の個数が１だと括弧も省略できる。

1. () => {}; 引数なし
2. (引数) => {}; 引数が１つのとき。
3. 引数 => {}; 引数が１つのときは括弧を省略できる
4. (...args) => {} スプレッド演算子で引数を与える場合は複数扱い。

noop を書いてみる

• () => {} // 引数=1. 実装=1. の形式で
• () => void 0 // 引数=1. 実装=3. の形式で

Comments

[gano]

分かりやすい回答ありがとうございます。
=> を2つ使うという観点で アロー関数の文法規則を探していたのですがうまく検索できずでした。頂いたコメントで非常に頭が整理できました。ありがとうございます。

Answer 3

たぶんこうなのでは。

const A = ( B ) => { // B は引数として渡す関数
	return ( action, state ) => { // 最初のアロー関数に、アロー関数を返している
		return B( action, state ); // 最初の引数に入れた関数の結果を返す
	}
}