JavaScript #6 無名関数
無名関数
今回も関数に関して引き続きまとめていきたいと思います。今回は無名関数です。
無名関数とは、関数に名前をつけないで定義する関数です。（その名前のとおりです。）
無名関数のメリットはある特定の箇所でしか使わない関数にわざわざ名前をつける手間を省けるところがメリットです。関数って何度も同じような処理を書きたくないから、いろいろな場所から呼び出したいために、まとめて定義していものなのになぜ？と思いませんか？私もそう思います。
それでは、少しづつ見ていきましょう。まず無名関数と名前付きの関数の書き方は以下のようになります。
以下の例では名前付き関数（helloWorld関数）を定義し、呼び出す場合と、同じ処理を無名関数で書いた場合のものとなります。結果は同じです。
無名関数の動作としては、変数hello2に関数定義を読み込み、その変数を実行しています。前回のコールバック関数のときと同じく、「変数（）;」とすることで、変数にセットした値が関数として呼び出され実行されます。
// 名前付き関数の場合
// helloWorldを出力するだけのHelloWorld関数を定義
function helloWorld() {
console.log('Hello World!');
}
helloWorld();
// 無名関数の場合
// HelloWorldを出力するだけのHelloWorld関数を定義
let hello2 = function(){
console.log('Hello World!');
}
hello2();
え？これだけ？なんの違いがあるの？前回のコールバックと同じようなもの？となると思います。わたしもそうです。。それではもう少しみていきましょう。
前回まとめたとおりJavaScriptでは変数に関数定義を読み込み実行させることができます。この例では関数helloWorldを定義する代わりに変数Hello2に関数定義を読み込み、実行させています。
以下の例では、変数hello2に関数定義を読み込ませて実行しています。もちろん変数なので上書きすることもできるので、変数hello2を実行するタイミングによって処理が変わってきます。
let hello2
hello2 = function(){
console.log('Hello World!');
}
hello2();
hello2 = function(){
console.log('Gooby World!');
}
hello2();注意してほしいのは、NGの例では、当たり前ですが、2行目で「hello2」を関数として呼び出していますが、もちろん、まだ変数hello2には関数の定義内容が読み込まれていないので実行エラーとなります。OKの場合は、Hello2に関数の値を読み込んだ状態でhello2を実行しているので問題なく動きます。
//NGの場合
let hello2
hello2();
hello2 = function(){
console.log('Hello World!');
}
//OKの場合
let hello2
hello2 = function(){
console.log('Hello World!');
}
hello2();一方、名前付き関数の場合は、関数定義より前に記述しても問題なく動作できます。
HelloWorld();
// 名前付き関数の場合
// HelloWorldを出力するだけのHelloWorld関数を定義
function HelloWorld() {
console.log('Hello World!');
}結局なら無名関数って変数に代入して実行しているだけ？と思われますが、JavaScirptでは、関数やメソッドのなかには、引数にコールバック関数を指定する必要があるものがあります。それを利用する際に毎回名前付き関数を使っているとキリがないので、そういった場合は、無名関数を使ってシンプルにコードを書けるというこう理解で良いのかなと思います。
以下に例を書いてみましょう。foreachは配列の要素を順番に取り出し処理をするメソッドです。引数にコールバック関数を指定する必要があります。以下の２つはどちらでも実行できますが、これらのようにコールバック関数を指定する必要がある度に名前付き関数を定義していると収拾がつかなくなってしまうので、そのような場合には無名関数を使っていったほうが楽だなと思いました。
const classmate = [
'たろう','じどう','さぶろう','しろう','ごろう'
];
classmate.forEach(function(student){
console.log(student);
});
ちょっとJavaScriptのリファレンスをみてみたら、コールバック関数って結構使っているものなんですね。ちょっとだけスッキリしました。