JavaScriptにおける for…in 文と for…of 文の違い

異なる反復対象と利用目的

JavaScriptのfor...in文とfor...of文は、いずれもループ処理を行う構文であり一見似ていますが、用途や動作の仕組みは異なります。ここでは両者の本質的な違いを整理し、それぞれの利用目的や適した使用方法を比較していきます。

基本概念の比較

for...in文とfor...of文の核心的な違いを簡潔に表にまとめると、次のようになります。

for...in文とfor...of文の核心的な違い
区分	`for...in`	`for...of`
反復対象	プロパティ（key、インデックス）を反復処理できるオブジェクト	値（value）を反復処理できるオブジェクト
ループ	オブジェクトから取得したプロパティ（key、インデックス）を基に動作	オブジェクトから取得した値（value）を基に動作
使用可能なオブジェクト	一般的なオブジェクト（Plain objects）配列	配列、文字列、`Map`、`Set`など、Iteration Protocolsが適用されたオブジェクト DOMを扱うコレクションである`HTMLCollection`および`NodeList`オブジェクト `arguments`などの一部の擬似配列オブジェクト Iteration Protocolsが適用されたユーザー定義オブジェクト
使用用途	オブジェクトのプロパティ（key）を反復処理する際に使用	オブジェクトの値（value）を反復処理する際に使用
使用目的	データを操作する目的というよりも、主に一般的なオブジェクト（Plain objects）の特定の値（value）を持つプロパティ（key）を確認するデバッグ用	オブジェクトの値（value）、つまりデータを操作するため

一般的なオブジェクト（Plain objects）: オブジェクトリテラル、new Object()、コンストラクタ関数などで作成されたオブジェクトを指します。
中括弧（{}）の中には、0個以上のプロパティ名（property name, key）と値（value）をコロン（:）で結んだペアが入り、複数のペアはカンマ（,）で区切られた形式になっています。

例

for...in文とfor...of文の異なる反復対象と使用目的を、実際のコード例で確認してみましょう。

`for...in`

for...in文は、主に反復処理によってデータを操作するというよりも、一般的なオブジェクト（Plain objects）の特定の値（value）を持つプロパティ（key）を確認するデバッグ用として使用されます。

JavaScript

const user = {
    name: "太郎",
    age: 30
};

for (let key in user) {
  console.log(key, ":", user[key]);  
}
/*
    出力:
    "name" : "太郎"
    "age" : 30
*/

`for...of`

for...of文は、主にオブジェクトの値（value）、つまりデータを操作するために使用されます。例えば、DOMコレクションであるNodeListオブジェクトの要素を反復処理する際に活用できます。

JavaScript

const liElements = document.querySelectorAll("li"); // liセレクタをすべて選択
console.log(liElements); // NodeList(3) [li, li, li]

/* for...of文の適用 */
for (const liElement of liElements) {
    console.log(liElement.textContent);
}
// 出力: "うどん" "ラーメン" "おにぎり"

コード補足説明
querySelectorAll()で返されるNodeListオブジェクトは、擬似配列オブジェクトであり、かつfor...of文で反復処理可能なオブジェクトです。

考慮すべき点

オブジェクトリテラルなどの一般的なオブジェクト（Plain objects）のプロパティ名をデバッグ用途などで反復処理する場合は、for...in文を使用するのが適しています。
配列やDOMコレクションであるNodeListオブジェクトのように、各値の要素を1つずつ反復処理して操作する場合は、for...of文を使用するのが適しています。