Javascriptを学んでみようという人をターゲットに、JavaScriptの基本を解説していきたいと思います。
他の言語（特にJava等のオブジェクト指向言語）は少しでもかじったことがあるけど、JavaScriptはまだ･･･って人を想定しています。
前回の関数編ではJavaScriptの関数の基本的なポイントを紹介しました。
今回はより発展的な関数に仕組みについて書きたいと思います。
匿名関数（無名関数）
前回もさらっと出てきましたが、改めてまとめておきます。
匿名関数とは、関数リテラルを用いて宣言された名前を持たない（省略した）関数です。
無名関数と言ったりもします。
var foo = function (a,b) {
return a + b;
}
上記の例では関数リテラルで宣言した関数を変数fooに代入しているだけです。簡単ですね！
名前なしの関数が作れる…それで？って思う人もいるかもしれません。
次に高階関数を解説するのですが、その文脈で把握しちゃいましょう。
高階関数
少々小難しい名前ですが恐れる必要はありません。
JavaScriptの関数の特徴はデータ型の一つだということです。
そこで、関数を引数あるいは戻り値として扱う関数を高階関数と呼びます。
次のような例を見てみましょう。
function higherOrder (array, func) {
array.forEach(function(e){
console.log(func(e));
});
}
var array = [1,2,3,4];
function double(a) {
return a * 2;
}
higherOrder(array, double);
これを実行すると
2
4
6
8
とログが出力されます。
ここで配列と関数を引数に持っているhigherOrderが高階関数です。
押さえておいて欲しいのはこの処理において、データの具体的な処理を担っているのは引数に与えたdoubleという関数だという点です。
枠組みだけ定義しておいて具体的な実装は個別に状況に任せることで、抽象度を高めて変更に強いプログラムを組むことができるんですね。
このぐらいの例だとその威力が感じにくいかもしれまんが…。
Javaをやったことがある方はInterfaceを思い出せば、近いものが感じられるのではないでしょうか。
わざわざdoubleと名前をつけた関数を高階関数に引数に与えていますが、
匿名関数を用いて記述した方がコードの可読性が上がる場合が多いです。
次のような感じですね。
function higherOrder (array, func) {
array.forEach(function(e){
console.log(func(e));
});
}
higherOrder(
[1,2,3,4],
function(a){
return a * 2
}
);
え、読みづらくなった？慣れましょう笑
このように高階関数の引数に匿名関数を用いる場面はJavaScriptでは非常に多いです。
慣れないとしっくりきづらいところですが、避けては通れないポイントですので頑張って下さい。
即時関数
即時関数は、関数を定義すると同時に実行するための構文を指し、次のように記述します。
(function(){
//行いたい処理
}());
次のように引数を与えることもできます。
(function(a){
console.log(a);
}('sample'));
その場かぎりの処理を行いたいときは即時関数で書けるんですね。
さて、大抵の人はここまでで関数に名前をつけて呼び出すのと何が違うんだと思うのではないでしょうか。わかります。
しかし、JavaScriptのライブラリなんかを見ると即時関数による記述が非常に多いです。
なぜわざわざ即時関数というちょっとテクニカルな書き方をするのでしょうか。
その理由は、「今いるスコープを汚染せずに新たなスコープを作るため」です。
スコープは出来るだけ狭めてやりたいのがプログラマの心情です。
思わぬところで参照されて動作に影響が出るなんてのは辛さしかありません。
そして、JavaScriptでスコープを作れるのは関数だけなんですね。（letを用いたブロックスコープとかもあるけど…）
通常の名前付き関数は、再利用を前提とした場面で用いる。
即時関数は、再利用はしない処理を包み込みスコープを作る。という使い分けになります。
このスコープの考えかはJavaScriptでとても大事になるのでおさえておいてください。
WEBアプリケーション関連 人気連載リンク
基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載
より実践的なWEBアプリ開発講座！Bootstrap活用を学ぶなら・・
魁！小野の塾 連載
