JavaScriptのループ - 駆け出しのエンジニア日記

ループとは言葉通り、繰り返し処理のことです。

JavaScriptにおいて同じような処理を繰り返したい時があります。

そのために同じコードを繰り返し書くのは時間もかかりますし、記述ミスが出てくるかもしれないので非効率です。

そこで使うのがfor文となります。

for構文の書き方

　for (初期化式; 条件式; 増減式) {
 //繰り返し処理
　}

サンプルとし1〜10の数字を出力したいと思います。

・for文使わなかった場合

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)
console.log(10)

このようになります。

・for文使った場合

for (let i = 1; i < 10; i++){
 console.log(i);
}

3行で記述ができます。

 初期値：let i = 0;
 条件式：i < 10;
 増減値：i++;

※変数名 i は特に決まりはないのでなんでも良いです。

もう少しサンプルを書いてみます。

・偶数のみ出力したい時

for (let i = 0; i < 20; i += 2){
 console.log(i);
}

上記のように記述できます。

0に+2がされ、20までループ処理が走ります。結果0~20までの偶数が出力されます。

・配列をループ処理する場合

let nameLists = ['佐藤', '伊藤', '鈴木', '木村', '田中', '高橋'];
 
for (let i = 0; i < nameLists.length; i++) { 
 console.log (nameLists[i]);
}

// 出力結果
　佐藤
　伊藤
　鈴木
　木村
　田中
　高橋

配列の全要素をループ処理する場合は、インデックス0から開始し、最後のインデックス（長さ-1）まで繰り返すように記述します。

条件式のところでnameLists.lengthを使っていますが、これは配列の長さを取得できるメソッドです。

nameLists.lengthの書き方は配列のループ処理の定番になるので覚えておきましょう。

最後に、、、

※無限ループには注意してください。

//実行しないように
for (let i = 20; i >=0; i ++){
 　　console.log(i);
}

上記のようなコードを書いてしまうと、終わりがないループ文になってしまいます。

ひどい場合はブラウザ画面が固まったり、強制終了なんてこともあるので記述しないようにしてください。