for...in vs. for...of

JavaScript の for...in 文と for...of 文は、いずれも繰り返し処理を行うループ構文であり、見た目は似ていますが、それぞれ用途や動作の仕組みが異なります。ここでは、for...in 文と for...of 文の違いについて見ていきましょう。

関連項目

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

JavaScriptのfor...in文とfor...of文はどちらも繰り返し処理を行うループ構文であり見た目は似ていますが用途や動作の仕組みが異なります。

次はfor...in文とfor...of文の違いを表でまとめたものです。

for...in文とfor...of文の違い
区分 for...in文 for...of文
使用目的 オブジェクトの列挙可能なプロパティを走査 反復可能（iterable）なオブジェクトの要素を走査
繰り返し対象 オブジェクトリテラル{}やnew Object()で作成した一般的なオブジェクト（プレーンオブジェクト）のプロパティ名（キー） 反復可能（iterable）なオブジェクトの要素
変数への代入 オブジェクトのプロパティキーが変数に代入される 実際の値が変数に代入される
プロトタイプチェーン プロトタイプチェーンのプロパティを含む（注意が必要） プロトタイプチェーンのプロパティは除外
配列の走査 可能だが推奨されない 配列の要素を走査するのに適している
使用例 for (const key in object) { ... } for (const element of iterable) { ... }

この表を通じて、for...in文とfor...of文の主な違いだけでなく、配列の走査時の推奨事項も理解できるでしょう。

使用目的による違い

for...in文の例

for...in文は、オブジェクトリテラルで定義されたオブジェクトのプロパティを列挙する際によく使用されます。以下の例では、オブジェクトのプロパティを列挙し、それぞれの値を出力しています。

JavaScript 
const person = {
    name: "John",
    age: 30,
    occupation: "developer"
}; // オブジェクトリテラルで定義されたオブジェクト

for (const key in person) {
    console.log(`${key}: ${person[key]}`);
}
コンソールに出力された結果

上の例では、person[key]はpersonオブジェクトのkeyプロパティの値を取得します。そのため、各反復処理においてプロパティ名とその値が出力されます。

for...of文の例

for...of文は反復可能（iterable）なオブジェクトの要素に順番にアクセスするために使用されます。以下の例では配列の要素を走査し、それぞれの値を出力するコードです。

JavaScript 
const iterable = [1, 2, 3, 4, 5];

for (const item of iterable) {
    console.log(item);
}
コンソールに出力された結果

上記のコードでは、itemが各反復ごとに配列iterableの要素に更新され、console.log(item)が実行されます。結果として配列の各要素が出力されます。

繰り返し対象による違い

繰り返し対象によるfor...in文とfor...of文の違いをより明確に理解するために、それぞれのループを異なるタイプのデータに適用したサンプルコードを示します。

for...in文：オブジェクトの例

for...in文はオブジェクトリテラル{}やnew Object()で作成した一般的なオブジェクト（プレーンオブジェクト）のプロパティ名（キー）を走査するために使われます。以下の例ではオブジェクトのプロパティを列挙し、それぞれの値を出力するコードです。

JavaScript 
const person = {
    name: "Alice",
    age: 25,
    occupation: "teacher"
}; // オブジェクトリテラルで定義されたオブジェクト

for (const key in person) {
    console.log(`${key}: ${person[key]}`);
}
コンソールに出力された結果

for...in文：配列の例（非推奨）

for...in文は配列のインデックスを列挙できますが、配列は基本的にオブジェクトであるため、継承されたプロパティも列挙される可能性があります。したがって、配列の走査にはfor...of文を使用する方が適切です。以下の例はfor...in文を配列に適用したものです。

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

for (const index in colors) {
    console.log(index); // 0, 1, 2（インデックス）
}

for...of文：配列の例

for...of文は配列の要素を順に走査する際に使用されます。以下の例では配列の各要素を順に処理し、その値を出力しています。

JavaScript 
const numbers = [1, 2, 3, 4, 5];

for (const number of numbers) {
    console.log(number); // 1, 2, 3, 4, 5
}

for...of文：文字列の例

for...of文は文字列も反復可能（iterable）なオブジェクトとして扱えるため使用可能です。以下の例では文字列の各文字を走査し、それを出力するコードです。

