この動画がわかりやすい。
開始20分あたりから核心にせまるかんじがあり。
コールバックと高階関数のちがいは36分あたりから。
最初からみることで、関数の存在意義を感じやすいと思うので
長いけど最初からみたほうがいいかと思います。
動画中でつかわれているスライドを参照しながらやるとよりわかりやすい。
最初は学校の宣伝で、12ページからスライドスタートです。
同じチャンネルで同じプレゼンを別の講師がしているものもありますがこちらがダントツでわかりやすいです。
37分30秒くらいから、コールバックと高階関数の説明をしています。
何回もリピートしました。
コールバック：
functionのparameterとして渡されてきたhogeに入っている関数を実行すること
高階関数：
上を実行する関数
例
ここではhogeがexecuteFunctionで、高階関数がexecute
function plus(x,y){
return x+y;
};
function minus(x,y){
return x-y;
};
function multiply(x,y){
return x*y;
};
function divide(x,y){
return x/y;
};
function calc(x,y,executeFunction){
return executeFunction(x,y);
};
function execute(x,y,executeFunction){
x = Number(document.getElementById("number1").value);
y = Number(document.getElementById("number2") .value);
console.log("Current x: " + x);
console.log("Current y: " + y);
if(document.getElementById("plus").selected){
executeFunction = plus;
}else if(document.getElementById("minus").selected){
executeFunction = minus;
}else if(document.getElementById("multiply").selected){
executeFunction = multiply;
}else{
executeFunction = divide;
}
console.log("Current operator: " + executeFunction);
console.log("The answer is: " + calc(x,y,executeFunction));
}
行いたい計算はexecuteFunctionの中にはいっているのだけど、
コンソール画面を確認すると、
console.log("Current operator: " + executeFunction); は、
この時点では、function definitionでしかないということがわかる。
参考までにHTMLはこちら
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>callbacks_retry</title>
</head>
<body>
<h1>Calculator</h1>
<form>
<input type="text" id="number1"><br>
<input type="text" id="number2"><br>
<select>
<option id="plus">+</option>
<option id="minus">-</option>
<option id="multiply">*</option>
<option id="divide">/</option>
</select>
<input type="button" value = "calculate!" onclick="execute();"><br>
</form>
<script type="text/javascript" src="callbacks_retry.js"></script>
<noscript>JavaScriptが利用できません</noscript>
</body>
</html>
高階関数については、エンジニアの友人がおしえてくれたが、
一般的には、「関数を返す関数」のことをさす場合が多いみたいですね。
冒頭の動画では、小さな関数たちをmanupilateしているのが、Higher-order Functions だよといっている。
このあたりのシナプスがつながるのは、
まだ時間がかかりそう。
でも1つだけ、例を理解した。あとはこれを汎用できるようにしていきたいとおもいます。
