JavaScriptを基本からまとめてみた【15】【コールバック関数】

はじめに

学習するに至った経緯

2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

コールバック関数とは

『コールバック関数』とは、ある関数に引数として渡される関数のこと。コール(実行)する関数の引数に処理(関数でも可)を追加して、必要な処理が終わった後に引数の処理を実行する方法になる。
「関数の中で別の関数を呼び出し、呼び出した関数の結果を使って結果を返す」という動作が、「一度電話をかけて用件を伝えたのち、相手に折り返して返事をもらう」という「Call back（電話をかけ直す）」に似ているため、「コールバック関数」と呼ばれるらしい。

※ JavaScriptの関数は、文字列や数値、変数だけでなく、関数も引数として受け取ることができる。

関数の引数（ひきすう）とは

『引数』とは、関数に入力する値のこと。

main.js

const sampleFunc = function(引数){ console.log("My name is"+"引数") }
sampleFunc("kaimen"); //出力結果：My name is kaimen

この関数sampleFunc(引数)では、入力された「引数」を受け取り、関数内でconsole.log(“My name is”+”引数”)という処理を行った結果を出力する。

※　sampleFunc(引数)という関数において、引数に関数を指定する場合、この関数(引数）はコールバック関数となる。

コールバック関数の例

main.js

//引数xに関数を指定する場合、その関数xはコールバック関数である
const sampleFunc = function(x){
  console.log("My name is"+"x")
}
const callbackFunc = function(){ return "kaimen" } // 関数callbackFunc()は文字列"kaimen"を返す

sampleFunc(callbackFunc()); //出力結果：My name is kaimen

この例の場合、sampleFunc()の引数にcallbackFunc()を指定している。このcallbackFunc()は関数であるため、callbackFunc()はsampleFunc()のコールバック関数にあたる。

これらの関数は、下記の順番で呼ばれる。コールバック関数の結果が出力されたのち、外側の関数の結果が出力される。

① sampleFunc()が呼ばれる
　　　　　↓
② sampleFunc()内の、callbackFunc()が呼ばれる
　　　　　↓
③ callbackFuncの出力結果をもとに、sampleFunc()の結果が出力される

参考サイト

【JavaScript】コールバック関数とは？ 簡単にまとめてみた（サンプルあり）
JavaScriptの非同期処理を同期させる方法【初心者向け】