JavaScriptの関数式とArrow Functionについて整理する

· 85 words · 1 minute read

はじめに

ReactでES2015を使ってJSを書いていると、Arrow Functionがよく出てきます。

前回の記事ではArrow Functionにおけるthisの挙動について整理しましたが、今回はArrow Function自体について整理します。


読んだもの


関数式とはなにか

関数式とは、関数を値として変数へ代入している式のことです。

関数式を使う場合、関数の名前は省略することができます。
このような名前を持たない関数を匿名関数(または無名関数)と呼びます。


シンプルな関数式

無名関数を使ったシンプルな例です。

const 変数名 = function() {

  return hoge;
};

関数式では引数を使うこともできます。

const 変数名 = function(n, m) {

  return n + m;
};

Arrow Functionを使った関数式

Arrow Functionは関数式の書き方のひとつです。

const 変数名 = () => {

  return hoge;
};

Arrow Functionを使う場合、関数の処理が一つの式であれば、returnは省略できます。

const 変数名 = (n, m) => {

  n + m;
};

また、引数が一つであれば ()を省略できます。

const 変数名 = n => {

  return n;
};

おわりに

他にも、Arrow Functionを使った関数式には次のような特徴があります。

省略形を使うことができ、thisの値を静的に決定することができるArrow Functionにはメリットが多く、メソッドでない関数式を扱う場合は、優先して利用することが推奨されています。