関数を引数で受け取る

01 / 05

呼んでいる側はどう書かれている?

forEach に関数を渡すと、その関数が要素ぶん呼ばれた。じゃあ呼んでいる側はどう書かれているんだろう。

実は特別なことは何もしていない。引数で受け取った関数に () を付けて呼ぶだけ。同じことは自分でも書けるよ。

02 / 05

受け取って ( ) を付ける

引数はこれまで数値や文字列を受け取ってきた。関数も値だから、まったく同じように受け取れる。

受け取った引数に () を付けると、その中身が動く。こうやって引数として渡される関数のことをコールバック関数と呼ぶよ。

const doTask = (task) => {  console.log("はじめるよ");  task();};const clean = () => {  console.log("そうじした");};doTask(clean);

実行結果

はじめるよ
そうじした

03 / 05

渡した時点では動かない

doTask(clean) の clean に () は付いていない。だから渡しただけで、この行では動かない。

動くのは受け取った側が task() と書いた瞬間。いつ呼ぶかは受け取った側が決めるんだ。下の例で順番を追ってみよう。

const later = (fn) => {  console.log("まだ よばない");  fn();  console.log("よんだあと");};const hello = () => {  console.log("やあ");};later(hello);

実行結果

まだ よばない
やあ
よんだあと

04 / 05

渡す関数を差し替える

同じ受け取り側に別の関数を渡せば、まわりはそのままで真ん中の動きだけ入れ替わる。

これがコールバック関数のうれしいところ。「前後の決まった処理」と「その都度変わる処理」を分けて書けるんだ。

const doTask = (task) => {  console.log("--- かいし ---");  task();};const wash = () => {  console.log("あらった");};const cook = () => {  console.log("にた");};doTask(wash);doTask(cook);

実行結果

--- かいし ---
あらった
--- かいし ---
にた

05 / 05

何回呼ぶかも自由

受け取った関数は1回しか呼べないわけじゃない。() を書いた回数だけ動くよ。

if の中に置けば「条件によっては呼ばない」もできる。呼ぶ回数もタイミングも受け取った側の自由なんだ。

それじゃあ、関数を受け取る関数を書いてみよう。

const twice = (fn) => {  fn();  fn();};const beep = () => {  console.log("ピッ");};twice(beep);

実行結果

ピッ
ピッ