JavaScriptに限らず、プログラミングの中では同じ処理を何度も繰り返す処理を行うことはとても多いです。
全く同じ処理を10回行う時、どのようにしてJavaScriptのコードを書きましょうか？
console.log("処理");
/* 10回分続く */
console.log("処理");
上記のようにすることもできますが、10回だけならこの記述方法でも不可能ではありませんが、これが100回繰り返すとなるとどうでしょうか？
もちろん、何度も書くことは不可能ではありませんが、非効率ですし、何らかの修正や変更が入った場合、一つづつ変更しなければならない可能性もあるので、管理面も大変です。
このようなケースでは下記のようなfor文を使用すれば、
for(let i=0;i<10;i++){
console.log("処理");
}
このように短く表現することができます。
こういった繰り返して処理する場面は非常に多いので、JavaScriptを覚える上で繰り返し処理はとても大切です。
本記事では同じ処理を繰り返しで記述できるfor文及びwhile文について解説します。
基本の反復処理 for
forの構文は下記のようになっています。
for( 初期処理 ; 継続条件 ; ループ毎の処理 ){
/* 処理 */
}
冒頭のfor文では初期処理にlet i=0を指定しています。つまり変数iを0で定義することを意味します。続いて、継続条件はiが10未満の状態のとき、つまり10以上になったらループを終了します。ループ毎の処理は初期処理で定義したiに1を加算することです。
全体をまとめると、iが0の状態から1ずつ値を加算し、10以上になったらループを終了します。これで/* 処理 */を10回実行することができます。
forで配列の値を取り出す
それでは配列の値を、for文を使ってひとつずつ取り出してみましょう。
const framework = ["Vue","React","Anguler"];
for(let i=0;i<framework.length;i++){
console.log(framework[i]);
}
先程のfor文と違って、配列の長さを参照する.length属性を継続条件に指定しています。直接3を指定しても動きますが、.lengthを使うことで配列の長さが変わっても対応することが可能です。
さらに、下記のようにfor of文を使用すれば、配列表示をさらに短く表現できます。
const framework = ["Vue","React","Anguler"];
for(let data of framework){
console.log(data);
}
上記のfor of文は配列のframeworkから値をひとつづつ取り出し、dataに代入しています。
while文でさらにシンプルに
while文は継続条件のみをチェックし、一致しない場合ループを終了します。
let n = 2
while( n < 256 ){
n = n * n;
console.log(n); /* 4,16,256 */
}
ループする回数が予め決まっていない場合、継続条件のみ決まっている場合などに使用すると良いでしょう。
for/whileの繰り返し処理についてのまとめ
反復処理はJavaScriptだけでなく、プログラミングにおける基本です。同じ内容を何度も実行する時、配列の値を取り出す時、連番で何かを実行する時など、様々な処理に応用できます。
今回ご紹介したfor文、While文のほかに、配列データの繰り返し処理に便利なforEach文もありますが、別の記事で詳しくご紹介いたします。
コメント