[Javascript入門] 全てのループ処理方法まとめ

はじめに

Javascriptの開発において、ループ処理は必ずといっていいほど利用する処理の一つです。

ここでは、そのループ処理方法をまとめました。

ループ処理まとめ

For文

一番身近なループ処理として「for」が挙げられます。
このfor文は指定された条件がfalseであると評価されるまで繰り返します。

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

// Console: 0
// Console: 1
// Console: 2
// Console: 3
// Console: 4

while文

while分は条件式がtrueの間ずっと繰り返し処理を行います。
基本的に宣言や初期化はwhile分の外で宣言し、falseになる条件の処理はwhile内に記載します。

let num = 10;
while(num < 15) {
  console.log(num);
  num = num + 1;
}

// Console: 10
// Console: 11
// Console: 12
// Console: 13
// Console: 14

do...while文

do...while分はwhile分と同じく条件式が「true」を返す間ずっと繰り返し処理を行いますが、必ず1回は繰り返し処理が実行されます。

let num = 0;
do{
  console.log(num);
  num++;
} while(num < 3)

// Console: 0
// Console: 1
// Console: 2

for...in文

for...in分はオブジェクトに含まれているプロパティ名を順番に取得します。

let fruit = [{id:1, name: "Apple"}, {id:2, name:"Orange"}, {id:3, name:"Grape"}];

for(const key in fruit){
  console.log(fruit[key].id + ":" + fruit[key].name);
}

// Console: 1:Apple
// Console: 2:Orange
// Console: 3:Grape

for...of文

for...of文は反復可能なオブジェクトのプロパティ値に対してループ処理を実行します。

let fruit = ["Apple", "Orange", "Grape"];
for(const value of fruit){
  console.log(value);
}

// Console: Apple
// Console: Orange
// Console: Grape

forEach文

forEach文は配列の各要素に対して順番に取り出す場合に利用します。

const data = [1, 2, 3, 4, 5];
data.forEach(num => console.log(num));

// Console: 1
// Console: 2
// Console: 3
// Console: 4
// Console: 5

最後に

今回は、javascriptで利用するループ処理をすべてまとめてみました。それぞれの詳しい使い方については、さまざまなサイトで紹介されていると思いますので、本記事ではさわりのみとなります。