【初心者向け】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++;
    }

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

無限ループに注意

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

　let num =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);
    }

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

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を使うことでスマートに記述可能です。

「最近、独学での学習に限界を感じてませんか？」

 

私もそうでしたが、独学での学習は非常に効率が悪いですし、稼げるところまで行くのは正直、難しいです。

 

「本当に稼ぎたい！」「絶対に転職してやる！」っと思っているのであれば、しっかりとした講師から教えてもらうべきです。

プログラミンスクール大手のテックキャンプでは、ただいま無料でのカウンセリングを実施しています。
※いつまで実施しているかはわかりません。

ZOOMでのカウンセリングなので、無理な勧誘がありませんし、専門家が非常に親切になんでも相談に乗ってくれます。

無料で受けることができるので、もし、本気でプログラミンをやっていくなら、一度相談してみてくださいね！