コールバックに値を渡す

01 / 05

要素は誰が入れていた?

forEach に渡した関数は (item) => { ... } のように引数を受け取っていた。あの item、誰が入れていたんだろう。

答えは forEach の側。受け取った関数を呼ぶときに fn(要素) と書いていたんだ。

呼ぶときにかっこの中へ値を書けばいい。ふつうの関数呼び出しと同じだよ。

02 / 05

受け取った関数を fn(10) と呼べば、渡した関数の引数に 10 が入る。値を配っているのは呼ぶ側なんだ。

渡す側は「何か1つ届く」つもりで引数を1つ書いておけばいいよ。

const useValue = (fn) => {  fn(10);};useValue((n) => {  console.log(n * 3);});

実行結果

03 / 05

fn(10) の 10 がどんな名前で受け取られるかは、渡した関数の書き方しだい。n でも kazu でも動くよ。

決まっているのは順番だけ。1つ目の値が1つ目の引数に入る。だから2つ渡すこともできる。

const useTwo = (fn) => {  fn(4, 5);};useTwo((tate, yoko) => {  console.log(tate * yoko);});

実行結果

04 / 05

これで forEach の中身が想像できるようになったはず。配列をまわしながら、要素を1つずつ渡して呼んでいるだけなんだ。

同じものは自分でも作れるよ。下の eachOf は forEach の作り方をなぞったものだよ。

const eachOf = (arr, fn) => {  for (let i = 0; i < arr.length; i++) {    fn(arr[i]);  }};eachOf(["あか", "あお"], (c) => {  console.log(c);});

実行結果

あか
あお

05 / 05

渡した関数が return した値は、呼んだ側が受け取れる。const answer = fn(6); のように変数に入れるだけだよ。

find や filter が「true を返す関数」を求めていたのも、map が「変換後の値を返す関数」を求めていたのも、これを見ていたからなんだ。

それじゃあ、値を配るコールバックを書いてみよう。

const useResult = (fn) => {  const answer = fn(6);  console.log(`こたえは${answer}`);};useResult((n) => {  return n * n;});

実行結果

こたえは36