while/do...whileでできること

whileやdo...whileは与えた条件式の真偽値がtrueである間、処理を繰り返し実行させることができるため、同じような処理を何回も繰り返し記述する手間が省ける。

while/do...whileの書き方

while-1.js

let i = 1;
while (i <= 3) {
  console.log(`${i}回目の反復です`);
  i++;
}

//コンソール
//1回目の反復です
//2回目の反復です
//3回目の反復です

まずwhile()内に条件式を入れ、trueである場合の処理をその後に記述する。

do-while-1.js

let i = 1;
do {
  console.log(`${i}回目の反復です`);
  i++;
} while (i <= 3);

//コンソール
//1回目の反復です
//2回目の反復です
//3回目の反復です

まずdo{}内にtrueである場合の処理を記述し、その後while()内に条件式を入れる。whileとは記述の順番が逆になっていることに注意する。

条件式を記述する順番がwhileとdo...whileでは逆になっていることから、whileは処理を実行する前に条件式の判定が行われる（前置判定）のに対して、do...whileは処理を実行した後に条件式の判定が行われる（後置判定）。

あまり違いがないようにもみえるが、条件式が最初からfalseだった場合に処理が異なってくるので注意が必要。

while-2.js

let i = 10;
while (i <= 3) {
  console.log(`${i}回目の反復です`);
  i++;
}

//コンソール

do-while-2.js

let i = 10;
do {
  console.log(`${i}回目の反復です`);
  i++;
} while (i <= 3);

//コンソール
//10回目の反復です

whileは処理を行う前に条件式が偽となるため、処理は実行されずコンソール上には何も表示されないが、do...whileは条件式の真偽に関わらず必ず一度処理が実行されるため、コンソール上には「10回目の反復です」と表示される。

処理が永遠に終了しないことを無限ループと言う。

while-3.js

let i = 1;
while (i <= 3) {
  console.log(`${i}回目の反復です`);
 //i++;
}

//コンソール
//1回目の反復です
//1回目の反復です
//(「1回目の反復です」が永遠に繰り返し処理される)

上記のコードの場合、i++がコメントアウトされており変数iの値は1のままとなる。そのため条件式はfalseにならず、永遠に処理が繰り返されることとなる。

無限ループはブラウザに与える負荷が大きく、フリーズの原因に原因になることから、while、do...whileを記述する場合は最初に処理が正しく終了するかを前もって確認する必要がある。