74
64

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-07-19

関数とは

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

<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すら省略できるようになった!

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

74
64
0

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
  3. You can use dark theme
What you can do with signing up
74
64

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?