JavaScript アロー関数のサンプル

JavaScriptのアロー関数のサンプルです。

アロー関数とは

  • functionの関数をより短く記述できる構文です。
  • 引数を与えると値を返します。
  • アローとは矢(=>)を意味します。
  • 無名関数をアロー関数で書くことができます。
  • アロー関数は、ECMAScript2015からできるようになりました。

無名関数

アロー関数と比較するための無名関数のサンプルです。

<script>
  const test1 = function (a) { //無名関数
    return a + "です";
  };
  console.log(test1("赤")); // 赤です
</script>

2-4行目は無名関数です。function(a)のあとに関数名がありません。

アロー関数1

上記の無名関数との差異は、functionを削除しアロー(=>)を使用しました。

<script>
  const test1 = (a) => {
    return a + "です";
  };
  console.log(test1("赤")); // 赤です
</script>

2行目はfunctionがありません。また引数の後に=>が追加されています。

アロー関数2

上記のアロー関数との差異は、引数を囲んでいる()を削除しました。

<script>
  const test1 = a => {
    return a + "です";
  };
  console.log(test1("赤")); // 赤です
</script>

2行目は引数を囲んでいる()がありません。引数が1つのときのみ可能です。

※引数が2つ以上の時

引数が2つ以上の時は、引数の箇所にかっこ()が必要です。

<script>
  const test1 = (a, b) => a + "と" + b + "です";

  console.log(test1("赤", "青")); // 赤と青です
</script>

※引数がない時

引数がない時も引数の箇所にかっこ()が必要です。

<script>
  const test1 = () => "です";

  console.log(test1()); // です
</script>

アロー関数3

上記のアロー関数との差異は、ブロック{}とreturn()がありません。

<script>
  const test1 = a => a + "です";

  console.log(test1("赤")); // 赤です
</script>

※命令文が2行以上の時

<script>
  const test1 = a => {
    const b = a + "です";
    return b;
  };
  console.log(test1("赤")); // 赤です
</script>

命令文が2つ以上の時は、ブロック{}が必要です。

以下は、MDNのアロー関数のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions

関連の記事

JavaScript 関数宣言と関数式のサンプル
JavaScript 再帰関数のサンプル
JavaScript 関数のデフォルト引数のサンプル
JavaScript 関数式と無名関数と即時関数
JavaScript クロージャのサンプル
JavaScript 引数/戻り値が関数のサンプル(高階関数)
JavaScript argumentsオブジェクトとcalleeのサンプル

△上に戻る