今回は「コールバック関数」について見ていきましょう。
まず、「コールバック関数」とは何でしょうか？
関数という名前がついているので、関数であることは間違いありません。
MDNでは、「他の関数に引数として渡される関数」と書かれています。
これを読んだだけで、理解できた方は素晴らしいセンスの持ち主ですが、私のような凡人には一体なんのことか分かりません。
早速例を見ながら、「コールバック関数」とは何なのかを理解していくことにしましょう。
コールバック関数
let greeting = function(name){
console.log('はじめまして' + name + 'です。');
}
greeting('佐藤');
はじめまして佐藤です。
まずは、今まで何度も見てきた関数式を使って関数を定義します。
関数が変数「greeting」に格納されているのが分かると思います。
let greeting = function(name,age, call){
this.name = name;
this.age = age;
call(name, age, call);
}
let person = function(name,age){
console.log('はじめまして' + name + 'です。' + '年齢は' + age + '歳です。');
}
greeting('山田',33, person);
はじめまして山田です。年齢は33歳です。
次は、greetingを呼び出す時に、引数にpersonを指定しています。
personも関数を定義しています。
このように引数に関数を指定しても、どちらもきちんと実行されています。
この時、引数として渡される関数を「コールバック関数」、引き渡された関数を実行する関数を「高階関数」と言います。
ここでは、personがコールバック関数、greetingが高階関数になります。
なお、引数として使用したpersonは、greetingを呼び出す時に直接引数に書くことも出来ます。
greeting('佐藤',35,(name,age)=>{
console.log('はじめまして' + name + 'です。' + '年齢は' + age + '歳です。')});
はじめまして佐藤です。年齢は35歳です。
アロー関数を使っていますが、もちろん、functionから書いてもOKです。
ただこのような場合は、アロー関数の方が分かりやすいかもしれません。
あとがき
いかがでしたか。
比較的分かりやすかったと思います。
改めて今回の内容を確認してみましょう。
まず最初のポイントは、JavaScriptでは関数を引数に指定することが出来るということです。
このポイントを踏まえて、以下のことを学習しました。
- コールバック関数：引数として渡される関数
- 高階関数：引き渡された関数を実行する関数
今回学習した、「コールバック関数」は次回ご紹介する、「非同期処理」を学んで行く上でとても大切な要素の一つですので、しっかり覚えておいてください。
今回も最後までお読み頂きありがとうございました。
