JavaScriptで即時関数を使う方法【初心者向け】

プログラミング初心者向けに、JavaScriptで【即時関数を使う方法】を解説した記事です。即時関数とは、「無名関数」と呼ばれる関数の一種ですので無名関数とはそもそも何なのか、から説明します。サンプルコードもあり。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

JavaScriptをプログラミング初心者向けに紹介した記事です。

今回は、JavaScriptで即時関数を使う方法について解説します。

 

本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

目次

即時関数は、無名関数と呼ばれる関数の一種です。

まずは、無名関数がなんなのかということからみていきましょう。

 

 

関数とは

まず、関数とは同じ処理を定義し、何度も使い回しができるかたちにしたものでしたね。

fonctionを使い、次のように定義します。

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

 

 

[PR] プログラミングで挫折しない学習方法を動画で公開中

無名関数とは

それに対し、無名関数とは、その名の通り関数名なしに関数を定義できるものです。

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

次のプログラムをもとにくらべてみましょう。

 

まずは通常の関数から……

sumという関数名で定義した関数を、変数answerに代入してconsole.logで呼び出します。

<!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);
      console.log(answer);
    </script>
  </body>
</html>

 

console.logで呼び出すと、引数の1,2に応じて、「3」が出力されますね。

3

 

 

次は無名関数で……

次は、同じプログラムを無名関数で書いてみます。

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

 

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

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

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

結果も同じです。

3

このように、変数に関数定義そのものを格納できるというのが、無名関数のメリットの1つです。

 

 

そして、2つ目のメリットがプログラムを即時実行できるという点です。

次でくわしくみていきましょう。

 

 

即時関数とは

即時関数が無名関数の一種であることは冒頭で述べました。

即時関数は、上で紹介した無名関数のやり方よりもさらにシンプルなプログラムで書くことができます。

varで宣言して変数に格納することもせずに、functionからはじまる関数定義そのものを(  )でくくって、即実行するということができるようになります。

 

すると、関数呼び出しといったまどろっこしいことをせずに済みます。


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

 

実際に関数を定義したものに、すぐに引数を与えて実行しています。

これまでは関数sumを変数answerに代入し、引数を渡していました。それが、変数answerに入れることも省略して、

定義した関数に直に引数を渡し、内容を実行することができるようになったということです。

 

さきのようにvar answer = sum(1,2);を使って関数を呼び出す必要もなくなりますので、プログラムが非常にスッキリしますね。

 

 

このように一箇所しか使わない定義に関しては即時関数を使ってシンプルに書くことができます。

 

結果も「3」で変わりませんね。

3

 

 

JavaScriptで即時関数を使う方法は以上です。

JavaScriptをさらに勉強したい場合は、JavaScriptで配列を使う方法も合わせてご覧ください。

また、入門向けのJavaScriptの学習サイトも紹介しているので、合わせてご覧ください。

[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。