【JS】アロー関数の解説と小ネタ

こんにちは！今日は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より使用可能になりました!

挙動は従来型の関数式および関数宣言とほぼ同じです(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派ですが、個人的にはとても面白いと思いました。

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