JavaScript
初心者向け
即時関数

【javascript】即時関数とは?

More than 1 year has passed since last update.

javascriptはコピペ駆動開発 + javaのつもりで書いているため即時関数(のような)javaで全くみない書き方が目に入ると脳みそがフリーズしていました。同じ症状の方の参考になればと思い自分なりに即時関数について説明してみます。

Javaっぽく関数を利用する

JavaやCのプログラマなら以下の記法で関数を宣言し実行できる、というのをなんとなく理解できると思う。

//関数宣言1
function testFunction(){
  console.log('かんすうのテストです');
}

//関数宣言2、htmlのボタンクリックなどから呼び出し
function main(){
  //宣言1を呼び出す
  testFunction();//出力:かんすうのテストです
}

というよりjavascriptをきちんと勉強するまで、上の書き方しか理解(納得)できなかった。

Javascriptでは関数は第1級オブジェクト

javascriptでは、数値や文字と同じく、関数を変数に代入したり、関数の引数に利用したり、戻り値に指定できる。
この性質のことを第1級オブジェクトと呼ぶ

関数コンストラクタというものの存在が関数がオブジェクトであることを納得させると思う。

//関数コンストラクタで作ったオブジェクトを変数に代入
var test = new Function('arg1,arg2','console.log(arg1 + ":::"+ arg2)');

//変数を関数として実行
test("hello","world");//hello:::world

そんなjavascriptの性質から、javascriptでは関数を以下のように利用できる。

  • 関数の中に関数をかける
  • 関数を引数で受け取り、後続の処理で利用する
  • 関数の処理結果として別の関数を返す

余談ですが、まったくjavascriptを学んでいない状態のjavaプログラマーなどでは上記の使い方の箇所で脳みそがフリーズすると思う。(俺だけ?)

関数リテラル

リテラルというのは文字どおり、書かれたもの、ということ。
文字列がコンストラクタを使わずに宣言できるように、関数もコンストラクタなしで記述できる

"test";    //Stringリテラル
5;         //数値リテラル
[5,4,3];   //配列リテラル
(function(arg1,arg2){console.log(arg1 + arg2)}); //関数リテラル

をそれぞれ右辺にして変数に代入すればそのまま後続の処理で利用できる。

関数リテラルは匿名関数とも呼ばれる

即時関数

匿名関数を記述と同時に実行すること。一度知ってしまえば難しい話でもないですね。

(function(){console.log("test")}()); //出力結果:test

使い所

ES6(最近のjavascriptの仕様)でブロックとモジュールの考え方が導入されたため、スコープの極少化のために利用するということはなくなっていくんだろうと思う。昔は少量の記述かつグローバルスコープに影響を与えない性質から、ブックマークレットなどに積極的に利用されていたらしい。

ただ昔に出版された本や古いコードなどには結構即時関数が利用されているため読めるようにはなっている必要があると思う。

参考

javascriptパターン
もうはじめよう、ES6~ECMAScript6の基本構文まとめ(JavaScript)~
JavaScriptから即時関数を排除する