プログラミング逆引き辞典

～多言語対応のプログラミングレシピ～

JavaScript 即時関数・無名関数・アロー関数

JavaScriptの「即時関数」・「無名関数」・「アロー関数」について解説する

まずは通常の記述で関数を宣言、実行してみる


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>即時関数・無名関数・アロー関数</title>
  </head>
  <body>
    <script>
      //hello()関数を宣言
      function hello() {
        alert("Hello World!");
      }
      //hello()関数を実行
      hello();
    </script>
  </body>
</html>

・即時関数で記述する場合
関数全体を括弧で括り、最後に「();」と記述する


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>即時関数・無名関数・アロー関数</title>
  </head>
  <body>
    <script>
      //hello()関数を即時関数で宣言、実行
      (function hello() {
        alert("Hello World!");
      })();
    </script>
  </body>
</html>

・無名関数で記述する場合
1度しか使わない場合で関数名も必要無い場合は関数名を削除できる


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>即時関数・無名関数・アロー関数</title>
  </head>
  <body>
    <script>
      //無名関数で宣言、実行
      (function() {
        alert("Hello World!");
      })();
    </script>
  </body>
</html>

・アロー関数で記述する場合
「function」を削除し「=>」でつなぐ
※アロー関数に関してはこちら様々なパターンを解説している→アロー関数の練習


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>即時関数・無名関数・アロー関数</title>
  </head>
  <body>
    <script>
      //アロー関数で宣言、実行
      (() => {
        alert("Hello World!");
      })();
    </script>
  </body>
</html>

ブラウザで確認するとどの記述方法でも同様に下記のように表示される