JavaScript アロー関数のサンプル

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

目次

サンプル アロー関数とは
  step1 無名関数
  step2 アロー関数(1)
  step3 アロー関数(2)
  step4 アロー関数(3)

アロー関数とは

引数 => 戻り値

step1 無名関数

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

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

2-4行目は無名関数です。function(a)のあとに関数名がありません。
5行目は、関数が実行されて文字列が表示されます。

 

step2 アロー関数(1)

アロー関数のサンプルその1です。
上記の無名関数との差異は、functionを削除しアロー(=>)を使用しました。

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

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

 

step3 アロー関数(2)

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

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

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

引数が2つ以上の時

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

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

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

引数がない時

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

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

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

 

step4 アロー関数(3)

アロー関数のサンプルその3です。
上記のアロー関数との差異は、ブロック{}とreturn()がありません。

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

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

2行目はブロック{}とreturn()がありません。命令文が1行のときのみ可能です。

命令文が2行以上の時

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

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

関連の記事

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

△上に戻る