コールバック関数とは、他の関数に引数として渡される関数のことです
文字だけで説明されてもピンとこないかと思います。
僕はピンときてないです。
コールバック関数を知るためには、まずは基本的な関数の使い方はおさえておきましょう！
コールバック関数は、普通の関数と比べてちょっとだけ複雑。
一体なにができて、どのような使い方をするのでしょうか？
コールバック関数とは？
改めて、コールバック関数とは、他の関数に引数として渡される関数のことです。
コールバック関数の書き方は、このような感じです。
/* 無名関数ver */
const 変数名 = function(){
何らかの処理;
return 処理の結果;
}
/* アロー関数ver */
const 変数名 = ()=>{
何らかの処理;
return 処理の結果;
}return 処理の結果; と記述することで、実行した関数そのものが結果の値に変身します。
さて、まだピンときませんね。
それではサンプルコードを見てみましょう。
サンプルコード
まずはコピペして結果を見てみましょう！
<script>
/* コールバック関数を必要とする関数 */
const hello = function(name, cb){
const result = cb(name);
console.log(result);
}
/* コールバック関数 */
const en = function(arg){
return `Hello ${arg} !`;
}
hello('World', en);
</script>
関数「hello」は、第二引数である関数「cb」の引数に第一引数をセットして実行し、その結果をコンソールで出力する関数です。
コールバック関数「en」は、実行することで「Hello 引数 !」という値に変身する関数です。
先ほど書いた通り、コールバック関数は、実行した関数そのものが結果の値に変身します。
わざわざコールバック関数を使った理由は何でしょうか？
サンプルコードをグレードアップ！
先ほどのサンプルコードをさらにグレードアップさせました！
<script>
/* コールバック関数を必要とする関数 */
const hello = function(name, cb){
const result = cb(name);
console.log(result);
}
/* コールバック関数 */
const en = function(arg){
return `Hello ${arg} !`;
}
const jp = function(arg){
return `こんにちは、${arg}！`;
}
const cn = function(arg){
return `你好${arg}！`
}
hello('World', en);
hello('世界', jp);
hello('世界', cn);
</script>
コールバック関数を増やして、関数「hello」の幅を広げることができました！
コールバック関数は、メインの関数のパーツとなるものです。
そのパーツを増やしていくことで、メインの活動領域が広がります！
サンプルコードをもいっちょ！
関数「calc」の第一引数と第二引数には数字が入ります。
そして第三引数にコールバック関数「plus」を入れると2つの数字の和が、コールバック関数「multiply」を入れると2つの積がコンソールに出力されます。
<script>
/* コールバック関数を用いて処理される関数 */
const calc = (x, y, callback) => {
const result = callback(x, y);
console.log(result);
};
/* コールバック関数「plus」 */
const plus = (n1, n2) => {
return n1 + n2;
};
/* コールバック関数「multiply」 */
const multiply = (n1, n2) => {
return n1 * n2;
};
calc(1, 2, plus);
calc(3, 4, multiply);
</script>コールバック関数はいつ使うのか？
コールバック関数は、単体では力を発揮しません。
メインの材料として使われる関数です。
そのため、シンプルな関数を使う際に出番はなく、複雑な関数を扱うとき、コールバック関数を必要とする場面が現れるのです。
まだその出番は先になるのではないでしょうか。
「むむ、これはコールバック関数の出番では！？」
と思ったその瞬間、あなたの成長を実感し、自分をたっぷりと褒めてあげてください！
