JavaScript入門 for と while の使い分け

ループの回数が明確な場合は for。

ループの回数が不明な場合は while。

for の具体例

長さが10の配列があります。

この配列の各要素には、1−5までのランダムな数値が入っています。

この配列の要素をループで回して、すべて表示するプログラムを書いてみます。

なお、長さが10で1−5までのランダムな数値が入っている配列を作るには、以下の関数を実行するとします。

const createRandomNumberArray = () => Array.from({length: 10}, (_) => Math.floor(Math.random()*(5-1)+1));

const myArray = createRandomNumberArray();
console.log(myArray); //[2, 1, 2, 2, 2, 1, 2, 2, 4, 2] などのランダムな配列ができる

このケースの場合、ループの回数 = 配列の長さ ということが分かっているので、for を使います。

const myArray = createRandomNumberArray();
console.log('My array is ', myArray);

for(let i = 0; i < myArray.length; i++){
  console.log(myArray[i]);
}

配列内のすべての要素の値が、順番に表示されます。

while の具体例

続いて while のケースです。

先ほどと同様に、長さが10で1−5までのランダムな数値が入っている配列を使います。

今回は、配列の要素を順番に足していき、合計が5を超えるまでループします。

この場合は、ループの回数が不明です。

なぜなら、配列の要素の値によって、何回ループするかが変わるためです。

while を使ってみます。

const myArray = createRandomNumberArray();
console.log('My array is ', myArray);

const limit = 5; //合計値の限界
let sum = 0; //現在の合計値
let index = 0; //現在のindex

while(sum <= limit){
  console.log(myArray[index]);
  sum = myArray[index] + sum;
  index++;
}

まとめ

以下のように意識することで、なんとなく使い分けができると思います。

  • ループの回数が明確な場合は for
  • ループの回数が不明な場合は while

5回ループさせて表示したい(ループ回数が明確なのでfor)

for(let i=0; i<5; i++){
  console.log('Hi tamibouz');
}

unknownValue をインクリメントして、5を超えるまで表示したい(ループ回数が不明なのでwhile)

let unknownValue = Math.floor(Math.random()*(5-1)+1); //ランダムなので値は不明
console.log(unknownValue);

while(unknownValue < 5){
	console.log('Hi tamibouz');
  unknownValue++;
}

※forループの場合でも break を使えば while と同様のことはできます