はじめまして、
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');
最後に、即時関数が使われるケースとしては、
大きく以下にまとめられるのではと考えています。
- コードのメンテナンス性(一度きり実行される関数の管理)
- グローバルオブジェクトの汚染を防ぐ
いかがだったでしょうか、
機会を見つけて、皆さんもこうした関数を是非使ってみて下さい！
Author Profile
