JavaScript アロー関数のサンプル

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

目次

サンプル アロー関数とは
STEP0 無名関数(比較用) / STEP1 アロー関数1
STEP2 アロー関数2 / STEP3 アロー関数3
アロー関数からオブジェクトを返す場合

アロー関数とは

  • 無名関数をアロー関数で書くことができます。
  • 関数のfunctionの部分を短く記述できる構文です。
  • アロー関数は、引数を与えると値を返します。
  • アローとは矢(=>)を意味します。
  • アロー関数は、ECMAScript2015からできるようになりました。
  • ※JavaScriptは変数に関数を代入できます。その場合、実行は変数とかっこ()で実行できるので関数名は不要です>無名関数。

STEP0 無名関数(比較用)

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

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

 

STEP1 アロー関数1

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

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

 

STEP2 アロー関数2

上記のアロー関数との差異は、引数を囲んでいる()を削除しました。引数が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>

 

STEP3 アロー関数3

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>

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

関連の記事

JavaScript 関数式と無名関数と即時関数
JavaScript クロージャのサンプル

△上に戻る