くり返し — 配列を1件ずつ処理する

同じことを何度も — 人間が手で書かない理由

配列の中身をすべて表示したいとき、fruits[0]、fruits[1]…と1行ずつ書くこともできます。でも100件あったら100行です。しかも件数が変わると全部書き直しになります。そこで「同じ処理を、中身ぶんだけ自動でくり返す」のがループ(くり返し)です。宛名書きを1枚ずつ手書きするか、同じ作業をコピー機に任せるか、の違いです。

const fruits = ["りんご", "みかん", "ぶどう"];
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);
// 件数が変わると全部書き直し

const fruits = ["りんご", "みかん", "ぶどう"];
for (const fruit of fruits) {
  console.log(fruit);
}
// 件数が変わってもこのままでOK

for...of — 配列を1件ずつ取り出す

for...of は「配列の中身を1件ずつ取り出して、順番に処理する」書き方です。for (const 変数 of 配列) と書くと、変数に先頭から1つずつ値が入り、{ } の中がその回ごとに実行されます。読むときは「配列の の中身 of を1件ずつ fruit に入れて回す」と考えます。

const fruits = ["りんご", "みかん", "ぶどう"];
for (const fruit of fruits) {
  console.log("くだもの: " + fruit);
}
// くだもの: りんご
// くだもの: みかん
// くだもの: ぶどう

forEach — 配列に「これを全部にやって」と頼む

forEach は配列自身に「各要素に対してこの処理をして」と頼む書き方です。配列.forEach((要素) => { 処理 }) と書くと、for...of と同じように1件ずつ処理できます。(要素) => { } の部分は「1件ごとに実行してほしい処理」で、Day1で学んだ関数の一種です。

const fruits = ["りんご", "みかん", "ぶどう"];
fruits.forEach((fruit) => {
  console.log("くだもの: " + fruit);
});
// for...of と同じ結果になる

for...of と forEach は、どちらも「配列を1件ずつ処理する」ための道具です。読めればどちらでも構いません。まずは「配列を頭から順に全部回している」と読み取れることが大切です。

• ループは「同じ処理を中身ぶんだけ自動でくり返す」道具。手書きの繰り返しをなくす
• for...of は for (const 変数 of 配列) で1件ずつ取り出す
• forEach は 配列.forEach((要素) => { 処理 }) で1件ずつ処理する
• くり返しの中で console.log すると、今どの値を処理中か確認できる
• どちらも「全件を1件ずつ処理する」ための道具。次のDayの map につながる