【新人コーダーがJavaScriptを習得する】vol.07 〜JavaScriptのfor文のループ処理について〜【後編】

こんにちは！コーダーの平原です！
【vol.07 〜JavaScriptのfor文のループ処理について〜】の後編です！
前編では、for文のループ処理を行う為の基本的な構文と、for…in、for…of文について学びました。
今回は、for文のループ処理の停止と再開、forEachメソッドについて学んでいきたいと思います！

前回までの内容です。↓↓↓↓

breakとは
continueとは
forEachメソッドとは
まとめ

1. breakとは

breakは、for文などのループ処理の停止を行う場合に使用します。条件分岐で、特定の条件下で処理を停止するという構文は以下のようになります。

for (let i = 0; i < 10; i++){
  if (i === 5){
    break;
  }
  console.log(i); //0、1、2、3、4が返されます
}

上記の式では、初期値のi(0)から10までの間の10回分、1回繰り返すごとに1ずつ増えながらループ処理が実行され、iが5と等しくなったら処理を停止するという条件分岐を行っています。

2. continueとは

continueは、for文などのループ処理で、特定の条件下だけ処理を実行させない場合に使用します。
breakと異なるのは、ループ処理を完全に停止していないということです。
特定の条件下以外は、ループ処理は再開されます。

for (let i = 0; i < 10; i++){
  if(i === 5){
    continue;
  }
  console.log(i); //0、1、2、3、4、6、7、8、9が返されます
}

上記の式では、初期値のi(0)から10までの間の10回分、1回繰り返すごとに1ずつ増えながらループ処理が実行され、iが5と等しくなった場合のみ処理を実行させないようにしています。
breakとの違いを理解する為に、先程の式のcontinueをbreakに置き換えてみましょう。

for (let i = 0; i < 10; i++){
  if(i === 5){
    break;
  }
  console.log(i); //0、1、2、3、4が返されます
}

continueでは、5で処理が実行されず、6から10までの処理は引き続き実行されているのに対し、breakでは、5でループ処理が停止しているのがわかります。

3. forEachメソッドとは

forEachメソッドは、配列の各データに対して、同じような処理を実行させたい場合に使用します。
基本的な構文は以下の通りです。

let 変数名 = [配列];
変数名.forEach(コールバック関数);

では実際に配列の各データに処理を実行してみましょう。

let team = ['国則','西野','矢田','園田','山田'];
team.forEach(function(value, index){
  let number = index + 1;
  console.log(`${number}番目に走るのは${value}さんです。`);
  //1番目に走るのは国則さんです。
  //2番目に走るのは西野さんです。
  //3番目に走るのは矢田さんです。
  //4番目に走るのは園田さんです。
  //5番目に走るのは山田さんです。 が返されます
});

上記の式では、teamに格納した配列のデータの数分、コールバック関数で記述した処理を実行しています。
コールバック関数の引数を使用し、配列の各データの値をvalueに、配列の各データのインデックス番号をindexに指定することで、ループ処理を行いながら、各データの値やインデックス番号を取得することができます。
for文と違って、ループ処理をする回数や、増減式などを気にすることなく繰り返し処理を行うことが可能です。
又、forEachメソッドの場合、breakやcontinueを使用することはできません。

4. まとめ

【〜JavaScriptのfor文のループ処理について〜】後編では、ループ処理の停止を行うbreak、特定の条件下だけ処理を実行させない場合に使用するcontinueについて、そして配列の各データに対して同じような処理を実行することができるforEachメソッドについて学びました。
ループ処理には他にも、while、do…while文などがあり、引き続きそちらも学んでいきたいと思います！

参考サイト :

【新人コーダーがJavaScriptを習得する】vol.07 〜JavaScriptのfor文のループ処理について〜 【後編】

1. breakとは

2. continueとは

3. forEachメソッドとは

4. まとめ