search
LoginSignup
54

More than 3 years have passed since last update.

posted at

updated at

【JavaScript】無名関数とは/即時関数とは

関数とは

同じ処理を定義し何度も使い回しができる形にしたもの。

<script>
  function 関数名(){
  処理
  }
</script>

無名関数とは

関数名なしで関数を定義できるもの。

<script>
  function(){
  処理
  }
</script>

何の効果の違いがあるんや

1.通常の関数の場合

<!DOCTYPE html>
<html lang ="ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScriptの練習</title>
  </head>
  <body>
    <script>
      function sum(a,b){
        var result = a + b;
        return result;
      }
      var answer = sum(1,2);
      alert(answer);
    </script>
  </body>
</html>

=>引数1,2に応じてアラート「3」が出る。

2.無名関数の場合

❇︎ script内のみ書き出します


  <script>
    var sum = function(a,b){
      var result = a + b;
      return result;
    }
    var answer = sum(1,2);
    alert(answer);
  </script>

=>結果は同じく、「3」がアラートで出る。

通常の関数では、まず関数sumを定義し、そのsumをのちほど変数answerに代入し、引数1,2を入れて呼び出した。

それに対し、無名関数では、変数に関数の定義そのものを = で直接入れることができるようになる。

こうすることで、余計な関数名や変数名を考えなくても済む。逆にいえば、1回きりしか使わない関数なので、名前をつける必要がない(=無名)ということ。

即時関数

無名関数は、実は即時関数の一種。
即時関数はプログラムを即時実行できる点がメリット。

更にシンプルな書き方では、varで宣言して変数に格納したりせずに、functionから始まる関数定義そのものを()でくくって即実行できるようになる


    <script>
      var sum = (function(a,b){
        var result = a + b;
        return result;
      })(1,2);
      alert(sum);
    </script>

=>関数sumを変数answerに代入していたものが、
変数answerすら省略できるようになった!

一箇所しか使わない定義に関しては即時関数を使ってシンプルに書いた方が良い。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
54