【JavaScript】無名関数と即時関数?関数パターンを理解してメンテナブルなソースに!

はじめまして、
unitopiさんの下でライターをさせていただくことになりました、chikurinです。
どうぞよろしくお願い致します。

今回、Javascriptの関数パターンを2種類ご紹介させて頂きます。

関数とは・・・タスクや値の計算を実行する文の集まりである

jQueryやそのプラグイン、他の人が書いたJavascriptコードを見ると、
①②のような書き方にでくわしたことはないでしょうか?

① var [変数名] = function (){...};
② (function(){...})();

...は、処理内容を表します。

ここでは、こうした書き方を1つずつご説明したいと思います。

無名関数

まず、①の書き方は「無名関数」と呼ばれます。
何故このような書き方になるのか、
関数の書き方をおさらいしつつ考えてみましょう。

Javascriptの関数は下記の2パターンが基本になります。

(1) 通常の関数定義
function hoge(){...}
(2) 定義した関数を変数に代入
var hoge = function hoge(){...};

両者とも実行される内容は同一です。
ただ、定義している関数名は省略可能なので、下記の書き方も同じ処理がなされます。

(3) 定義した関数を変数に代入 + 関数名を省略
var hoge = function hoge(){...};

var hoge = function (){...};

(3)の書き方が、名前なし関数、いわゆる無名関数になります。

即時関数

一方、②は「即時関数」と呼ばれます。
呼んで字のごとく、“即時”実行される”関数”と覚えてもらえれば良いです。

考え方としては、関数定義と関数呼び出しをセットにしたものとお考え下さい。
例えば、以下の関数とその呼び出しを行うとします。

(4-1) 関数定義
function unitopi(){
  console.log('こちらはunitopi.comのサイトになります');
}
(4-2) 関数呼び出し
unitopi();

ただ、一度しかこの関数を使わないような場合、下記の記述にすることが出来ます。
呼び出し側の関数名(ここでは”unitopi”)を、関数定義部分(function …)で置き換える」イメージで考えると覚えやすいです。

(5) 関数定義と呼び出しのセット
(function unitopi(){
  console.log('こちらはunitopi.comのサイトになります');
})();

そして、無名関数の時と同じく、関数名を省略するとこのようになります。

(6) 関数定義と呼び出しのセット + 関数名省略
(function unitopi(){
  console.log('こちらはunitopi.comのサイトになります');
})();

(function (){
  console.log('こちらはunitopi.comのサイトになります');
})();

これまで省略してきましたが、引数についても使用可能です。
例えば下記のような即時関数だと、
「引数objに’pencil’、引数propに’green’に対応づけてfunction波括弧の処理が実行」されることになります。

例:

(function (obj, prop){...})('pencil', 'green');

最後に、即時関数が使われるケースとしては、
大きく以下にまとめられるのではと考えています。

  • コードのメンテナンス性(一度きり実行される関数の管理)
  • グローバルオブジェクトの汚染を防ぐ

いかがだったでしょうか、
機会を見つけて、皆さんもこうした関数を是非使ってみて下さい!

フォローして続編をチェック

@universionsをフォロー