「後でまた電話します!」
コールバックは、別の関数に引数として渡される関数です。
この手法により、関数は別の関数を呼び出すことができます。
コールバック関数は、別の関数が終了した後に実行できます。
関数シーケンス
JavaScript関数は、定義された順序ではなく、呼び出された順序で実行されます。
この例では、最終的に「Goodbye」が表示されます。
例
function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
自分で試してみる»
この例では、最終的に「Hello」が表示されます。
例
function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();
自分で試してみる»
シーケンス制御
関数をいつ実行するかをより適切に制御したい場合があります。
計算を行い、結果を表示するとします。
電卓関数 (myCalculator
)を呼び出して結果を保存し、別の関数 (myDisplayer
) を呼び出して結果を表示することができます。
例
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
return sum;
}
let result = myCalculator(5, 5);
myDisplayer(result);
自分で試してみる»
または、電卓関数 (myCalculator
)を呼び出し、その電卓関数に表示関数 (myDisplayer
)を呼び出すこともできます。
例
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);
自分で試してみる»
上記の最初の例の問題は、結果を表示するために 2 つの関数を呼び出す必要があることです。
2 番目の例の問題は、電卓関数による結果の表示を防ぐことができないことです。
ここでコールバックを導入します。
JavaScriptコールバック
コールバックは、別の関数に引数として渡される関数です。
myCalculator
コールバックを使用すると、コールバック( ) で計算機関数(myCallback
)を呼び出し、計算の終了後に計算機関数にコールバックを実行させることができます。
例
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
自分で試してみる»
上記の例では、コールバック関数myDisplayer
と呼ばれます。
これは引数myCalculator()
として渡されます。
ノート
関数を引数として渡すときは、括弧を使用しないでください。
右: myCalculator(5, 5, myDisplayer);
間違い: myCalculator(5, 5, myDisplayer());
例
// Create an Array
const myNumbers = [4, 1, -20, -7, 5, 9, -6];
// Call removeNeg with a callback
const posNumbers = removeNeg(myNumbers, (x) => x >= 0);
// Display Result
document.getElementById("demo").innerHTML = posNumbers;
// Keep only positive numbers
function removeNeg(numbers, callback) {
const myArray = [];
for (const x of numbers) {
if (callback(x)) {
myArray.push(x);
}
}
return myArray;
}
自分で試してみる»
上記の例では、コールバック関数(x) => x >= 0
です。
これは引数removeNeg()
として渡されます。
コールバックを使用する場合
上記の例は、あまり面白いものではありません。
これらはコールバック構文を説明するために簡略化されています。
コールバックが本当に威力を発揮するのは、ある関数が別の関数を待つ必要がある (ファイルのロードを待つなど) 非同期関数です。
非同期関数については、次の章で説明します。