【JavaScript】for/forEach/for-in/for-ofなどループ処理解説

for文とは？

for文とは繰り返し処理のことを指します。

繰り返し処理はプログラミングの基本で、同じ処理を繰り返し行いたい場合に使用します。

for文を使用しない場合、同じコードを回数分書く必要がありますが、

for文を使用することで指定した回数同じ処理を行ってくれるので

コーディング量を減らし、見る人もわかりやすくエラーが発生した場合にも原因の特定が早くなります。

同じコードを何度も書かかないかつ、可読性を上げるためにも積極的にfor文を活用しましょう。

　　

for文の書き方

最も基本となるfor文の書き方から解説します。

記載された回数だけ処理を繰り返します。

for (初期値; 条件式; 増減値) {
    // 繰り返し行いたい処理を記載
}

上記が最も基本的な形で３つの引数を与えます。

試しに以下で「JavaScript」と3回表示してみます。

for (var i = 0; i < 3; i++) {
    console.log("JavaScript");
}

// 実行結果
JavaScript
JavaScript
JavaScript

初期値に「var i = 0」iに0を代入し、

条件式に「i < 3」でiが3未満

増減値は「i++」1ずつ増加させるよう指定しています。

　　

forEachの書き方

forEachは配列に対して使用します。特殊な書き方で配列に対してforEach内でコールバック関数の処理を実行する動きになります。

var arr = [1, 2, 3];

arr.forEach(function(data)) {
    console.log(data);
};

// もしくはアロー関数を使用して以下のような記載も可能です。
arr.forEach((data) => {
    console.log(data);
});

// 実行結果
1
2
3

// アロー関数の実行結果
1
2
3

forEachの後に記載されたfunction内の処理を繰り返し行います。

　　

　　

for-in文の使い方

for-in文ではオブジェクトの中身を取り出したい場合に使用します。

オブジェクトのバリューを変数に格納し、使用するイメージで、取得するオブジェクトがなくなり次第繰り返し処理を終了します。

var obj = {
    id: "001",
    name: "Taroko",
    age: 25,
    gender: "men"
}
for (var val in obj) {
    console.log(val);
}

// 実行結果
001
Taro
25
men

実行結果からオブジェクト（obj）のバリューをそれぞれ取り出していることが確認できます。

オブジェクトは現場でもよく使用されるのでfor-inはよく目にすることが多いです。

　　

for-of文の書き方

for-ofは配列やマップに使用されることが多いです。オブジェクトには使えません。

上で紹介した基本的なfor文の書き方を拡張したようなイメージです。

条件式を指定することなくデータの個数分繰り返し処理を実行します。

var arr = [1, 2, 3];

// for (変数名 of 配列)
for (var num of arr) {
    console.log(num);
}

// 実行結果
1
2
3

条件式など書かずして、配列の長さ分処理を行ってくれるのが特徴です。

コードを簡略化しつつ可読性も高いので積極的に使ってほしい書き方の一つです。

　　

break文で繰り返し処理を中断させる

繰り返し処理の記載方法について解説しましたが、特定の条件で繰り返し処理を中断したい場合の対処法についてです。

そのような場合「break」を使って処理を中断させることができます。

var arr = [1, 2, 3, 4, 5];

for (var num of arr) {
    // arrに３があったら処理を終了する
    if (num == 3) {
        break;
    }
    console.log(num);
}

// 実行結果
1
2

arrが２より後のデータが表示されておわず、break文で制御できていることがわかります。

　

continueで特定の条件の処理のみ実行させる

continueはループ処理を中断ではなく、今のループを終わらせて次のループを行わせる動きをします。

var arr = [1, 2, 3, 4, 5];

for (var num of arr) {
    // 偶数の場合処理を行わない
    if (num % 2 == 0) {
        continue;
    }
    console.log(num);
}

// 実行結果
1
3
5

2と4の場合にcontinueされ、画面出力されていないことがわかります。特定の条件で処理を行いたくない場合に活用しましょう。

　　

まとめ

for文には様々な書き方が存在し、それぞの特徴があるので処理したいものによって適宜つかいわけましょう。

また、ループ処理は便利ですが無駄に回しすぎるのもよくないので必要に応じて

「break」や「continue」を使って処理を制御しましょう。