ushumpei’s blog

生活で気になったことを随時調べて書いていきます。

アロー関数(Arrow function)の書き方色々

 アロー関数は引数や戻り値の種類によって色々な書き方ができます。分割代入を使うことで柔軟な関数をシンプルに宣言できてとても気持ちいです。

 基本的な書き方から、やや直感的ではない書き方まで、メモしていこうと思います。

ざっくり

 アロー関数の記述方法は、引数に関しては、引数なし、引数1、引数N、引数オブジェクトリテラルによる分割代入、の4種類があります。関数の処理部分に関しては波括弧、括弧なし、丸括弧の3種類があります。

  • 引数1、括弧なし
  • 引数N、丸括弧
  • 引数オブジェクトリテラルによる分割代入、丸括弧
  • 引数なし、波括弧

 を並べてみます。

引数1、括弧なし

 引数が1のときは、引数の括弧は省略できて、右側が評価され戻り値が返ります。Promiseのcatchとかすっきりします。

const factorial = n => (n > 0) ? n * factorial(n-1) : 1;

引数N、丸括弧

 引数N個は単純にfunctionのときと同じように並べるだけです。戻り値にオブジェクトリテラルを返したいときに丸括弧を使うとすっきりです。

let projection = (a, b) => ({ 
  x: (2 * a) / (1 + a * a + b * b),
  y: (2 * b) / (1 + a * a + b * b),
  z: (-1 + a * a + b * b) / (1 + a * a + b * b),
});

引数オブジェクトリテラルによる分割代入、丸括弧

 上の例と近いです。ただ引数個数が頻繁に変わる可能性がある場合この記法がいいようです。ですが、個人的に好きなので何でもかんでもこれで書きたいです。Reactの純粋な関数スタイルのコンポーネントを書いたりするとき便利です。

const Deco = ({ deco, children }) => (
  <div>
    {deco + children + deco}
  </div>
);

 呼び出すときは引数で代入しているプロパティをもったオブジェクトを渡せば大丈夫です。引数いっぱいなのは嫌だけど、オブジェクトまるまる渡したら何されるかわからない、といった不安を綺麗に取り去ってくれます。

引数なし、波括弧

 グローバルなオブジェクトに対して何かしたいときに使う、気がします。波括弧なので複数行書くことができます。

const values = () => {
  const inputs = [...document.querySelectorAll('input')];
  const values = inputs.map(input => input.value)
  return values;
};

感想

 戻り値に関して補足です。1行で済む場合は括弧なしか丸括弧、複数行必要なときは波括弧でいいと思います。

 引数オブジェクトリテラルによる分割代入は、修正による影響を少なくできるし、オプションのようなものを渡すことが簡単にできるのでかなり好きです。

 説明の中で複数行とか言っていますが、宣言とか式とか、ちゃんとした言葉をいい加減覚えなければいけないなと思います。