JavaScript: for...inとfor...ofの違い

JavaScriptのfor...inとfor...ofの違いは？

JavaScriptでループ処理を行う際によく使用される`for...in`と`for...of`ですが、それぞれの役割や動作の違いを明確に理解しているでしょうか？

本稿では、`for...in`と`for...of`の違いについて、具体的なコード例を交えながら詳しく解説していきます。

for...in：オブジェクトのプロパティを列挙

`for...in`文は、オブジェクトの列挙可能なプロパティを順に処理するために使用されます。主な用途は以下の通りです。

オブジェクト自身のプロパティを取得する
プロトタイプチェーン上のプロパティも取得する

for...in の使い方

基本的な構文は以下の通りです。


for (変数 in オブジェクト) {
  // 各プロパティに対する処理
}

例として、オブジェクトのプロパティ名と値を表示するコードを見てみましょう。


const person = {
  name: "田中太郎",
  age: 30,
  job: "エンジニア",
};

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

// 出力結果:
// name: 田中太郎
// age: 30
// job: エンジニア

注意点

`for...in`はプロパティの列挙順序が保証されない
プロトタイプチェーン上のプロパティも列挙するため、意図しないプロパティが含まれる可能性がある

for...of：反復可能なオブジェクトの値を列挙

`for...of`文は、反復可能なオブジェクト (iterable object) の値を順に取り出して処理するために使用されます。配列や文字列など、順序を持ったデータ構造を扱う場合に便利です。

for...of の使い方

基本的な構文は以下の通りです。


for (変数 of 反復可能なオブジェクト) {
  // 各値に対する処理
}

例として、配列の要素を順番に表示するコードを見てみましょう。


const colors = ["red", "green", "blue"];

for (const color of colors) {
  console.log(color);
}

// 出力結果:
// red
// green
// blue

for...in と for...of の違い

`for...in`と`for...of`の主な違いは以下の通りです。

項目	for...in	for...of
対象	オブジェクトのプロパティ	反復可能なオブジェクトの値
取得値	プロパティ名 (キー)	値
列挙順序	保証されない	保証される

使い分けのポイント

オブジェクトのプロパティを列挙する場合は `for...in` を使う
配列や文字列など、順序を持ったデータ構造を扱う場合は `for...of` を使う

参考資料

よくある質問

Q1: `for...in`で配列を処理しても良いですか？

A1: 可能ですが、非推奨です。`for...in`はプロパティ名を取得するため、配列のインデックス番号が文字列として取得されます。また、プロトタイプチェーン上のプロパティも列挙されるため、予期しない動作になる可能性があります。配列を処理する場合は`for...of`を使いましょう。

Q2: `for...of`でオブジェクトのプロパティを列挙できますか？

A2: オブジェクトはデフォルトでは反復可能オブジェクトではないため、そのままでは`for...of`で処理できません。オブジェクトを反復可能にするには、`Symbol.iterator`メソッドを実装する必要があります。

Q3: `forEach`メソッドとの使い分けは？

A3: `forEach`メソッドも配列の要素を順番に処理できますが、`break`や`continue`でループを制御できません。ループ制御が必要な場合は`for...of`を使いましょう。

その他の参考記事:JavaScript for ループ