JavaScriptの繰り返し（ループ）処理 ②

この記事は、以前投稿した『JavaScriptの繰り返し（ループ）処理』の続編として、「for…in」および 「for…of」を使ったループの書き方を解説しています。

繰り返し（ループ）とは

世の中に存在するほぼ全てのプログラミング言語には、処理の流れを制御するための構文（制御構文）が3種類があり、その中の一つが「繰り返し」（ループ）です。

JavaScriptは、ループ用の構文に豊富なバリエーションがあります。

まず大きく分けると、言語の構文としてのループと、オブジェクトが持つメソッドとしてのループがあります。
本記事では、冒頭でお伝えしたとおり「言語の構文としてのループ」から「for…in」、「for…of」の2種類を説明対象とし、その他の構文と、オブジェクトが持つメソッドとしてのループは別記事で詳しく説明しております。

JavaScriptのループの種類

• for 文（別記事）
• while 文（別記事）
• do…while 文（別記事）
• for…in 文（本記事の対象）
• for…of 文（本記事の対象）

for…in と for…of の違い

それぞれを詳しく見ていく前に、違いについてざっと理解しておきましょう。

まず for…in について、重要なポイントはこちら。

続いて for…of についてはこちら。

以上の理由から、for…in を使用するケースは非常に少なく、積極的には使わないようにすることをお勧めします。

for…in の使いどころを強いて挙げるとすれば、JSオブジェクトをループさせつつ、指定した key（プロパティ）の有無を確認する場合などでしょう。

for…in でのループ処理

for…in は前述のとおり、使うならば、挙動をしっかりと把握した上で使用することをお勧めします。
その理由を実際にプログラムを作成して、実感してみましょう。

for…in で配列をループさせる

let names = ["taro", "jiro", "ichiko"];
for (name in names) {
  console.log(name);
}

> 0
> 1
> 2

このようにインデックスを取得しています。
名前を表示させようとすると「console.log( names[i] )」と書かなければならなくなるため、それならば普通に for 文を使うのと大差ありません。

for…in でJSオブジェクトをループさせる

let obj = {
  "name": "taro",
  "age": 20,
  "gender": "male"
};

for (item in obj) {
  console.log(item);
}

> name
> age
> gender

上記の通り、キー（プロパティ）を取得しています。

for…in で配列を使うべきではない理由は他にもあるのですが、説明するのに「JavaScriptのプロトタイプ」という概念が登場し、入門編の記事としては難易度が上がり過ぎてしまうため、ここでは割愛します。

for…of でのループ処理

for…of は、配列、NodeList、引数リスト（Arguments）といった列挙可能（イテラブル）オブジェクトを扱うことができ、一工夫する必要はありますが、MapやJSオブジェクトを便利に扱うことができます。

for…of で配列をループさせる

let names = ["taro", "jiro", "ichiko"];
for (name of names) {
  console.log(name);
}

> taro
> jiro
> ichiko

このように、for…in でのループとは異なり、値を取得しています。

for…of でJSオブジェクトをループさせる

まずは失敗サンプルから掲載しています。

let obj = {
  "name": "taro",
  "age": 20,
  "gender": "male"
};

// このままではエラーになる
for (item of obj) {
  console.log(item);
}

> Uncaught TypeError: obj is not iterable at sample1.html:20:16

for…of を使ってJSオブジェクトのキーと値を取得するには、以下のようにプログラムします。

let obj = {
  "name": "taro",
  "age": 20,
  "gender": "male"
};

for ( [key, val] of Object.entries(obj) ) {
  console.log(key + ": " + val);
}

> name: taro
> age: 20
> gender: male

これは中々使いどころが多いのではないでしょうか。

for…of でMapをループさせる

JavaScriptのMapをfor…ofでループさせる場合、JSオブジェクトよりも記述量が減ります。

JSオブジェクトの際に使っていたObject.entriesが不要になるためです。

let map = new Map([
  ["name", "taro"],
  ["age", 20],
  ["gender", "male"]
]);

for ( [key, val] of map ) {
  console.log(key + ": " + val);
}

> name: taro
> age: 20
> gender: male

記事の最後に

最も基本的な for 文ひとつあれば、たいていの繰り返し処理をプログラムすることは可能です。
しかし、こういったAdvancedな機能が使いこなせるようになると、JavaScriptをより楽しめるのではないかと思います。

本記事についての質問、誤りの指摘、ご意見ご感想などありましたら、ぜひコメント頂ければ幸いです。

『詳説 JavaScript』メニューに戻る