【完全解説】JavaScriptのfor…inとfor…ofの違いと使い分け【初心者向け】

JavaScriptには、オブジェクトや配列を反復処理するために使われるループ文がいくつかありますが、その中でもfor…inとfor…ofは、異なる用途で使用されます。

どちらも便利なループ文ですが、適切に使い分けることで、より効率的にコーディングができるようになります。

この記事では、for…inとfor…ofの違い、使い方、そして具体的な使用場面について詳しく解説していきます！

for...in文：オブジェクトのプロパティをループ処理

for…in文は、オブジェクトのキー（プロパティ名）を順番に列挙するためのループ文です。

JavaScriptでは、オブジェクトの各プロパティを順に取得して処理を行いたい場合に使用します。

for…in文の構文

for (const key in object) {
  // keyを使って処理を行う
  const value = object[key];
  
　// valueを使って何かをする
}

for…in文の使用例

const obj = { name: 'John', age: 30, country: 'USA' };

for (let key in obj) {
  console.log(key);          // 'name', 'age', 'country'と順に表示される
  console.log(obj[key]);     // 'John', 30, 'USA'と順に表示される
}

for…in文は、オブジェクトobjのプロパティ名（キー）を繰り返し処理します。

各プロパティ名をkeyに代入し、そのキーに対応する値をobj[key]として取得しています。

これにより、プロパティ名とその値をペアで処理することができます。

使用に適した状況

• オブジェクトのプロパティ名を取得したい場合。
  
• キーとその値を利用して処理を行いたい場合

for…of文：配列や反復可能なオブジェクトをループ処理

for…of文は、配列や反復可能なオブジェクト（iterable）の要素を反復処理するために使います。

配列やMap、Set、文字列などがこれに該当します。

for…in文とは異なり、値そのものを直接操作できます。

for…of文の構文

for (const element of iterable) {
  // elementを使って処理を行う
}

for…of文の使用例（配列の場合）

const fruits = ['apple', 'banana', 'cherry'];

for (const fruit of fruits) {
  console.log(fruit);  // 'apple', 'banana', 'cherry' と順に表示
}

for…of文は、配列fruitsの各要素（’apple’, ‘banana’, ‘cherry’）を順に取り出し、fruitに代入して処理しています。

for…ofは、配列の要素を直接操作したい場合に便利です。

for…of文の使用例（Mapの場合）

const myMap = new Map();
myMap.set('a', 1);
myMap.set('b', 2);
myMap.set('c', 3);

for (const [key, value] of myMap) {
  console.log(key, value);  // 'a' 1, 'b' 2, 'c' 3 と順に表示
}

for...of文は、Mapオブジェクトを反復処理する際にも使えます。

Mapはキーと値のペアを保持するデータ構造です。

この場合、[key, value]という形式でキーと値をそれぞれ取り出し、forループの中で処理します。

for...ofを使うことで、Mapの各エントリー（キーと値のペア）を簡単に操作できます。

使用に適した状況

• 配列の要素や反復可能なオブジェクトを直接操作したい場合
• 各要素に対して順番に処理を実行したい場合

for…inとfor…ofの違い比較

注意点

• for…inは配列にも使えるが、推奨されない
  配列のインデックスをループすることもできますが、順序が保証されないため推奨されていません。配列にはfor…ofを使うのが適切です。
• プロトタイプのプロパティも取得される
  for...inは、オブジェクトのプロトタイプチェーン上のプロパティも列挙します。特定のオブジェクト自身のプロパティだけをループしたい場合は、hasOwnPropertyを使うことが推奨されています。
  

for…inとfor…ofの使い分けのポイント

• オブジェクトのプロパティを操作したいときは、for...inを使います。
  
• 配列や反復可能なオブジェクトの要素そのものを操作したい場合は、for...ofを使います。

まとめ

JavaScriptのループ構文であるfor…inとfor…ofは、それぞれ異なる役割を持っていて、用途に応じて使い分ける必要があります。

オブジェクトのプロパティをループしたい場合はfor…in、配列や反復可能オブジェクトの要素をループする際はfor…ofが適しています。

正しく使い分けて、効率的にコードを書いていきましょう！