繰り返し（ループ）処理

◯◯まで繰り返す、◯◯の間繰り返すなどの特定の処理を繰り返したい場合。

- for
- while
- forEach

for (定義; 条件式; 増やす処理) { ... }

まずは構文から。

for(変数の定義; 条件式; カウンターの更新) {
    繰り返したい処理;
}

forの直後に①カウンターのiを定義し、②どのくらいまで続けるかの条件式、③カウンターをどのくらい増やすか、を一行にまとめて定義し、その後のブロックで繰り返したい処理を記述する。

またfor文のブロック内の各処理はセミコロンで区切ることを忘れずに。

使用例

for(let num = 1; num <= 100; num++) {
    console.log(num);
}

上記の例ではnumが1からスタートして、100になるまで繰り返しコンソールに数字を表示する式。

通常は最初に変数の宣言をしないといけないが、for文を使用すれば一行にまとめて記述することができる。

if文との組み合わせ技も

if文（条件式）と組み合わせることも可能。

for(let i = 1; i <= 100; i++) {
    if(i % 3 === 0) {
        console.log("3の倍数です");
    } else {
        console.log(i);
    }
}

上記の例ではiが1からスタートし、100になるまでの間に3の倍数の時とそれ以外の処理を分けて実行している。

while(条件式) { ... }

while文による繰り返し処理もある。

while(条件式) {
    繰り返す処理;
    カウンターの更新;
}

条件式がtrueである間、処理を実行し続ける。

カウンターの更新を忘れたり、終わりがない条件式にしてしまうと無限ループとなって処理が一生終わらないプログラムになってしまうので注意する。

使用例

let num = 1;

while(num < 10) {
    console.log(num);
    num += 1;
}

上記の例ではnumが1からスタートして10になるまでの間、コンソールにnumが表示される。

※10未満なので9までの表示になる。

この他にES6で新たにforEachというメソッドが使えるようになり、繰り返し処理が格段にわかりやすくなったが、それは別途記述する。しばし待たれよ！

※このnoteはProgate・ドットインストール・Udemyなどの教材から学習した内容をまとめており、初心者から中級者になるレベルを目指しています。ご指摘点あればコメントにてお願いします。
+--------------------------------------------------------------------------+
しょうみゆ@WEBエンジニア
twitter@MykiiTech
インフラエンジニアとWEBマーケティングで仕事した人。日本×フィリピンのハーフ。ごはんと仕事とおしゃべりが大好き。ワンストップでサービス提供できるフルスタックエンジニアになるべく、まずはフロントエンドエンジニアから攻め中。HTML/CSSは得意。
+--------------------------------------------------------------------------+