全要素に同じ処理をする

01 / 06

番号が主役になってしまう

配列の全要素を処理するとき、for ではこう書いてきた。

for (let i = 0; i < list.length; i++) { ... }

やりたいのは「全部に同じことをする」なのに、書いてあるのは番号 i の面倒を見る話ばかりだよね。0 から始める、length 未満にする、i++ を忘れない。どれも間違えやすい。

番号を出さずに「全部に」と言えたら楽じゃないかな。

02 / 06

関数は値だった

思い出したいのは、関数も値のひとつだということ。関数編で () を付けずに console.log へ渡すと function と表示されたよね。

show … 関数そのもの
show() … 関数を動かした結果

この違いがこれから大事になる。() を付けなければ、関数を持ち運べるんだ。

const show = (item) => {  console.log(item);};console.log(show);show("てすと");

実行結果

function
てすと

03 / 06

forEach に関数を渡す

配列のうしろに .forEach(関数) と書くと、その関数を全要素ぶん呼んでくれる。

渡すのは関数そのもの。だから () は付けない。番号を書く場所はどこにも無いよ。

const fruits = ["りんご", "みかん"];const show = (item) => {  console.log(item);};fruits.forEach(show);

実行結果

りんご
みかん

04 / 06

要素が1つずつ渡ってくる

forEach は関数を呼ぶとき、その回の要素を引数として渡してくれる。だから渡す関数は引数を1つ受け取る形で書くよ。

引数の名前は自由。item でも n でも、中身が想像できる名前を付けよう。呼ばれる回数は要素の数ぶんだよ。

const nums = [3, 5, 8];const twice = (n) => {  console.log(n * 2);};nums.forEach(twice);

実行結果

6
10
16

05 / 06

( ) を付けて渡すと動かない

よくあるつまずきがこれ。forEach(show()) と書いてしまうと、その場で show を動かした結果を渡すことになる。

show は何も return していないので、渡るのは undefined。forEach は「関数をくれ」と言っているのに関数じゃないものが来たので、エラーになるよ。

エラーが出ても大丈夫。() を消せば直るだけだよ。

const nums = [1, 2];const show = (n) => {  console.log(n);};nums.forEach(show());

実行結果

undefined
エラー: undefined is not a function

06 / 06

中身はいつもどおり書ける

渡す関数の { } の中は、これまでと何も変わらない。if も計算もテンプレートリテラルも書ける。

番号が要る処理（うしろから回す、途中で止める）は for のほうが向いている。全件に同じことをするなら forEach と覚えておこう。

それじゃあ、関数を渡してみよう。

const scores = [45, 80];const judge = (score) => {  if (score >= 60) {    console.log(`${score} ごうかく`);  } else {    console.log(`${score} ふごうかく`);  }};scores.forEach(judge);

実行結果

45 ふごうかく
80 ごうかく