僕はArrow functionが読めない

はじめに

RubyからJavascriptに手を広げている時、Rubyに比べてJSはコードが読みにくいと感じた。
特に Arrow function(無名関数) についてはしっくり理解できるまで時間がかかったので、同じ道を通るかもしれない人に向けて記録を残しておこうと思う。 また、関数で頻繁に使用されている、省略記法が基礎が出来ていない状態で障害になっていたと感じる。

対象となる読者

Javascriptを初めたばかりの方

Arrow functionの利点

1. 短く記述出来る

function(){...} vs. () => {...}

2. 関数名を記述しなくて良い

Arrow functionは　Anonymous である。

Anonymous functions usually don't have a named identifier

1については、メリットが理解しやすいが、2については文章を見ても直ぐにはしっくり来なかった。
2について具体例を出して考えていく。

function blastoff() {
  console.log("3...2...1..blastoff!");
}

blastoff();

結果
=> 3...2...1..blastoff!

ここでは関数名に blastoff という固有の名前がつけられている。
次は、1秒後にconsoleの中身が返ってくるように setTimeout()メソッド　を例に考える。

setTimeout(function() {
  console.log("3...2...1..blastoff!");
}, 1000)

結果
=> 3...2...1..blastoff!

上記の例では、 blastoff の名称を用いた関数の呼び出しは行なっていないが問題なく動作する。
Arrow function を用いると以下のように記述出来る。

setTimeout(() => {
  console.log("3...2...1..blastoff!");
}, 1000)

結果は同じである。
もし、無名関数ではなく、固有の名前を与えたいなら以下のように記述してあげれば良い。

const blastoff = () => {
  console.log("3...2...1..blastoff!");
}

blastoff()

結果
=> 3...2...1..blastoff!

次に、配列の数字に1を加えるメソッドを例に考える.

let points = [10, 11, 12]

let addOne = function(element) {
  return element + 1;
}

points = points.map(addOne);

console.log(points)

結果
=> [11, 12, 13]

上記の例は Arrow function を用いると以下のように記述出来る。

let points = [10, 11, 12]

let addOne = () => {
  return element + 1;
}

points = points.map(addOne);

mapメソッドの引数に addOneの中身を記述すれば、更に短く記述が出来る。

let points = [10, 11, 12]

points = points.map((element) => {
  return element + 1;
})

Arrow functionに渡す 引数 が1つの場合は、 () を省略出来る。

let points = [10, 11, 12]

points = points.map(element => {
  return element + 1;
})

Arrow functionのbodyがexpressionの場合は {} 及び return を省略できる。

let points = [10, 11, 12]

points = points.map(element => element + 1)

expression vs statement についてはこの動画がわかりやすい。

同じ表現を省略してかなり短く記述することが可能だ。