JavaScript　#7　アロー関数

2020年12月12日

今回は、JavaScriptのES6から登場した、アロー関数に関してまとめていきたいと思います。
アロー関数とは無名関数の新しい書き方です。まずは、旧来ES5までの無名関数の書き方とES6から登場したアロー関数の書き方を比べて行きたいと思います。

それでは見ていきましょう。以下は旧来のコードの書き方とアロー関数を使った書き方です。

// 旧来の書き方
// Goodby Old World!を出力するだけの無名関数
let oldWorld  = function(){
  console.log('Goodby Old World!');
}
oldWorld();

// アロー関数の書き方
// Hello New World!を出力するだけのアロー関数を定義
let newWorld  = () =>{
  console.log('Hello New World!');
}
newWorld();

これだけだと、アロー関数ってなんのため？「function」が「=>」にかわっただけ？となってしまうところですが、アロー関数は省略した書き方が色々とできるようです。以下に例をまとめました。
アロー関数では関数内の定義（処理）が1行でかける場合は、「｛｝」で関数の処理を囲む必要はないです。
アロー関数では関数内の引数が一つの場合は「()」を書かなくても良いです。逆に引数がない場合は「()」を各必要があります。

// アロー関数の関数定義が1行でかける場合
// ｛｝括弧をつけなくてもよい。
let oneLine  = () => console.log('Hello New World!');
oneLine();

// アロー関数の引数がひとつの場合
// ()括弧をつけなくてもよい。
let oneValue  = value => console.log(value);
oneValue('引数ひとつ');

引数が一つしかない場合や、関数の定義が1行しかない場合はだいぶすっきりかけることがわかりました。
アロー関数使っているとなんか新しいものつかってる！って感じがしますね。
これ以外の理由もたくさんあるのでしょうが、まずはわかった範囲だけまとめてみました。

Program

Posted by Qtaro