アロー関数で短く書く

01 / 04

同じ意味なら短いほうがいい

関数式は const 名前 = function() { }; と書いた。この function という単語、毎回書くとけっこう長いよね。

そこで用意されているのがアロー関数という書き方。矢印のような => を使うので、この名前で呼ばれているよ。

02 / 04

手順は2つだけ。

下の2つはまったく同じ動きをするよ。見比べてみよう。

const greetA = function() {  console.log("おはよう");};const greetB = () => {  console.log("おはよう");};greetA();greetB();

実行結果

おはよう
おはよう

03 / 04

{ } の中に書けるものは変わらない。繰り返しも条件分岐も、これまでと同じように書けるよ。

呼び出しも 名前() のまま。変わったのは定義の見た目だけだと思っておこう。

const countDown = () => {  for (let i = 3; i >= 1; i--) {    console.log(i);  }  console.log("スタート");};countDown();

実行結果

3
2
1
スタート

04 / 04

アロー関数は短く書けるので、実際のコードではこの形をとてもよく見かける。読めるようになっておくと、人の書いたコードがぐっと分かりやすくなるよ。

最後の } のあとの ; は忘れやすいので気をつけて。変数に値を入れる文だからね。

それじゃあ、書き換えの練習をしてみよう。