【新人コーダーがJavaScriptを習得する】vol.07 〜JavaScriptのfor文のループ処理について〜【前編】

こんにちは！コーダーの平原です！
今回は、繰り返して処理を実行したい場合に使用する、for文のループ処理について学んでいきたいと思います。
前編と後編に分けてご紹介します！

前回までの内容です。↓↓↓↓

for文のループ処理とは
for文の基本的な使い方
for…in文
for…of文
まとめ

1. for文のループ処理とは

for文のループ処理とは、一定回数の繰り返し処理を実行したい場合に使用します。
for文では、ループ処理の条件を指定する際に、「初期化式」「条件式」「増減式」の3つの引数を指定します。

for (初期化式; 条件式; 増減式) {
  //繰り返す処理を書きます
}

「初期化式」には、繰り返しの処理が実行される前の初期の値を、「条件式」には、繰り返しの処理を終了する条件を指定し、「増減式」には、初期の値をどのように増減させるかの式を指定します。
この条件を満たしている間は、trueが返され、ループ処理が実行されます。

2. for文の基本的な使い方

実際に引数に値を指定した例です。

for (let i = 0; i < 10; i++) {
  console.log('for文のループ処理を学ぶ！');
}

上記の式では、初期値のi(0)から10までの間の10回分、ループ処理が実行されます。
実行結果は「for文のループ処理を学ぶ！」がコンソール上に10回表示されます。
そして初期値のiは、1回繰り返すごとに1ずつ増えていきます。
尚、「初期化式」では、変数を宣言することも可能です。

3. for…in文

for…in文は、オブジェクトのプロパティ名に対して処理を実行したい場合に使用します。

for (変数 in オブジェクト) {
  //繰り返す処理を書きます
}

オブジェクトから取得したプロパティ名は、1つずつ変数に代入され、
取得できるプロパティが無くなったら自動的に処理が終了されます。

let favorite = {
  color: '緑',
  food: 'たこ焼き',
  drink: 'ビール' 
};
for(let item in favorite) {
  console.log(item);
}

実行結果は、コンソール上に「color」「food」「drink」が出力されます。
「item」には、「favorite」に格納されたプロパティ名が代入されます。
各プロパティの値を取得する場合は、以下のように書きます。

let favorite = {
  color: '緑',
  food: 'たこ焼き',
  drink: 'ビール'
};
for(let item in favorite) {
  console.log(favorite[item]);
}

実行結果は、コンソール上に「緑」「たこ焼き」「ビール」が出力されます。

4. for…of文

for…of文は、配列の値に対して処理を実行したい場合に使用します。
これは、ES6(ES2015)から導入された構文です。

for (変数 of 配列) {
  //繰り返す処理を書きます
}

配列から取得した値は、1つずつ変数に代入され、取得できる値が無くなったら自動的に処理が終了されます。

let eraName = ['昭和', '平成', '令和'];

for(let item of eraName) {
  console.log(item);
}

実行結果は、コンソール上に「昭和」「平成」「令和」が出力されます。
「item」には、「eraName」に格納された配列の値が数の分だけ代入されます。

5. まとめ

for文のループ処理は、3つの引数で条件を指定し、その条件を満たしている間、ループ処理を実行できるということ、そして、for…inはオブジェクトのプロパティ名を、for…ofは配列の値を取得するという特徴があり、取得した値の数分、ループ処置を実行できるということができました。
次回は、for文のループ処理の停止と再開、forEachメソッドについて学んでいきたいと思います！

参考サイト :

【新人コーダーがJavaScriptを習得する】vol.07 〜JavaScriptのfor文のループ処理について〜 【前編】

1. for文のループ処理とは

2. for文の基本的な使い方

3. for…in文

4. for…of文

5. まとめ