【JavaScript】反復処理のやり方(for文)

反復処理とは?

構文意味
for(初期化処理; 反復の条件; 反復の終わりの処理){反復内容の処理}処理を繰り返す

反復の条件が満たされる限り、反復内容の処理を何度も繰り返す処理のことです。
言葉だけでは難しいので実際にソースコードを見ながら解説していきます。

下のソースコードは反復処理のcntの値がどのように変化するかをログに表示するプログラムです。

実行結果

0

1

2

このプログラムで行った処理は一つずつ見ると以下のようになります。

① 2行目の let cnt = 0; で変数cntの値に0を代入する。
② cnt < 3; で数を比較(この場合はcntが3より小さいかどうか)する。
③ ②の式がtrue(式が成り立つ)なので{}内の処理を行う。
④ コンソールにログを表示する。cntの値は0なのでログに0と表示。
⑤ 2行目に戻りcnt++(cnt = cnt + 1)の処理をする。現在cntの値は1。
⑥ cnt < 3; で数を比較する。
⑦ ⑥の式がtrueなので{}内の処理を行う。
⑧ コンソールにログを表示する。 cntの値は1なのでログに1と表示。
⑨ 2行目に戻りcnt++の処理をする。現在cntの値は2。
⑩ cnt < 3; で数を比較する。
⑪ ⑩の式がtrueなので{}内の処理を行う。
⑫ コンソールにログを表示する。 cntの値は2なのでログに2と表示。
⑬ 2行目に戻りcnt++の処理をする。現在cntの値は3。
⑭ cnt < 3; で数を比較する。
⑮ ⑭の式がfalse(式が成り立たないので)なのでループ処理をやめる。

上に書いたように②~⑤、⑥~⑨、⑩~⑬と同じ処理を繰り返していますね!
これがfor文の基礎となります。

反復処理は同じ処理を指定回数するときには非常に便利なプログラムですが、書き方を間違えると反復を抜け出せなくなる無限ループに陥る可能性があるので注意が必要です。

無限ループになってしまうとブラウザがフリーズしたり、ページを閉じようとしても閉じれなくなったりします。

下のソースコードは実際に無限ループになるプログラムです。
※実行する際は自己責任でお願いします。

実行結果

3
4
5
6
7
…以下無限に続く

① 2行目の let i = 3; で変数iの値に3を代入する。
② i != 2; で数を比較(この場合はiが2以外かどうか)する。
③ ②の式がtrueなので{}内の処理を行う。
④ コンソールにログを表示する。
⑤ 2行目に戻りi++(i = i + 1)の処理をする。
⑥ ②に戻る。

iの値が2になることはないので②~⑥をこれをずっと繰り返すことになります。

無限ループになるとブラウザがフリーズなどして作業に支障が出るので、反復処理を使う際には終えることのできるプログラムかどうかよく考えて使いましょう。

タイトルとURLをコピーしました