【JavaScript】繰り返し処理について(for文・while文の使い方)

JavaScript

はじめに

今回は、JavaScriptで「for文」「while文」等の繰り返し処理について勉強したことを記載していきたいと思います。

 

for文

for文は、処理を繰り返す時に使用します。大量の処理を繰り返す際や配列を処理する際に役に立つ文です。決まった回数だけ繰り返したいときに最もよく使われるループ文になります。

 

構文

for (初期化処理; 繰り返しの条件式; 繰り返し毎の更新処理) {
  // 繰り返したい処理
}

1、「初期化処理」でカウンタ変数を設定します(例:let i = 0
2、「繰り返しの条件式」が true の間、ループ内の処理が繰り返されます
3、ループのたびに「繰り返し毎の更新処理」が実行されます(例:i++ で1ずつ増やす)
4、条件が false になるとループを終了します

 

for (let i = 0; i < 5; i++) {
  console.log(i); // 0〜4まで順に表示される
}

while文

while文も繰り返し処理を実施する際に使用する文です。条件を満たす間だけ繰り返し続けたい場合に使うループ文になります。

 

構文

while (繰り返しの条件式) {
  // 条件式がtrueの間、繰り返される処理
}

1、ループの前に条件を判定するので、条件が最初から false の場合は一度も実行されません
2、「繰り返しの条件式」が true の間だけ、ブロック内の処理を繰り返します

 

let count = 0;

while (count < 3) {
  console.log(count); // 0~2まで順に表示される
  count++;
}

 

do~while文

繰り返し処理を実施する前に、最低1回は必ず処理を実行したい場合に使うループ文が「do~while文」になります。

 

構文

do {
  // まず処理を実行しその後、条件がtrueなら繰り返す処理
} while (条件式);

1、先に処理を1回実行してから、条件を判定する
2、条件がtrueならさらに繰り返します

 

let num = 0;

do {
  console.log(num); // 0~2まで順に表示される
  num++;
} while (num < 3);

 

for~of文

配列やリストの要素を1つずつ取り出して処理したい場合に使用するループ文が「for~of文」になります。

 

構文

for (const 変数 of 配列) {
  // 要素ごとの処理
}

1、配列などの各要素に順番にアクセスします

 

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

for (const fruit of fruits) {
  console.log(fruit); // apple, banana, orange と順に表示される
}

 

for~in文

オブジェクトのプロパティ(キー)を順に取り出して処理したい場合に使用するループ文が「for~in文」になります。

 

構文

for (const プロパティ名 in オブジェクト) {
  // プロパティごとの処理
}

1、オブジェクトの全プロパティ名を順に取り出して処理します
2、プロパティの値にはオブジェクト名とキーを使ってアクセスします

 

const user = { name: "もり", country: "日本" };

for (const key in user) {
  console.log(key + ": " + user[key]);
}
// name: もり
// country: 日本

 

break

ループ処理を途中で抜けたい場合に「break」を使用します。

 

for (let i = 0; i < 5; i++) {
  if (i === 3) {
    break; // 0,1,2まで表示しループを抜ける
  }
  console.log(i);
}

 

continue

ループ処理の実行時に、次のループへ処理を飛ばしたい場合に「continue」を使用します。

 

for (let i = 0; i < 5; i++) {
  if (i === 2) {
    continue; // 2だけスキップ
  }
  console.log(i);
}

 

最後に

JavaScriptの環境構築は、この記事を参照してみてください。
【JavaScript】VSCodeでJavaScriptを使用するための環境構築を実施する – SEもりのLog JavaScript

以上、ログになります。
これからも継続していきましょう!!

JavaScriptフロントサイド関連
おすすめIT本
良いコード/悪いコードで学ぶ設計入門

「ITエンジニア本大賞2023」技術書部門で大賞を受賞した本です。
・コードの可読性
・普段意識したほうが良いこと
・リファクタリング考え方
等、普段のコードを設計する際に意識することが書かれています。
コードのあるべき姿に迷ったら一度読んでみると良い本です。

仕組みと使い方がわかる Docker&Kubernetesのきほんのきほん

Dockerって何?となったときに私が最初に読んだ本です。
Dockerがどんな仕組みで動いているのか、コマンドでは何を命令しているのかを理解できるように、イラストを多用して説明しています。

1冊ですべて身につくJavaScript入門講座

「ITエンジニア本大賞2024」技術書部門で大賞を受賞した本です。
私が次に読もうと思っている本なのでおすすめとして挙げておきたいと思います。

コメント

タイトルとURLをコピーしました