JavaScript アロー関数のサンプル

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

アロー関数とは

アロー関数と比較するための無名関数です。function(a)のあとに関数名がありません。

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

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

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

上記のアロー関数との差異は、引数を囲んでいる()を削除しました。引数が1つのときのみ可能です。

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

※引数が2つ以上の時

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

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

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

※引数がない時

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

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

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

STEP2のアロー関数との差異は、ブロック{}とreturn()がありません。
処理を1行で記述(ワンライン)の時のみ可能です。

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

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

※命令文が2行以上の時

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

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

波括弧の前後を丸括弧()で括ります。

<script>
  const test1 = (a, b) => ({
    name: a,
    romaji: b,
  });
  console.log(test1("鈴木", "suzuki")); //{name:'鈴木',romaji:'suzuki'}
</script>