ループ

続いてはループについて勉強していきましょう。
ループとは、同じ処理を複数回行うことです。例えば、配列の各要素に対して5を足すなどです。
今回は最もよく使われる2種類の書き方を覚えましょう。for文とwhile文です。

for文

for文は繰り返し処理で使われるための変数（とその初期値）を用意し、変数が条件式を満たしている間処理を繰り返します。
具体的に文法を見ていきましょう。

var ages = [10, 12, 34, 56, 7];
for(i = 0; i < 5; i++){
  ages[i] = ages[i] + 10;
}
          

1行目は全開学習した配列を宣言しています。
では2行目以降のfor(i = 0; i < 5; i++)の部分について説明します。

かっこの中身の1番目は変数の宣言と初期化をしています。iという変数を宣言して0という初期値を入れました。
2番目は繰り返しを行うための条件です。iが5未満の場合に処理を繰り返します。
3番目ではiが一つの繰り返しを終えたときどのように変化するか(増分)を書きます。
ここで、見慣れない";"という記号がついているのに気が付いたかもしれません。
これまで書いたプログラムは1行で完結していましたが、複数行のプログラムになるときは、 一つの処理の最後に";"を書くというルールがあります。
for文を書くときは忘れないようにしましょう。ただし、変数の増分の後ろには";"はつけません。

繰り返し処理したい命令は{}の中に書きます。今回は配列の全ての要素に10を足す処理を書きました。
上記のコードがどのように実行されるかfor文をばらして見てみましょう。

i = 0 // 変数の初期化
↓
i < 5 のチェック
↓
ages[0] = ages[0] + 10
↓
i++  // 1回目の処理が終わった時点でiは1つ加算され1になります。
↓
i < 5 のチェック
↓
ages[1] = ages[1] + 10
↓
i++  // 2回目の処理が終わった時点。iは2になる
↓
//4回目の処理が終わった時点まで省略。iはこのとき4になっています。
↓
i < 5 のチェック
↓
ages[4] = ages[4] + 10
↓
i++  //この時iは5になります。
↓
i < 5 のチェック  //この時点で5 < 5となり条件を満たさなくなるのでループは終了します。
          

for文のイメージがついたでしょうか?
for文の文法をもう一度まとめておきます。 言葉だけでは伝わらない点もあると思うので、ぜひコンソールなどで試してみてください。

for(変数の初期化; 繰り返しの条件; 変数の増分){
  繰り返し実行したい処理;
}
            

while文

続いてwhile文です。whileはforよりもシンプルですが、無限ループというリスクも孕んでいるので少し注意しましょう。
whileは指定した条件がtrueの時はずっと処理を続けます。

var ages = [10, 12, 34, 56, 7];

var i = 0;
while(i < 5){
  ages[i] = ages[i] + 10;
  i++;
}
          

上記のコードはfor文のところで紹介した具体例をwhileで書き直したものです。
while自体の考え方はシンプルなのでfor文より自由度があるように感じます。
ただし、i++の処理を万が一忘れてしまうと、条件の部分がずっとtrueになり、無限ループになります。 わざと無限ループにしたいとき以外は処理が落ちてしまう原因になってしまうので、無限ループさせないように細心の注意を払いましょう。

lengthを使おう

配列の章のところでlengthというプロパティを紹介しました。配列の長さを取得できるのでした。
上記のコードでは配列の長さが5と分かった上で書いていましたが、 実際は分からなかったり配列の長さをいろいろ変えたいなんてことがあります。
そんなときはlengthプロパティを使うと便利です。

var ages = [10, 12, 34, 56, 7];

var i = 0;
while(i < ages.length){
  ages[i] = ages[i] + 10;
  i++;
}
       

配列をループで回すときの常とう手段なので覚えておきましょう。

breakを使って処理を中断しよう

ループを使っていると、途中で処理を中断したくなる時が出てきますが、そんなときは"break"と書くだけで止められます。
次に紹介するif文と併せて使うことがほとんどだと思いますが、これも覚えておきましょう。

var ages = [10, 12, 34, 56, 7];

var i = 0;
while(i < ages.length){
  break;                   //breakが来たのでループ処理を中止する
  i++;
}
console.log(i);
          

breakで処理が中断するとwhile文から抜け出し、console.log(i);が実行されます。
i++が実行される前に中断しているので、iは0のままです。

もうひとつのfor文

for文またはwhile文でほとんどの繰り返し処理は実装できると思いますが、
もうひとつ、JavaScriptが持っている便利な繰り返し処理について紹介したいと思います。
上記のfor文では変数を一つずつ変化させて配列の各要素にアクセスしましたが、 実は配列を前から順番にアクセスする構文、for in文があるのです。
では例をみてみましょう。

var ages = [12, 23, 45, 56, 78];
for(age in ages){        //for(変数名 in 配列名)
  console.log(age);      //console.logはコンソールに文字列を表示してくれる関数
}
          

agesという配列を前から順番にループさせ、各要素を毎回ageという変数に入れて、処理の中で使えるようにしているのです。
普通のfor文やwhile文が汎用的なループなのに対し、for(変数 in 配列){}は配列専用の繰り返し処理となっています。
直観的でシンプルなのでとても使い勝手が良いです。配列をただループしたいときはこちらを検討してみましょう。

まとめ

覚えることが一気に増えた感じがしますが、ループ、順次実行(書いた順に実行されること)そして次に紹介する条件分岐は プログラミング言語の3つの基本構文と言われています。
高速で同じ作業を繰り返すのはコンピュータが最も得意としていることなので、 ループを習得するということはコンピュータの実力を存分に発揮できるということです。
コンソールでいろいろ試してみてくださいね