JavaScript

【初心者向け】JavaScriptの反復処理について優しく解説します

反復処理は、条件分岐同様、プログラミングではよく使う処理で、同じ処理を繰り返し行う場合に使用します。
この記事では、そんなJavaScriptの反復処理について、初心者向けに解説します。

反復処理は主に「while」と「for」の二つを使用して行います。

JavaScriptで反復処理【while】

While文は、条件式が「true」の場合に、反復処理を行い続ける構文です。

while文では、まず条件式で「true」か「false」の判定がされ、「true]の場合、{ }の処理が実行されます。

そして、処理が実行された後、また条件式の判定がされ、また「true」の場合は、{ }の処理が再度され、「false」の場合には、while分から離脱します。

while(条件式){
	実行する処理;
}

実際の例

  let num =1
   
	//「1」,「2」,「3」と表示される
   while(num < 4){
      console.log(num);
      num++;
    }

上記の例では、下記のような挙動が行われています。

  1. まず変数numに「1」が代入される
  2. while文の条件式の判定が行われ、numは「num<4(numは4より小さい数字)」であるため、条件式は「true」と判定
  3. 条件式で「true」のため、{ }の処理を実行する
  4. コンソールに変数numの値(1)を表示し、変数numに1を加える(numの値は2となる)
  5. { }の処理が終わったため、再び、条件式を確認し、numは「num<4(numは4より小さい数字)」であるため、条件式は「true」と判定
  6. 条件式で「true」のため、{ }の処理を実行する
  7. コンソールに変数numの値(2)を表示し、変数numに1を加える(numの値は3となる)
  8. { }の処理が終わったため、再び、条件式を確認し、numは「num<4(numは4より小さい数字)」であるため、条件式は「true」と判定
  9. 条件式で「true」のため、{ }の処理を実行する
  10. コンソールに変数numの値(3)を表示し、変数numに1を加える(numの値は4となる)
  11. { }の処理が終わったため、再び、条件式を確認し、numは4である(4は4よりは大きい数字になる)ため、条件式は「false」と判定
  12. 条件式が「false」となったため、while分から離脱

無限ループに注意

While文を使用する際には、無限ループにならないように注意が必要です。

例えば、下記のようなコードを書いた場合、初期のnumの値は1であり、その後while文の中で、numに1を足していくため、条件式である「numはー5より大きい場合」は常に「true」となってしまい、while文から抜け出すことのできない、無限ループとなります。

   let num =1
    
		while(num > -5){
      console.log(num);
      num++;
    }

while文を使用する際に、この無限ループが絶対に起こらないように注意が必要であることから、他の反復処理で代用できる場合には、他の反復処理を利用することを検討した方が良いです。

JavaScriptで反復処理【do / while】

do-while文は、ほとんどwhile文と一緒なのですが、最初に処理を実行した後、条件判定が行われる点がWhileと違います。

つまり、While文の場合には、先に条件判定を行うため、条件に合わない場合に、一度も処理は行われないのですが、do-while文の場合には、条件に合わないとしても、一度は、処理が実行されます。

do {
    実行する処理;
} while (条件式);

実際の例

let num =1
//「1」,「2」,「3」と表示される
    do{
      console.log(num)
      num++
    } while(num < 4)

while文とdo-while文の違い

上記で触れましたが、Whiler文とdo-while文の違いは、先に条件判定を行うか処理が実行されるか

の違いです。

実際の違いについて例にしてみます。

まず、While文で下記のように記述します。numの値は1であり、条件判定の部分で、「numは0より小さい場合(num < 0 ))となっているため、「false」となり、{ }が実行されることはありません。

	let num =1 
  
//何も表示されない
  while(num < 0 ){
      console.log(num)
      num++
    }

次に、同じようにdo-while文を記述してみます。

do-while文の場合、先に処理が実行されるため、まずコンソールに「1」と表示され、その後、条件判定で「numは0より小さい場合(num < 0 ))となっているため、「false」となり、do-while文から離脱します。

 let num =1

//「1」と表示
    do{
      console.log(num)
      num++
    } while(num < 0)

このように、While文とdo-while文では、挙動に違いが起こることを覚えておきましょう。

なお、do-while文についても、While文同様、無限ループが起こる可能性があるので、他の反復処理で代用できる場合には、他の反復処理を利用することを検討した方が良いです。

JavaScriptで反復処理【for】

もう一つの反復処理であるfor文は、指定した条件が「true」の場合に、反復処理を行い続ける構文であり、繰り返す範囲を指定して反復処理を実行することが可能です。

forの横の( )に初期値(変数を定義)、条件式、増化(減少)をそれぞれセミコロン(;)でつないで記述していきます。

初期値の値から変数が始まり、一度{ }の処理が実行され、処理が一通り実行されたら、変数の増加分の分だけ、変数に値が追加され、条件判定を行います。

条件判定の結果が、「false」の場合、for分から離脱し、「true」の場合、再度{ }の処理が実行されます。

for (初期値(変数の定義); 条件式; 変数の増化(減少)分) {
    実行する処理;
}

実際の例

for(let i=1 ; i < 4 ; i++ ){
      console.log(i);
    }

上記の例では、下記のような挙動が行われています。

  1. まず変数 i に初期値「1」が代入される
  2. 変数 i は1であり、条件式(変数が4より小さい数)が「true」となるため、{ }の処理を実行する
  3. コンソールに変数 i の値(1)を表示します
  4. { }の処理が一通り終わったため、変数の増加分 「i++(変数 i に1を足す)」を行います
  5. 変数 i は2であり、条件式(変数が4より小さい数)が「true」となるため、{ }の処理を実行する
  6. コンソールに変数 i の値(2)を表示します
  7. { }の処理が一通り終わったため、変数の増加分 「i++(変数 i に1を足す)」を行います
  8. 変数 i は3であり、条件式(変数が4より小さい数)が「true」となるため、{ }の処理を実行する
  9. コンソールに変数 i の値(3)を表示します
  10. { }の処理が一通り終わったため、変数の増加分 「i++(変数 i に1を足す)」を行います
  11. 変数 i は4であり、条件式(変数が4より小さい数)が「false」となるため、for文から離脱

JavaScriptで反復処理【for /of】

for/ofは、for文と同じ反復処理を行いますが、特に配列を扱う際に非常に便利なものです。

forの横の( )に変数名、反復処理を行う配列名をそれぞれofでつないで記述していきます。

{ }内では、変数を記述することで、配列に格納されている値が順番に出力されていきます。

for (変数 of オブジェクト(配列)) {
    実行する処理;
}

実際の例

const arr=["りんご","メロン","パイナップル"]

//「りんご」「メロン」「パイナップル」とコンソールに順番に表示
    for(const value of arr){
      console.log(value);
    }

上記を通常のfor文で行う場合下記のように記述になります。

※配列から要素を取得するには、配列名[配列番号]で取得する。

const arr=["りんご","メロン","パイナップル"]

//「りんご」「メロン」「パイナップル」とコンソールに順番に表示
 for(let i=0 ; i < arr.length ; i++ ){
      console.log(arr[i]);
    }

このように、配列からすべての要素を順番に取り出す場合には、for/ofを使うことでスマートに記述可能です。