【JavaScript入門】ループ処理 – for, while, continue, break

JavaScriptの基本的な制御構文であるループ処理をみていきましょう。

ループ処理は同じ処理を繰り返すのに便利な構文です。

例えば、数値の0から9までをconsole.log()でJavaScriptコンソールに表示するにはどうするでしょう？

console.log(0);
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
console.log(6);
console.log(7);
console.log(8);
console.log(9);

これでも処理できますが、こういうわけには行かないですよね。

このような反復処理を行う制御構文をみていきましょう。

for文
while文
continueとbreak
1. continueでスキップ
2. breakで中断
まとめ

for文

先ほどの、数値の0から9までをJavaScriptコンソールに表示するような処理方法としてfor文があります。

for文は指定回数だけ繰り返す構文で、次のような形になります。

for (初期化式; ループ継続条件式; 増減式) {
  ループ内で実行する処理
}

forに続けて丸括弧()の中に順に初期化式、ループ条件、増減式をセミコロン（;）で繋ぎます。波括弧{}でブロックを作ってその中に処理するコードを記述します。

数値の0から9までをfor文を使って表示してみましょう。

for (var i = 0; i < 10; i++) {
    console.log(i);
}

初期化式を変数iとして0にします。反復条件はこのiが10未満。この条件がtrueのときにここではインクリメントを使って1増加させています。

i = 0のとき、ループ条件に当てはまりますから、logに表示して1を加えます。その次はi = 1の場合、2の場合と順に繰り返し9まで成立します。i = 10のときにループ条件がfalseとなりますので、ループ処理から抜けて終了します。

これをconsole.log()を使って表示すると次のようになります。

冒頭のconsole.log()を10行書くよりもスッキリしているのがわかります。断然、こちらで処理する方が妥当ですね。

ちなみに１から100までを順に2増やして表示するには次のようになります。

for (var i = 1; i <= 100; i += 2) {
    console.log(i);
}

ここでは条件式に等号も入れてみました。ここは終了条件をどうするかで変わってきます。増減式はここでは代入演算子を使っています。JavaScriptコンソールには1 3 5 …97 99と表示されます。

また、配列を与えて、格納されているデータを一つ一つ取り出すこともできます。

var personalData = ['Yukichi', 'Fukuzawa', 1835, 'educator', 'NAKATSU'];
for (var i = 0; i < personalData.length; i++) {
    console.log(personalData[i]);
}

変数personalDataに配列で値を入れています。ここでは福沢諭吉の名前、生年、職業、出身地を値にしてみました。

配列を取り出すにはインデックスの指定をするので、初期化式を0としてここから順に取り出します。ループ条件は配列のデータの長さをlengthを使って与えています。ここでは5になりますから、0から４までのインデックスを指定して値を順に取り出していくということになります。

順に取り出せているのがわかります。

この配列を逆から取り出すには次のようになります。

for (var i = personalData.length - 1; i >= 0; i--) {
    console.log(personalData[i]);
}

初期化式を配列の長さから１を引いたものとします。インデックスが０から始まるための調整です。そしてこれが正の値で有る限り反復処理をします。ここではデクリメントを使って初期化式の値を順に１引いて反復処理をしているわけです。

インデックスの最後の値から順に取り出されているのがわかります。

while文

反復処理の構文として、while文もあります。

while文は条件式によってループを制御する構文で、次のような形になります。

while(条件式) {
  条件式がtrueの時に実行される処理
}

先ほどと同じ配列を使って、while文で処理してみます。

var personalData = ['Yukichi', 'Fukuzawa', 1835, 'educator', 'NAKATSU'];
var i = 0;
while(i < personalData.length) {
    console.log(personalData[i]);
    i++;
}

配列は同じものです。配列はインデックスを使って取り出すので、初期値をi = 0とします。whileに続けて丸括弧()の中に条件式を書きます。この場合インデックスのiが配列の長さよりも小さい時に処理を行うということになります。波括弧{}の中に表示する処理を書いています。インデックスを指定して表示しますが、そのあとにインクリメントでインデックスの値を１増やしています。こうして、またwhileの条件式に戻って判定し、これを繰り返して、条件式がfalseになったらループを抜けます。

実行するとJavaScriptコンソールには次のように表示されます。

for文と同様に取り出されているのが確認できます。

continueとbreak

for、whileを使って反復処理をここまでやってきました。これまではあらかじめ決められた終了条件になった時にループを終了する形でしたが、特定の条件の時にループを強制的にスキップしたり中断したい場合があります。このような場合に利用できるのが、continueとbreakです。

continueでスキップ

まずcontinueからやって行きましょう。

continueは、条件に当てはまった時に、その処理をスキップして次の処理を繰り返すという時に使います。

先ほどと同じ配列を使ってfor文でやってみましょう。

var personalData = ['Yukichi', 'Fukuzawa', 1835, 'educator', 'NAKATSU'];

for (var i = 0; i < personalData.length; i++) {
    if (typeof personalData[i] !== 'string') continue;
    console.log(personalData[i]);
}

ブロック処理の中に1文追加されています。

if (typeof personalData[i] !== 'string') continue;

typeofで配列の値のデータ型を取り出して、これが文字列型で無い場合にcontinueするという意味です。

これは、

if (typeof personalData[i] !== 'string') {
    continue;
}

と書いたり、

if (typeof personalData[i] !== 'string') {continue;}

とも書くことができますが、1行でスッキリ書いています。

配列の中に文字列では無いものが一つあります。数値型です。これがcontinue処理によってスキップされるコードになっています。

実行するとこうなります。

数値がスキップされて表示されているのが確認できます。これがcontineの処理です。

breakで中断

次はbreakをやって行きましょう。

breakは、条件に当てはまった時に、その処理で中断し処理を終了する時に使います。

continueのコードを書き換えてみます。

var personalData = ['Yukichi', 'Fukuzawa', 1835, 'educator', 'NAKATSU'];
for (var i = 0; i < personalData.length; i++) {
    if (typeof personalData[i] !== 'string') break;
    console.log(personalData[i]);
}

contineがbreakになった以外は先ほどと同じコードです。

ここでは、typeofで配列の値のデータ型を取り出して、これが文字列型で無い場合にbreakするという処理になります。

実行するとこうなります。