【解説】JavaScriptのループ文をまとめてみた【for／while】

【解説】JavaScriptのループ文をまとめてみた【for／while】

JavaScriptのループ文が主にこちら↓

順に解説してきます。

while

条件式に当てはまれば処理を行い、処理が終わったらループします。

while(条件式 trueなら処理へ) {
  // 処理を行う
  // 処理が終わったもう一度ループ
}

使い方の例がこちら↓

let num = 0;

while(num < 5) {
  console.log(num);
  num += 1;
}

0
1
2
3
4

numの値に気をつけないと、無限ループになるので注意。

do while

whileと違うのが「まず処理を行う」ということですね。

その後にループするかの条件式に入ります。

do {
  // まず処理を行う
} while (条件式 trueならもう一度処理へループ);

一見whileと同じ結果に見えますが。。。↓

let num = 0;

do {
  console.log(num);
  num += 1;
} while (num < 5);

0
1
2
3
4

最初に処理を行うので、条件式に当てはまらなくても1回目の処理が行われるのが特徴です↓

let num = 10000;

do {
  console.log(num);
  num += 1;
} while (num < 5);

10000

for

forを使えば1行でループのための式を記述することができます。

条件がtrueなら処理を行い、ループします。

for(最初一度だけ行う式; 条件式;  処理の最後に行う式) {
  // 処理
};

使い方の例がこちら。

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

0
1
2
3
4

ちなみに式部分は省略が可能です。
ただ2つ目を省略すると無限ループになるので注意。

• 1つ目を省略⇒最初一度する処理が行われない
• 2つ目を省略⇒trueになるので無限ループになる
• 3つ目を省略⇒ループ後にする処理が行われない

for in

オブジェクトに対して使うループ文になります。

const オブジェクト = {
  a: aa,
  b: cc,
}

for (const key in オブジェクト) {
  // 処理
};

使い方がこちら。

値を使うときはオブジェクト[key]のように記述します。

const fruit = {
  name: 'もも',
  num: 2,
  price: 500,
}

for (const key in fruit) {
  console.log(key);
  console.log(fruit[key]);
};

name
もも
num
2
price
500

for of

配列をループする時に使われます。

const 配列 = [];

for (const 変数 of 配列) {
  // 処理
};

「const」ではなく「let」でも良いですが、書き換え不要なことが多いため、「const」にしておきます。

使い方の例がこちら。

const fruits = ['りんご', 'おれんじ', 'もも', 'めろん']

for (const fruit of fruits) {
  console.log(fruit);
};

りんご
おれんじ
もも
めろん

ちなみに配列はforeEachを使ってもループ処理が可能です。

どちらを使ってもよいですが、同じファイルでは統一したほうがわかりやすいとのこと。

下記記事にてforEachの処理内容を解説しているので参考にどうぞ↓

2024年8月25日 【JavaScript】配列の各要素に処理をする方法【foreEach／map／filterなど】

【解説】JavaScriptのループ文で使える文【終了／スキップ】

ちなみにですがJavaScriptのループ文ないで、途中で終了させたりスキップさせることが可能です。

それがこちら。

順に見ていきましょう。

break

breakを使えば、ループの処理を終わらすことができます。

例として下記の場合、numの値が3だったらその場でループ処理を終了できます。

for(let num = 0; num < 5; num += 1) {
  if ( num === 3 ) {
    break;
  }
  console.log(num);
};

そのためコンソールログでは0~2しか反映されません↓

0
1
2

continue

continueを使えば、ループをスキップすることができます。

例として下記の場合、numの値が3だったらその時の処理はスキップされます。

for(let num = 0; num < 5; num += 1) {
  if ( num === 3 ) {
    continue;
  }
  console.log(num);
};

そのためコンソールログでは3が反映されていません↓

0
1
2
4

【解説】JavaScriptのループ文をまとめてみた【for／while】：まとめ

主なループ処理

主なループ処理中に役立つ文

ジト

JavaScriptでループ文を使う時はためしてみてね！

コーディング知識を
『チート級』に得れる教材を作成！

見てみる⋙