JavaScript 
const message = "Hello";

for (const char of message) {
    console.log(char);
}
コンソールに出力された結果

上記の例を通じて、オブジェクト、配列、文字列などさまざまな繰り返し対象におけるfor...in文とfor...of文の動作の違いを理解できるでしょう。

変数への代入による違い

for...in文：オブジェクトの例

for...in文はオブジェクトのプロパティキーを変数に代入します。以下の例ではオブジェクトのプロパティキーと値を出力するコードです。

JavaScript 
const person = {
    name: "Bob",
    age: 30,
    occupation: "engineer"
};

for (const key in person) {
    const value = person[key];
    console.log(`${key}: ${value}`);
}
コンソールに出力された結果

for...of文：配列の例

for...of文は配列の各要素の値を変数に代入します。以下の例では配列の各要素の値を出力するコードです。

JavaScript 
const numbers = [5, 10, 15];

for (const number of numbers) {
    console.log(number); // 5, 10, 15
}

for...of文：文字列の例

for...of文は文字列の各文字を変数に代入します。以下の例では文字列の各文字を出力するコードです。

JavaScript 
const message = "Hello";

for (const char of message) {
    console.log(char);
}
コンソールに出力された結果

for...in文：配列のインデックスの例（非推奨）

for...in文を配列に使用すると、配列のインデックスが変数に代入されます。しかし、配列のプロトタイプチェーンに追加されたプロパティも列挙されるため、推奨されない方法です。

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

for (const index in colors) {
    console.log(index); // 0, 1, 2（インデックス）
}

この例を通じて、for...in文とfor...of文における変数への代入がどのように行われるかを理解し、それぞれのループがどの値を変数に代入するのかを確認できるでしょう。

プロトタイプチェーンによる違い

for...in文：オブジェクトおよびプロトタイプの例

for...in文を使用すると、オブジェクトのプロパティだけでなくプロトタイプチェーン上のプロパティもすべて列挙されます。以下の例ではオブジェクト自身のプロパティとそのプロトタイプにあるプロパティを列挙して出力するコードです。

JavaScript 
function Person(name) {
    this.name = name;
}

Person.prototype.age = 30;

const person = new Person("Alice");

for (const key in person) {
    console.log(`${key}: ${person[key]}`);
}
コンソールに出力された結果

for...of文：配列およびプロトタイプの例

for...of文は配列の要素のみを順に走査するため、プロトタイプチェーン上のプロパティは無視されます。以下の例では配列とそのプロトタイプにあるプロパティを比較して示しています。

JavaScript 
Array.prototype.customMethod = function() {
    console.log("This is a custom method.");
};

const numbers = [10, 20, 30];

console.log("Using for...of:");
for (const number of numbers) {
    console.log(number);
}

console.log('Using for...in:');
for (const index in numbers) {
    console.log(index); // 'customMethod'も出力される
}
コンソールに出力された結果

この例を通じて、for...in文とfor...of文におけるプロトタイプチェーンの扱いの違いを確認でき、それぞれのループがプロトタイプチェーン上のプロパティをどのように処理するかを理解できるでしょう。

for...in文とfor...of文の違いに関するまとめ

この2つの繰り返し文は似ているように見えますが、実際には異なる用途と動作方法を持っています。

for...in文はオブジェクトの列挙可能なプロパティ名（文字列キー）を順に走査し、プロトタイプチェーン上のプロパティも含まれます。一方、for...of文は配列や文字列などのイテラブル（iterable）なオブジェクトの値を1つずつ取得するために使用されます。

  • オブジェクトリテラルなどの一般的なオブジェクトのプロパティ名を走査するには、for...in文を使うのが適しています。
  • 配列や文字列のようなiterableな値の要素を1つずつ順に処理するには、for...of文を使うほうが適しています。

それぞれの繰り返し文がどのような状況に適しているかを理解すれば、より予測可能で安全なコードを書くことができます。

仕様書

for...in 文と for...of 文の仕様（仕様書）
仕様書
for...in, for...of ECMAScript Language Specification
#sec-for-in-and-for-of-statements

ブラウザ互換性

for...in 文と for...of 文のブラウザー互換性
文
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
for...in 1 12 1 1
for...of 38 12 13 7

参考資料

関連項目