ループ
JavaScriptでは、繰り返し処理を行うための構文がいくつか用意されています。
for文はループの代表的な構文で、主にカウンター付きループができます。
また、ほかにも以下の構文があります。
-
while: 条件を満たしている間ループ、無限ループ -
forof: イテレーター（配列）を使ったループ
ここからは各構文の詳細を解説していきます。
for文
for文は主に以下のケースで使われます。
- 今何回目のループなのか知りたいとき
- 数値を一定間隔で増やしたり減らしたりしたいとき
構文はこちらです。
for (初期化式; 条件式; 変化式) {
// 処理
}
それぞれの式には役割があります。
- 初期化式: ループ全体が始まる前に一度だけ実行される
- 条件式: 次のループを始めていいのかチェックする
-
===などを使って真偽値にするとわかりやすい
-
- 変化式: 各ループが始まる前に実行される
例
例えば、1から10を足した数=55を出力するコードを書いてみます。
公式を使ってもいいのですが、ここでは順番に足す処理を書きます。
このとき、1から10を順番に処理するために、for文が使えます。
それぞれの式や処理では以下のことをするようにします。
- 初期化式: 変数
indexを1で初期化 - 条件式:
indexが10以下（index <= 10）ならループを続ける - 変化式:
indexをインクリメント（1増やす）
let sum = 0
for (let index = 1; index <= 10; index++) {
sum += index
}
console.log(sum) // 55
このコードは以下の手順で実行されます。
- 初期化式が実行され、変数
indexが1で初期化される - ループに入り、
sumにindexの値=1が足される - 条件式がチェックされ、
indexは10以下なのでループは中断しない -
indexをインクリメントする=1を足す -
indexが10を超えるまで2~4を繰り返す -
sumの値がコンソールに出力される
条件式の書き方のコツ
条件式の書き方には、ちょっとしたコツがあります。
for文は、条件式を満たしているうちはループが継続されます。
そのため、最後のループでは条件式を満たす値がindexに入っています。
条件式index <= 10を最後に満たすのはindex == 10のときなので、最後に処理が実行されるときindexは10です。
このとき最初は1で最後が10なので、1から10の和が計算されます。
while
whileを使うと、条件を満たしているうちはループする処理ができます。
前述のfor文でも条件式を使えば実装できますが、そのような処理の場合whileのほうが見た目がすっきりしやすいです。
構文はこちらです。
while (条件式) {
// 処理
}
whileは以下の用途に使えます。
- 条件を使ったループ
- 無限ループ
無限ループ
無限ループを実装するのは非常に簡単です。
while文の条件式にtrueを入れ、あとは適当に処理を書くだけです。
以下のコードは無限ループのサンプルです。
ブラウザで次のコードを実行した場合、最悪ブラウザを強制終了することになります。
実行は自己責任でお願いします。
while(true) {
console.log('無限ループ')
}
// 無限に「無限ループ」が出力され続ける
なお、無限ループといえば悪なイメージがあるかもしれませんが、使うときはたまにあります。
条件を使ったループ
もちろん、条件式にちゃんとした条件を入れることもできます。
ここではフィボナッチ数列を生成するコード実装してみます。
フィボナッチ数列は前の2つの数字を足していく数列です。
この数列は無限に続くので、今回は1000以上の数字が出た時点でループを終了します。
以下は簡単に実装したものです。
const result = [1, 3] // 初期値
while (result.at(-1) < 1000) {
result.push(result.at(-1) + result.at(-2))
}
result // [1, 3, 4, 7, 11, 18, 29, 47, 76, 123, 199, 322, 521, 843, 1364]
atメソッドとは
配列のatメソッドは、インデックスを使って配列の要素を取得するものです。
result[index]と大体同じですが、atは負の数を入れることで最後から数えた要素を取り出せます。
このwhileループの中では、resultの最後から2番目と1番目の要素を足し、配列に追加しています。
そして配列の最後の要素が1000を超えた時点でループは終了します。
while(true)とbreakを使って実装することもできます。
const result = [1, 3] // 初期値
while (true) {
if(result.at(-1) > 1000) break
last.push(result.at(-1) + result.at(-2))
}
result // [1, 3, 4, 7, 11, 18, 29, 47, 76, 123, 199, 322, 521, 843, 1364]
このコードでは、result.at(-1)が1000を超えていたらbreakでループを終了しています。
それ以外は上と大体同じです。