プログラミング言語JavaScriptのfor文について、Web開発経験のある筆者が初心者向けに丁寧に解説します。
初心者向けの記事ですので、JavaScript for文について丁寧に解説しています。
本記事を読めば、JavaScript for文の書き方・使い方（基本と配列）、breakとcontinueの違いについて理解できるでしょう。
ぜひ最後まで読んで、JavaScript for文の基本を理解してください！
公開日：2017年6月19日
INDEX
JavaScript forの書き方
プログラムの処理で、同じ処理を繰り返したい時があります。今回解説するfor文では、そのような処理を書くときに有用です。
For 文を書くときの書式は次の通りです。
|
1 2 3 4 |
//繰り返し処理For文 for([初期化処理];[条件式];[更新式]){ 処理文 } |
[]に囲まれた文はオプションで、記載なしでも動作します。for(;;) と記載し無限ループとして処理させることも可能です。
For文が実際にする処理する流れを見てみましょう。
①：カウンター用変数の初期化処理
②：条件式の評価
③：処理文
④：カウンター用変数の更新
⑤２の条件式処理に移動。条件式の評価が「正」の間ループが行われる。「誤」になった場合はfor文を終了する。
次の項で実際に簡単なfor文を書いてみましょう。
＼文字より動画で学びたいあなたへ／
Udemyで講座を探す ＞JavaScript for文を実際に使ってみよう（基本）
簡単なサンプルソースコード1を用意しました、0〜10を順番に出力する例です。
|
1 2 3 4 |
//サンプルソースコード1 for(var i =0;i<=10;i++){ console.log(i); //コンソールに「i」に入っている数字を出力する } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
//サンプルソースコード1の実行結果 0 1 2 3 4 5 6 7 8 9 10 |
For文の流れ
①初期化処理：ループ制御に使う「変数i」が「0」で初期化される
②条件式の評価：iが10以下の間はループを実施、現在iは「0」である
③処理を実施：変数iに1を足して変数iを更新する
④更新式を実施：変数iに1を足して変数iを更新する
⑤２の条件式処理に移動し、条件式の評価が「正」の間ループが行われる。「誤」になった場合終了する。
JavaScript for文を実際に使ってみよう（配列）
次に、配列に入った情報をfor文で処理するループを考えてみましょう。
サンプルソースコード2は、配列arrに含まれるデータを順番に取り出す例です。
|
1 2 3 4 5 6 |
//サンプルソースコード2 var arr = ["りんご","バナナ","ミカン"]; console.log("配列の長さ: "+arr.length); //コンソール画面上に配列の長さを出力する for(var i=0;i<arr.length;i++){ //arr.lengthで配列の長さの分だけループを実施する console.log(arr[i]); //コンソール画面上にarr[i]のデータを出力する } |
|
1 2 3 4 5 |
//サンプルソースコード2の実行結果 配列の長さ: 3 りんご バナナ ミカン |
※配列には,lengthプロパティがあります。定義した配列に.lengthをつけることによって現在の配列の長さ「配列インデックスの最大値＋１」が取得できます。
配列の長さ(length)=配列に含まれる要素の個数と覚えてしまう方もいますが、実際は要素の個数ではなく「配列のインデックス最大値+１」です。
for文の流れ
①初期化処理：ループ制御に使う「変数i」が「0」で初期化される
②条件式の評価：iが配列の長さ(3)以下の間はループを実施、現在iは「0」である
③処理を実施：console.log(arr[i]);で、コンソール画面上に配列arrのデータを出力
④更新式を実施：変数iに1を足して変数iを更新する
⑤2の条件式処理に移動し、条件式の評価が「正」の間ループが行われる。「誤」になった場合終了する。
JavaScript for文におけるbreak
for文を使用しているとループ処理の途中で処理を抜けたいといったケースがでてきます。そのようなケースでは「break」を使用します。
では、実際にサンプルソースコードを見てみましょう。
|
1 2 3 4 5 6 7 8 |
//サンプルソースコード3 var arr = [1,2,3,4,5,6,7,8,9,10]; for (var i=0;i<arr.length;i++){ if(arr[i]>5){ break;//for文から処理を抜ける。 } console.log(arr[i]);//コンソール画面上にarr[i]のデータを出力する } |
|
1 2 3 4 5 6 |
//サンプルソースコード3の実行結果 1 2 3 4 5 |
for文の流れ
①初期化処理：ループ制御に使う「変数i」が「0」で初期化される
②条件式の評価：iが配列の長さ(10)以下の間はループを実施、現在iは「0」である
③if処理を実施：指定配列のデータが5より大きい値のときbreakしfor文を強制終了
④処理を実施：console.log(arr[i]);で、コンソール画面上に配列arrのデータを出力
⑤更新式を実施：変数iに1を足して変数iを更新する
⑥2の条件式処理に移動し、条件式の評価が「正」の間ループが行われる。「誤」になった場合終了する。
JavaScript for文におけるcontinue
先程の「break」文では、ループを途中で終了したいときに使いました。次は特定の周回の処理のみをスキップする場合に使える「continue」について解説します。
|
1 2 3 4 5 6 7 8 |
//サンプルソースコード4 var arr = [1,2,3,4,5,6,7,8,9,10]; for (var i=0;i<arr.length;i++){ if(arr[i]==5||arr[i]==7){//配列のデータが5と7の時処理をスキップする continue;//以降の処理をスキップ } console.log(arr[i]);//コンソール画面上にarr[i]のデータを出力する } |
|
1 2 3 4 5 6 7 8 9 |
//サンプルソースコード4の実行結果 1 2 3 4 6 8 9 10 |
For文の流れ
①初期化処理：ループ制御に使う「変数i」が「0」で初期化される
②条件式の評価：iが配列の長さ(10)以下の間はループを実施、現在iは「0」である
③if処理を実施：指定配列のデータが5と7の時4の処理をスキップする。
④処理を実施：console.log(arr[i]);で、コンソール画面上に配列arrのデータを出力
⑤更新式を実施：変数iに1を足して変数iを更新する
⑥2の条件式処理に移動し、条件式の評価が「正」の間ループが行われる。「誤」になった場合終了する。
先程、勉強したbreak文では③の処理時にfor文自体を強制的に抜けました。
今回のcontinue文ではfor文のループ自体は抜けず、for文内のcontinue文以降の処理をスキップする処理になります。
「break」と「continue」の使い分けのポイント
break→break文を実施するとループ処理ブロックから抜ける。
continue→continue文を実施すると、以降の処理をスキップ。ループ処理は継続的に行われる。
break文とcontinue文の違いについては、きちんと理解し使いこなして行きましょう。
いかがでしたか？JavaScript for文の基礎が理解できましたか？
for文は文法の基礎ですので、必ず理解しておきましょう。
超JavaScript 完全ガイド 2024
本気でJavaScriptを熟知したいプログラミング未経験者、もしくはReact、Vue、Angular、Svelte、jQuery、TypeScript、Node.js、Express、webエンジニアの方にオススメの講座です！
＼無料でプレビューをチェック！／
講座を見てみる評価：★★★★★
独学で勉強してある程度JavaScriptを理解していましたが、より理解できるようになりました。知らなかったこともやはりあったので受講してよかったです。ありがとうございました。
評価：★★★★★
内部的な動きや隠されたプロパティの存在を教えてくれるので、実務で感じていた疑問点がいろいろ解消されました。
RANKING
RECOMMENDED COURSE
最新情報・キャンペーン情報発信中