while

このページでは豊富な例を用いてJavaScript（js）のwhile文の使い方を学ぶことができます。

JavaScript（js）のwhile文はループ処理を実現する制御構文です。

whileキーワードの後に条件式（値でも可）を指定し、この条件式がtrueと評価されている限りwhile節（while文ブロック）に記述した処理が繰り返し実行されます。
条件式がfalseと評価されときにwhile節のループ処理は終了します。

continue文やbreak文と組み合わせて繰り返し処理のスキップや強制的な終了を実現することができます。

// 記述例

while (条件式) { // 処理が単一の文であれば{}（波括弧）は省略できます
  // 条件式がtrueの場合に繰り返し実行される処理
}

TL;DR

基本

// 条件式がtrueとなる場合に処理が実行される
let number1 = 0;
while (number1 < 3) {
  console.log('js' + number1);
  number1++;
}
==> js0
==> js1
==> js2





// 条件式がfalseの場合
let boolean2 = false;
while (boolean2) {
  console.log('javascript');
}
==> 出力なし





// while文ブロックの処理が単一文であれば{}波括弧は省略できます
while (true)
  console.log('FooBarNinja');
------------------------------
FooBarNinja
FooBarNinja
...
無限ループ
------------------------------

処理のスキップ（continue）

// continue文が評価されると該当ループがスキップされる
let number1 = 0;
while (number1 < 10) {
  if (number1 % 2 === 1) {
    number1++;
    continue;
  }
  console.log(number1++);
}
==> 0
==> 2
==> 4
==> 6
==> 8

処理の強制終了（break）

// break文が評価されるwhile文の処理を終了することができる
let number1 = 0;
while (true) {
  if (number1 === 2) break;
  console.log(number1++);
}
==> 0
==> 1

while文内のreturn文の挙動

// return文が評価されると処理が終了する

const function1 = () => {
  while (true) {
    return 'js';
  }
  // returnが先に評価されるのでこの処理は実行されない
  console.log('javascript');
};

const returnValue1 = function1();
console.log(returnValue1);
==> js

解説

// 記述例

while (条件式) { // 処理が単一の文であれば{}（波括弧）は省略できます
  // 条件式がtrueの場合に繰り返し実行される処理
}

基本

while文は指定した条件式がtrueと評価される間、記述した処理をループ実行し続ける制御構文です。

whileキーワードの位置に処理がくると条件式が評価されます。
条件式がtrueであれば{}波括弧（whileブロック）内に記述した処理を実行し、すべての処理を実行し終えたら再度条件式を評価するというループが繰り返されます。
条件式がfalseと評価されるとwhile文のループ処理は終了し、次の処理へと移ります。

whileブロック内に記述する式が単一の文である場合、whileブロックを表現する{}（波括弧）は省略することができます。

// 条件式がtrue
let number1 = 3;
while (number1 > 0) {
  console.log(number1);
  number1--;
}
==> 3
==> 2
==> 1





// 条件式がfalse
const string2 = '';
while (string2) {
  console.log('FooBarNinja');
}
==> 出力なし





// while文ブロックの処理が単一文であれば{}波括弧は省略できます
while (1 > 0) console.log('js');
------------------------------
js
js
...
無限ループ
------------------------------

処理のスキップ（continue）

for文でのcontinue文などと同様に、while文でもcontinue文を使用することでループ処理をスキップすることができます。

while文内でcontinue文が評価されると、continue文以降に記述された処理は実行されずに条件式の評価に処理が移ります。

let number1 = 0;
while (number1 < 10) {
  // 3で割り切れない場合は処理をスキップ
  if (number1 % 3 !== 0) {
    number1++;
    continue;
  }
  console.log(number1);
  number1++;
}
==> 0
==> 3
==> 6
==> 9

処理の強制終了（break）

for文でのbreak文などと同様に、while文でもbreak文を使用することでループ処理を強制的に終了させることができます。

while文内でbreak文が評価されると、break文以降に記述された処理は実行されずにwhile文の外側へと処理が移ります。

let number1 = 0;
while (true) {
  // 2で割ったときの商が2であれば処理を終了させる（number1が4の場合）
  if (number1 / 2 === 2) {
    break;
  }
  console.log(number1);
  number1++;
}
==> 0
==> 1
==> 2
==> 3

while文内のreturn文の挙動

while文内でreturn文を使用すると、break文の使用時のようにループ処理を終了させることができます。

しかし、return文を使用する場合はwhile文のみならず一連の処理を終了させることに気をつけてください。たとえば以下のコード例ではwhile文の処理のみだけでなく、関数自体の処理を終了させている（返り値を返す）ことに注意してください。

const function1 = function () {
  while (true) {
    return 100;
  }
  // 実行されない
  console.log('FooBarNinja');
};

const returnValue1 = function1();
console.log(returnValue1);
==> 100

1次情報

while - MDN web docs