JavaScriptのアロー関数、無名関数を基礎から分かりやすく解説

関数とは

一連の手続きを1つの処理にまとめた物。
関数を使うことによって、毎回同じ処理を書かずとも、その関数を呼び出すことによって同じ処理を実行できる。

//関数宣言//引数に+1をするfunctionを作るfunction increments(n){ return n+1}//呼び出し//incrementsを呼び出すと()に入れた引数に+1する処理を毎回してくれる。console.log(increments(5)) //6console.log(increments(1)) //2

JavaScriptの関数の定義は2パターン

JavaScriptの関数には「式」と「文」のどちらかで定義する。

式:評価された後に値として存在するもの。

式を評価する事で、結果として評価値を返す。

式は評価した結果を変数に代入できる。

// 1 + 1という式の評価値を表示console.log(1 + 1); // => 2// 式の評価値を変数に代入const total = 1 + 1;// 関数式の評価値(関数オブジェクト)を変数に代入const fn = function() { return 1;};// fn() という式の評価値を表示console.log(fn()); // => 1

文:何らかの手続きを処理系に命令するもの。

処理する1ステップが1つの文である。;で1文ごとに区切る。

ifやforなどが文としてよく使われている。

const isTrue = true;if (isTrue) { 処理}

文は変数に代入できない!!その為、下はエラーが出る

// 構文として間違っているため、SyntaxErrorが発生するconst forIsNotExpression = if (true) { 処理 }

アロー関数と無名関数

アロー関数式

ES2015で導入されてから、スッキリしてい見やすい為、急速に普及している記法。
アロー関数式では以下の省略ができる。

・引数がひとつだけの場合はカッコが省略できる
・本文が return 文だけのときは、return 文をブロックごと省略できる

省略例

const plusOne = function (n) { return n + 1; }// アロー関数式()const addOne = (n) => {return n + 1; };// アロー関数式 省略const increment = n => n + 1;

無名関数

名前がない関数。匿名関数とも呼ばれる。

宣言された関数は生まれた時点から名前を持つのが基本である。
関数の名前はFunction インスタンスとしての name プロパティに格納されてる。

function mercury() {}mercury.name //宣言文で定義した関数の名前 'mercury'const fn = function mars() {};fn.name // 関数式で定義した関数の名前 'mars'

もし名前を書かなかった場合(無名関数)は変数の名前が関数の名前になる。

const venus = function () {console.log('I am Venus!'); }; venus();//I am Venus!venus.name//'venus'//functionに名前がない為、変数名のvenusが関数の名前になっている。