最近、車通勤から自転車通勤になりました、むつたくです。

8km弱を30分掛かりませんが、通勤時間が倍になってしまいました。(車は10分ちょっと…)
運動不足を解消出来てると言い聞かせてます。
毎日脚がパンパンですw

さて、今回は今更感は否めないですが、JavaScriptにおけるfor文の便利さをお伝えしたいと思います。
前職では、ASP.Netを使っていたのですが、その中でクライアント側でDOM操作ができる便利な言語…としか考えていませんでした。
スワローに転職してからがっつり触るようになり、フロントもバックも両方いけるとかJavaScriptってすげぇな！とか実感してました。

他にもmapとか便利なプロパティはありますが、まずは繰り返し処理からいきます。
(次回があるかはわかりません)

やること

1. for文
2. forEach文
3. for…in文
4. for…of文

1. for文

まずは、基本となる普通のfor文の紹介です。
JavaScriptに限らず、どの言語でも同じ処理を繰り返し行いたい時はあると思います。
そんな時使用されるのがfor文になります。
while文にカウンター変数、繰り返す上限回数を前もって決めた繰り返し処理、と言った感じです。

for文の書き方

• initialization: for文の開始値の変数宣言(カウンター変数)
• condition: ループの各反復の前に評価される式(true時: 処理継続、false時:処理終了)
• final-expression: カウンター変数の増減を記載

for文は、決められた回数分だけ処理を繰り返す場合に使用します。事前にどんな処理を何回繰り返すのかを決めておくのが一般的だと思います。

for文の例文

上記の例では、繰り返す回数は、配列birdの要素数である、４になります。
ちなみに、繰り返し処理の中で、その繰り返し処理をスキップしたい場合は、[ continue ]を、繰り返し処理を終了したい場合は、[ break ]を使用します。

2. forEach文

forEach文はES5で追加された配列用の繰り返し処理メソッドです(たしか…)。
forEach文の特徴は、要素の中身が無い場合、その要素の処理がスルーされることです。
使い所はあまり無いかもしれませんが、意外と便利です。

forEach文の書き方

forEach文はコールバック関数です。その関数では３つの引数があります。

• currentValue: 現在処理されている要素
• index: 現在処理されている配列要素のインデックス(オプション)
• array: 処理している配列(オプション)

要素が全て存在するケース

配列の要素が全て存在する場合のケースを紹介します。

for文で紹介したコードをforEach文に変換したのが上記になります。ただ、for文と違い、continueやbreakは使用できないので、注意してください。

要素が歯抜け状態のケース

次に、要素の中身が無いケースです。

普通じゃない？と思われるかもしれませんが、これをfor文で回すと2番目がundefinedになります。こういうデータはなかなか無いかもしれませんが、無いからこそ、不具合の温床？になるかもしれません。
if文でundefinedの判定をすれば済む話ですが、forEach文はそれが不要なので、スマートかもしれません。

また、forEach文にも注意がありまして、処理が重いため、実行速度に若干の差が出る可能性があります。速度重視であれば、for文を使用するのが吉です。(それ以前にwhile文が最速だったはずなので、while文を使用できるなら、while文を推します)

3. for…in文

forEach文は配列用の繰り返し処理でしたが、次に紹介するfor…in文は「オブジェクトに於ける列挙可能なプロパティ」を取得します。インデックスやキーですね。

for…in文の書き方

• variable: プロパティ名が代入される変数
• object: オブジェクトの列挙可能なプロパティに対して繰り返し処理を実行する

ただ、for…in文も注意が必要で、順不同になることがあり、配列には不向きです(保証されていない様です)。使用する際は気を付けてください。

for…in文の例文

オブジェクトの値だけを取得したい時には便利な構文ですね。あまり使い道が無いかもしれませんが…。

3. for…of文

for…in文はプロパティ名を取得するのに対し、for…of文は「プロパティの値」を取得します。
使用できるのは、配列やオブジェクトになります。

for…of文の書き方

• variable: プロパティ値が代入される変数
• iterable: 繰り返し処理が可能なオブジェクト

for…of文にも注意が必要です。ES6から導入された構文なので、ブラウザのバージョンが古いと動作しません。配列であれば、forEachで代用や、オブジェクトの場合、object.keyで代用等の対策が必要になります。

for…of文の例文

配列の場合

オブジェクトの場合

配列のインデックスやオブジェクトのキーが不要な場合で、値だけ欲しい場合はスマートに書けていいと思います。
あとはイテラブル(反復可能)なオブジェクトに対して有効なので、配列やオブジェクトだけでなく、Mapとかも対象になります。
逆に中身が空だったりした場合は、エラーになるので注意してください。

まとめ

４つの繰り返し処理の構文を紹介しました。for…of文最高。
基本的に、イテレータにはfor…of文を使用するのがいいと思います(むつたくの考えですが)。
それ以外に対しては、速度とかを考慮して、for文やforEach文を適宜使い分けていくのがいいと思います。

快適なぐるぐる反復処理をお過ごしくださいw

それでは、またの機械に！

参考

MDN – for
MDN – array.prototype.forEach
MDN – for…in
MDN – for…of