JavaScriptでfor文はどのように書く？while文などとの違いとは

JavaScriptのfor文はプログラミングを学習する上で避けることはできない基本的な構文です。ここではJavaScriptにおける正しい記述方法や、注意点について詳しく紹介していきます。for文は繰り返し処理を行いますが、他にもループ構文はあります。
そのため、これらをどのように使い分ける必要があるのか、ということも理解しておく必要があります。

JavaScriptにおけるfor文の書き方

「for」を使えばループ処理を行うことができるようになります。ループを制御する命令は他にもありますが「for」にはループの回数を指定できるという特徴があります。まずは、JavaScriptにおいてどのように記述されるのか説明していきます。

JavaScriptでの記述

「for」では初期化式とループが続くための条件式、そして増減式を設定することになります。以下のような形です。

for (初期化式; 条件式; 増減式) {
  命令群
}

最初に、初期化式が1度だけ実行されます。この初期化式ではカウンター変数と呼ばれる、ループの回数を管理する値を入れることになります。そして、このカウンター変数を条件式に当てはめてtrueになればfor文内部にある命令群の処理へと進みます。falseの場合には一度も内部に進むことはありません。
そしてfor文内部の処理を終えると、３つめの要素である増減式が実行されます。この増減式では、通常、カウンター変数を増減させるように設定します。
以下のように、具体的な数値を入れて考えてみるとイメージがしやすくなります。

for (var x = 0; x < 4; x++) {
  console.log('xは'+ x);
}

上のように記述すると、最初にカウンター変数xが０として初期化されます。そして条件式は「x < 3」であるためtrueとなりfor文の内部へと進みます。するとその中で処理が行われ「xは0」と表示されます。最後に増減式が実行されxは1となります。
続くループでは初期化式が実行されず、条件式から始まります。結果は同じくtrueでループは続行。何度かループを繰り返した後、増減式の実効によってxの値が4になると、もはや条件式をクリアすることができずfalseとなりfor文内部の処理には進めなくなります。
結局、この場合には「xは0」「xは1」「xは2」「xは3」までを表示して終了となります。

for文を使うときの注意点

「for」は正しく使用しなければ思わぬ挙動を起こします。
ループ処理だからこその注意、それと連想配列および配列を扱う場合の注意点を理解しておきましょう。

無限ループにならないようにする

初期化式や条件式、増減式など、いずれも適切に設定をしなければ無限ループになってしまう可能性があります。無限ループが起こるとブラウザに大きな負担をかけてしまいフリーズをしてしまうこともあります。
例えば以下の場合には無限ループとなります。

for (var x = 0; x < 4; x--) {
  console.log('xは'+ x);
}

さきほどの例で使用したものとほとんど変わりはありませんが、増減式の内容が、ループごとに1を加算する式から減算するものへと変化しています。するといつまでたっても条件式はtrueとなり無限ループが完成されます。
また、下のようにすべての式を省略したケースでも無限ループが起こってしまいます。

var x = 1;
for (;;) {
  console.log('xは'+ x);
}

配列に対する処理（for in / for of）

連想配列、配列を順に処理する命令では「for in」や「for of」を使用します。ただし、それぞれ連想配列では「for in」、配列では「for of」を使わなければ正しい出力ができない可能性があります。

また、「for of」についてはECMAScript 2015という新しい仕様で使用されているものだということには注意が必要です。対応していないブラウザもあります。

それでは、配列に対して「for in」を使用してしまったケースを見てみましょう。以下のような挙動となります。

var data = ['red', 'black', 'white'];
Array.prototype.hoge = function() {}
for (var key in data) {
  console.log(data[key]);
}

このように配列の機能を拡張している場合だと、配列の中だけでなく、拡張された機能についてまで表示されてしまいます。
結果として、

red
black
white
[Function]

と出力されてしまいます。

そこで配列を列挙するには「for of」などを使用して以下のように書き換えます。

var data = ['red', 'black', 'white'];
Array.prototype.hoge = function() {}
for (var value of data) {
  console.log(value);
}

すると

red
black
white

と出力することができます。

JavaScriptで使える他のループ

JavaScriptでは「for in」や「for of」を使ったもののほか、「while」や「do while」などもループ処理を行えます。ただし「for」と違って条件式しか与えることができないため、ループから抜け出すためにはループの内部で増減式を記述する必要があります。
「while」を使ったループ処理は以下のように記述できます。

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

これによりaの値が1から4まで出力されるようになります。a++の部分で無限ループを防いでいます。
一方「do while」は以下のように記述できます。

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

こちらも出力結果は1から4までと同じになります。
しかし、「while」と「do while」については前置判定か後置判定かの違いがあります。
「while」では最初に条件式で判定をするのに対して「do while」ではループの最後で判定を行います。そのため、前者では一度もループが実行されない可能性があるのに対し後者は必ず一度はループが実行されます。

for文の使いどころ

ループを処理する構文にはここまでで紹介した「for」のほか様々な構文があります。ループ以前に定義されている変数を使い、条件に応じてループ処理を行わせたい場合には「while」、同様の条件で一度は処理させたいという場合には「do while」、配列・連想配列の中身を取り出すならそれぞれ「for of」・「for in」を使います。新たにカウンター変数を定義して、その場で指定した通りにループさせたい場合には「for」を使うと良いでしょう。

まとめ

「for」は多くの言語で使用される場合と同様、JavaScriptであってもループ処理を行わせるという点に違いはありません。
ただし今回説明した通りの、適切な方法で記述しなければ正しい処理を行うことはできません。まずは無限ループにならないよう条件式等を定め、他のループ処理を行わせる構文との使い分けなどにも注意していく必要があるでしょう。

TECH PLAYでは、エンジニアの方向けに勉強会・イベント情報を提供しています。
ご興味のある方はぜひご参加ください。