こちらではJavaScript学習の備忘録となります。
プログラミング初心者や他の言語にも興味、関心をお持ちの方の参考になれば幸いです。

繰り返し処理とは？

よくある例だと

『1から100までの数字を出力する』

場合などに用いる繰り返し処理のことです。
繰り返し処理を行うには「While文」と「for文」がある。

■While文

while文は下記のように、「条件式がtrueの間、{ }内の処理を繰り返す」ことができます。 {}の後にセミコロンは不要です。

script.js

while (条件式) {
  処理
}

上記『1から100まで数字を出力する』例で、while文を用いると下記のようになる。
まず条件式の判定が行われ、trueの時のみ{}の中の処理が1度実行される。
その後、再び条件式がtrueかどうかチェックされ、trueであれば処理が実行される。
条件式がfalseになるまで繰り返し処理が続く。

script.js

let number = 1;

while (number <= 100) {  // 変数numberの値が100以下の時に処理を繰り返す
  console.log(number);
  number += 1;
}

※ while文の注意点
while文を用いる場合、条件式の部分がいつかはfalseになる。
しかし、上記「number += 1;」のような変数numberを更新するコードを書き忘れてしまうと、条件が永遠にtrue(上記だと永遠に100以下)となるため、繰り返し処理も永遠に続いてしまう。
これを無限ループと呼ぶ。

■for文

できることはWhile文と同じだが、while文よりシンプルに書くことができるのが特徴。
for文では「変数の定義」「条件式」「変数の更新」の3つを括弧の中に書く。括弧の中ではそれぞれをセミコロン（;）で区切ること。

script.js

for (変数の定義; 条件式; 変数の更新) {
  処理
}

script.js

// 上記の例をfor文で書いてみる

for (let number = 1; number <= 100; number += 1) {
  console.log(number);
}

■計算式の省略

「number += 1」は「number ++」のように省略して書くことができる。
また、引き算の場合にも、「number -= 1」を「number --」と省略することができる。
while文やfor文では、この省略した書き方を使ってコードを短くすることができる。

script.js

// 足し算
number = number + 1

number += 1

number++

// 引き算
number = number - 1

number -= 1

number--

■繰り返し処理の応用

またまた、よくある例ですが、
『1から100の数字を出力してください。ただし、3の倍数の時は「3の倍数です」と出力』する場合をfor文を用いて書く。

script.js

for (let number = 1; number <= 100; number++) {
  if (number % 3 === 0) {
    console.log("3の倍数です");
  } else {
    console.log(number); 
  }
}

■配列とfor文

配列の中に格納されているすべての値を出力する。
この際、変数の値は0から始めることに注意する。

script.js

const fruits = ["apple", "banana", "orange"];

for (let i = 0; i < 3; i++) {  // iが０〜2の間ループする
  console.log(fruits[i]);  // 変数iを用いて要素を取得 
}

また、「配列.length」とすることで、配列の要素数を取得できる。
上記、for文の条件式を下記のように書き換えることができる。
配列の要素数が変わっても問題なく繰り返すことができるので便利である。

script.js

const fruits = ["apple", "banana", "orange"];

for (let i = 0; i < fruits.length; i++) {  // 条件式を、「配列.length」とする
  console.log(fruits[i]);  // 変数iを用いて要素を取得 
}

おわりに

このあたりは、基本中の基本ですね。
何かありましたらご指摘願います。
宜しくお願いいたします！！