コールバック関数

プログラミングの勉強日記

2020年6月13日　Progate Lv.87
JavaScript Ⅶ

コールバック関数とは

　JavaScriptでは、引数に関数を渡すことができ、引数に渡される関数のことをコールバック関数という。関数の呼び出し時に渡される関数の種類には、文字列や数値、真偽値、関数がある。

const print =() => {
  //処理
}
const call = (callback) => {  //callbackは引数名。関数printが代入される。
  //処理
}
call(print);  //printは関数名。関数printを引数に渡す。

　関数は関数名の後に()をつけると呼び出され、()をつけなければ関数そのものを指す。（上の例を用いるとprint()とすれば、関数が呼び出されるが、printとすると関数そのものである。）

事前に定義した関数

const print =() => {
  console.log("Hello World");
};
const call = (callback) => {
  console.log("コールバック関数を呼び出す");  //2.printをcakkbackに代入
  callback();   //3.関数callbackを呼び出す
};
callback(print);  //1.引数にprintを渡し関数callを呼び出す

コンソール結果は
「　コールバック関数を呼び出す。
　　Hello　World　」

関数を直接引数の中で定義する

　ここまでは事前に定義した関数をコールバック関数として渡していたが。関数を直接引数の中で定義することもできる。

直接引数の中で定義した関数

const call = (callback) => {  //2.printをcakkbackに代入
  console.log("コールバック関数を呼び出す");
  callback();  //3.関数callbackを呼び出す
};
//1.引数で関数を定義して関数callを呼び出す
call()=> {
  console.log("Hello World");
});

コールバック関数でも普通の関数と同じように引数を渡すこともできる。

普通の関数

 const introduce = (name) => {
  console.log(name);
};
introduce("田中太郎"); //コンソール結果は「田中太郎」

コールバック関数

const introduce = (callback) => {
  callback=("田中太郎");
};
introduce(name) => {
  console.log(name);  //コンソール結果は「田中太郎」
});

また、複数の引数を渡すことも可能である。

const introduce = (callback) => {
  callback=("田中太郎",24);
};
introduce((name,age)) => {
  console.log(`$(name)は$(age)歳です`);  //コンソール結果は「田中太郎は24歳です」
});