【JavaScript】for構文を使ってwhile構文より簡単に繰り返し構文を作る

for構文を使うことでwhile構文よりも簡単に繰り返したい処理をまとめることができます。

今回は1〜10までの数字を連続して表示させるプログラムを書いていきます。

for構文の使い方

for (let day=1; day <= 10; day++) { //①初期化処理＋繰り返しの条件＋更新の処理
   document.write(day + '<br>'); ②繰り返したいプログラム
}

①初期化処理＋繰り返しの条件＋更新の処理

for構文は（）の中に初期化処理（let day=1;）と繰り返しの条件（day <= 10;）、そして更新の処理（day++）をまとめて書きます。

②繰り返したいプログラム

そして{ } の中には表示させたいプログラム（document.write(day + ‘<br>’);）だけを書きます。

まとめ

今回の今回は1〜10までの数字を連続して表示させるプログラムの繰り返し処理では、数字の1スタートなので

let day=1;で初期化処理を行い、dayの中の数字が10以下の場合まで数字を表示させたいのでday <= 10;という繰り返し条件を書いています。そして、dayに入っている数字を表示するためにdocument.write(day + ‘<br>’);を { } の中に書いています。1ずつ数字を増やしながら表示すればいいので、更新処理でインクリメント形式でday++としています。

for構文は（）の中に初期化処理と繰り返し条件、そして更新処理を一気に書き、{ } の中には表示させたいプログラムだけを書くことができるので非常にシンプルな処理になっています。

while構文とfor構文の使い分けは？

for (let day=1; day <= 10; day++) { 
   document.write(day + '<br>'); 
}

今回の場合のように繰り返しの回数が決まっている場合や、ひとつの変数しか使っていない場合はfor構文の方が見やすくなります。

let day = 1;
while(day <= 365) {
  　document.write(day + '<br>');
　　day ++ ; 
}

しかし、何回繰り返すのわからないような繰り返し処理や、複数の変数や条件が重なって終了の条件が変わってくる場合はwhile構文の方がまとまりが良くなります。