【JavaScript】繰り返し処理まとめ

## 使用した教材
以下の動画でJavaScriptの繰り返し処理について学んだので、簡単にまとめてみました。

https://www.udemy.com/course/the-web-developer-bootcamp-2021-japan/

## JavaScriptの繰り返し処理
### for文
#### 書き方
`for (初期化式; 条件式; 増減式) { 実行したい処理 }`
```javascript:app.js
for (let i = 0; i < 10; i++) {
    console.log(i);
}

// 出力結果
// 0
// 1
// 2
// (途中省略)
// 9
```
- `let i = 0`
    - for文で使う変数の初期化式
    - 変数名の`i`は慣習的に用いられている
- `i < 10`
    - 繰り返し処理をいつまで行うかを決める条件式
    - 上記コードの場合、変数`i`が10未満の間は繰り返し処理が行われる
- `i++`
    - 変数`i`の値を更新するための増減式（値を更新しないと繰り返し処理が終わらない）
    - 上記コードの場合、変数`i`は0から1ずつ値が増えていき、`i = 10`になった時点で条件式が`false`になるので、for文から抜ける
#### 無限ループ
条件式や増減式の書き間違いにより繰り返し処理が止まらなくなり、最終的にブラウザが固まってしまう恐れがあるので注意する
#### 配列の繰り返し処理
```javascript:app.js
const classmates = ["青木", "加藤", "鈴木", "田中"];

for (let i = 0; i < classmates.length; i++) {
    console.log(`出席番号${i + 1}番: ${classmates[i]}`);
}

// 出力結果
// 出席番号1番: 青木
// 出席番号2番: 加藤
// 出席番号3番: 鈴木
// 出席番号4番: 田中
```
- `i < classmates.length`
    - 配列の要素数と同じ回数だけ繰り返し処理を行う
    - 上記コードの場合、`classmates.length`は4なので、変数`i`が4未満、すなわち0 ~ 3の間は繰り返し処理が実行される
#### ループのネスト
for文を別個に書く場合と比べて、繰り返し処理の回数が増える
```javascript:app.js
for (let i = 1; i <= 10; i++) {
    for (let j = 1; j <= 3; j++) {
        console.log(`i: ${i}, j: ${j}`);
    }
}

// 出力結果
// i: 1, j: 1
// i: 1, j: 2
// i: 1, j: 3
// i: 2, j: 1
// i: 2, j: 2
// (途中省略)
// i: 10, j: 2
// i: 10, j: 3
```
### while文
#### 書き方
`while (条件式) { 実行したい処理 }`
```javascript:app.js
let count = 0;

while (count < 10) {
   count++;
   console.log(count);
}

// 出力結果
// 1
// 2
// 3
// (途中省略)
// 9
// 10
```
- while文の`()`内に書くのは条件式のみ
- 初期化式はwhile文の手前、増減式はwhile文の`{}`の中に書く
#### for文とwhile文の使い分け
- for文は、主に繰り返し処理の回数が予め分かっている時に使う
- 一方while文は、主に繰り返し処理の回数が事前に分かっていない時に使う
### break
ループ内（主にwhile文）で使うことで、繰り返し処理を途中で終わらせることができる
```javascript:app.js
let count = 0;
while (count < 10) {
    if (count === 6) break;
    count++;
    console.log(count);
}

// 出力結果
// 1
// 2
// 3
// 4
// 5
// 6
```
### for...of
#### 書き方
`for (変数 of 列挙可能なオブジェクト) { 実行したい処理 }`
```javascript:app.js
const members = ["ヌートバー", "近藤", "大谷", "吉田", "村上"];

for (let member of members) {
   console.log(member);
}

// 出力結果
// ヌートバー
// 近藤
// 大谷
// 吉田
// 村上
```
- `let member of members`
    - `member`は、配列`members`から取り出された要素を格納しておくための変数
    - `members`の部分は、配列に限らず、順番に処理できる能力を持ったオブジェクト（列挙可能なオブジェクト）であれば良い（文字列なども使える）
#### オブジェクトのキーとバリューをfor...ofで取り出す
`for (変数 of Object.keys(オブジェクト名)) { 実行したい処理 }`
```javascript:app.js
const numbers = {
    nootbaar: 23,
    kondo: 8,
    ohtani: 16,
    yoshida: 34,
    murakami: 55,
}

for (let member of Object.keys(numbers)) {
    console.log(`${member}: 背番号${numbers[member]}`);
}

// 出力結果
// nootbaar: 背番号23
// kondo: 背番号8
// ohtani: 背番号16
// yoshida: 背番号34
// murakami: 背番号55
```
- `Object.keys(numbers)`
    - オブジェクト`numbers`のキーを取り出す

**(2024/08/30追記) さらに便利な書き方**
コメントにてご指摘いただきましたので、追記しておきます
`for (const [キー用の変数名, バリュー用の変数名] of Object.entries(オブジェクト名)) { 実行したい処理 }`
```javascript:app.js
const numbers = {
    nootbaar: 23,
    kondo: 8,
    ohtani: 16,
    yoshida: 34,
    murakami: 55,
}

for (const [player, number] of Object.entries(numbers)) {
    console.log(`${player}: 背番号${number}`);
}

// 出力結果
// nootbaar: 背番号23
// kondo: 背番号8
// ohtani: 背番号16
// yoshida: 背番号34
// murakami: 背番号55
```
- `Object.entries(numbers)`
    - オブジェクト`numbers`のキーとバリューの組の配列を返す