番号を使わずくり返す

01 / 06

番号の世話が本題を隠す

配列を1件ずつ処理するとき、章2ではこう書いてきた。

for (let i = 0; i < fruits.length; i++)

やりたいのは「1件ずつ取り出す」だけなのに、書いてあるのは番号 i の面倒を見る話ばかりだよね。0 から始める、length 未満で止める、i++ を書き忘れない。どれもまちがえやすい。

番号を出さずに「1件ずつ」と言える書き方があるよ。

02 / 06

for (const 名前 of 配列) と書くと、要素が1つずつその名前に入ってくり返される。番号を書く場所はどこにも無いよ。

下の2つは出力がまったく同じ。新しくできるようになったことは無くて、同じことを短く、まちがえにくく書けるようになったんだ。

const fruits = ["りんご", "みかん"];for (let i = 0; i < fruits.length; i++) {  console.log(fruits[i]);}for (const fruit of fruits) {  console.log(fruit);}

実行結果

りんご
みかん
りんご
みかん

03 / 06

番号を自分で管理していると、こんな事故が起きる。< を <= にしただけで、無い番号まで取りに行ってしまうんだ。

要素は2つなので fruits[2] は存在しない。取りに行くと undefined が返る。エラーで止まってくれないぶん、気づきにくいバグだよ。

for...of なら、そもそも番号を書かない。どこまで回すかを配列が知っているから、この事故は起きないんだ。

const fruits = ["りんご", "みかん"];for (let i = 0; i <= fruits.length; i++) {  console.log(fruits[i]);}

実行結果

りんご
みかん
undefined

04 / 06

for の i は毎周増やしていたので let が必要だった。でも for...of で受け取る名前は1周ごとに新しく作られるので、書き換えないなら const でいいよ。

毎回ちがう値が入るのに const で大丈夫、というのは少し不思議に見えるけれど、周ごとに別の変数だから困らないんだ。

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

実行結果

6
10
16

05 / 06

全件に同じことをするだけなら forEach でも書けたよね。大きな違いは途中でやめられるかだよ。

「見つかったらそこで終わり」という処理は for...of の出番だね。

const nums = [4, 7, 9, 12];for (const n of nums) {  if (n % 3 === 0) {    console.log(n);    break;  }}

実行結果

06 / 06

for...of を覚えたからといって、章2の for が要らなくなったわけじゃないよ。使い分けはこう考えよう。

道具が増えただけ。それじゃあ、番号なしでくり返してみよう。