こんにちは！今日はES6(ES2015)で追加されたJavaScriptの仕様の一つ、アロー関数について 従来型の表記と比較して解説したいと思います。今更

今回は関数plus1を例として利用します。数字渡したら1足して返ってくる関数です

ES6以前

ES6以前のJavaScriptでは、このような表記が一般的だったんじゃないでしょうか？

var plus1 = function(n){
  var answer = n + 1;
  return answer;
}

非常にシンプルで分かりやすい！ですが、少し長いですね。 answerは省略しても...

var plus1 = function(n){
  return n + 1;
}

やっぱりちょっと長いですね。色々つけ忘れそうです。()とか

今度は関数宣言にしてみます。 関数宣言ならもう少し分かりやすくなる...かな？

function plus1(n){
  return n + 1;
}

多少短くなりましたが、まだまだあんまり... というかPHP臭がすごいですね :)

ES6以後

こんにちは。アロー関数です。 アロー関数はこれ=>を使って表記する記法で、ES6より使用可能になりました!

挙動は従来型の関数式および関数宣言とほぼ同じです(thisの解釈がちょっと違います)

アロー関数を使えばほらシンプルに...

var plus1 = (n) => {
  return n + 1;
}

...あんまり変わらないと思った貴方。アロー関数の真骨頂はここからよ。

どんどん短くなるアロー関数

ES６で策定されたものの一つにconstがあります。constについては割愛しますが、 関数式のvarはほぼ全部constに変えてもokです。こんな風に

const plus1 = (n) => {
  return n + 1;
}

次にセミコロンを取りましょう。JavaScriptの自動セミコロン挿入機能を活用します。

セミコロンの省略は機能としては昔から存在し、使用については賛否両論あるものの 近年は許されてきた感があるんじゃないかしら？私も省略する派です。

const plus1 = (n) => {
  return n + 1
}

次に省略するのは()です。アロー関数は引数が1つの時()を省略可能です。 JavaScriptに限らず引数はなるべく1つになるように書くといい感じですね :)

const plus1 = n => {
  return n + 1
}

最後に{}とreturnも取っちゃいましょう。アロー関数は{}が無い場合最初の式をreturnします。 今回はn + 1のみをreturnするので...

const plus1 = n => n + 1

綺麗...最初の4行がついに1行になりました。 この書き方は特に関数の処理がシンプルな時に有用です。関数型でもよく見る書き方ですね。

余談

改行できます。これ以外と知らない人いる

// OK
const plus1 = n =>
  n + 1

ちなみにセミコロン自動省略時のreturn以降は改行できないです。 この2つが混ざるんですよねー

// NG
const plus1 = n => {
  return
  n + 1
}

また、戻り値がオブジェクトのときは()が必要です。 こっちは結構有名

// NG
const plus1 = n =>
  {
    answer: n + 1
  }
// OK
const plus1 = n =>
  ({
    answer: n + 1
  })

最近関数式をletで書いてる人を見ました。

let plus1 = n => n + 1

letは再代入可能だからやや危険ですが、2文字短くなるのと 関数と定数でlet/constで分けられるのがメリットでしょうか？ PythonやRubyだと関数と定数は 何もなし/def ですからねー 私は全部const派ですが、個人的にはとても面白いと思いました。

みんなもアロー関数、しよう！