【JavaScript】while文 - 反復処理 / 同じ処理を繰り返す処理

JavaScriptのwhile文（反復処理）について解説します。

while文

while文は“反復処理を実現する構文”です。

基本的にはfor文と同じ役割を担いますが、while文は反復回数が決まっていない場合に使うことが多くあります。

基本構文

while( 条件式 ) {
    // 処理...
}

条件式、処理の部分は処理に合わせて記述します。

各項目の内容は次の通りです。

処理順序

while文の処理順序をサンプルコードと合わせて以下に示します。

1.条件式

条件式は最終的に論理値（true/false）となる式です。

そのため、比較演算や論理演算などを使用することが可能です。

let num = 1;

while ( num < 30 ) {
    // 処理...
}

サンプルコードではnum < 30の部分です。

2.継続・終了の判定

条件式の演算結果がtrueの場合は継続、falseの場合はwhile文を終了します。

3.処理

処理（ブロック{}内）を実行します。

let num = 1;

while ( num < 30 ) {
    num *= 2;
    console.log(num);
}

サンプルコードでは４〜５行目の部分です。

while文の注意点は、for文のように条件式に使う変数の『変化式』がないことです。

そのため、ブロック内の処理で変化式と同等の処理を行う必要があります。

4.繰り返し

『1.条件式』に戻ります。

以上がwhile文の処理順序です。

ここまでのサンプルコードを実行すると次の結果になります。

2
4
8
16
32

処理順序（具体例）

上記サンプルコードの処理順序を以下に示します。

６回目の条件式は演算結果がfalseになり、ブロックの処理を実行せずに終了します。

while文の処理を掴むポイントは条件式です。

サンプルコードでは変数numに条件式の演算結果が依存します。

そのため、変数numがどのように変化し、条件式がどのタイミングでfalseになるかを意識するとwhile文の全体的な処理を理解しやすくなります。

サンプル

let total = 0;

let num = 1;

___ih_hl_start
while ( num <=10 ) {
    total += num;
    num++;
}
___ih_hl_end

console.log(total);

55

５〜８行目がwhile文です。

このソースコードは1〜10までの整数値の合計値を算出します。

無限ループ

無限ループは“終了しない反復処理”です。

例えば、while文の条件式にtrueを記述すると無限ループになります。

ただし、JavaScriptの無限ループは動作に障害を起こす可能性があります。

ブラウザではタブがフリーズすることがありますが、その場合は一度タブを終了することで、プログラムの実行を終了することが可能です。

while( true ) {
    console.log("infinite loop.");
}

infinite loop.
infinite loop.
infinite loop.
........