for...in文

for...in文は、オブジェクトリテラル（{}）やnew Object()のように作成された通常のオブジェクト（Plain object）のプロパティ（キー）名を1つずつ繰り返し処理するためのループ構文です。

「オブジェクト」とは、JavaScriptにおける広範な概念であり、配列や関数、Map、Setなどもすべてオブジェクトに分類されます。
しかし、for...in文は通常、一般的なオブジェクト（Plain object）を走査する際に使用され、配列やイテラブルオブジェクトには適していません。

for...in文を使用する際の特徴や注意点について確認していきます。

for...in文の使い方

for...in文は、オブジェクトリテラル（{}）やnew Object()のように作成された一般的なオブジェクト（Plain object）のプロパティ名（キー）を走査するために使用されます。

基本的な使い方と動作の仕組み、ループ中に変数へ代入される値、およびオブジェクトのプロパティの値を取得する方法について確認していきます。

基本構文と動作原理

for...in文の基本構文は以下のとおりです。

JavaScript 
for (variable in object) {
    // 実行するコード
}
  • variable：各プロパティ名（キー）を格納するための変数です。
  • object：オブジェクトリテラル（{}）やnew Object()のように作成された一般的なオブジェクト（Plain object）です。

for...in文は、指定されたオブジェクトの列挙可能なプロパティを繰り返し処理し、各ループごとにvariableにプロパティ名が代入されます。これにより、該当するプロパティの値を取得することができます。

ループ中に変数へ代入される値

for...in文を使ってオブジェクトのプロパティを走査する際、各ループごとに変数には該当するプロパティ名が代入されます。これにより、プロパティ名を使って対応するプロパティの値を取得できます。

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

for (let key in person) {
    console.log(key); // プロパティ名を出力
}
コンソールに出力された結果

オブジェクトのプロパティ値の取得

for...in文を使ってオブジェクトのプロパティを走査する際、変数に代入される値はプロパティ名であるため、これを利用してプロパティの値を取得する必要があります。そのためには、object[variable]という形式を使用します。

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

for (let key in person) {
    console.log(key + ": " + person[key]); // プロパティ名と値を出力
}

上記の例では、person[key]はpersonオブジェクトのkeyプロパティの値を取得します。したがって、各ループごとにプロパティ名とその対応する値が出力されます。

コンソールに出力された結果

これで、for...in文の基本的な使い方と動作の仕組み、ループ中の変数への代入およびプロパティ値の取得方法について理解できたと思います。次のセクションでは、for...in文の主な特徴について見ていきます。

for...in文の主な特徴

for...in文はオブジェクトのプロパティを走査する機能を提供しますが、いくつかの重要な特徴を考慮する必要があります。以下では、for...in文の主な特徴について詳しく見ていきます。

プロトタイプチェーンのプロパティも走査される

for...in文はオブジェクト自身のプロパティだけでなく、プロトタイプチェーン上のプロパティも走査します。これはオブジェクトの継承構造においてよく見られる特徴です。もしオブジェクト自身のプロパティのみを走査したい場合は、hasOwnPropertyメソッドを使って確認する必要があります。

JavaScript 
const parent = {
    parentProp: "I am from parent"
} // オブジェクトリテラルで定義されたオブジェクト

const child = Object.create(parent);
child.childProp = "I am from child";

for (let key in child) {
    console.log(key); // parentProp、childPropが出力される
}

for (let key in child) {
    if (child.hasOwnProperty(key)) {
        console.log(key); // childPropのみが出力される
    }
}

列挙可能（enumerable）なプロパティのみを走査

for...in文はオブジェクトの列挙可能なプロパティのみを走査します。
オブジェクトのプロパティは基本的に列挙可能ですが、Object.defineProperty()メソッドを使ってプロパティのenumerable属性をfalseに設定すると、そのプロパティはfor...in文による走査対象から除外されます。

JavaScript 
const obj = {
    enumerableProp: "I will be enumerated",
} // オブジェクトリテラルで定義されたオブジェクト

Object.defineProperty(obj, "nonEnumerableProp", {
    value: "I will not be enumerated",
    enumerable: false
});

for (let key in obj) {
    console.log(key); // enumerablePropのみが出力される
}

走査の順序は保証されない

for...in文を使ってオブジェクトのプロパティを走査する場合、プロパティの順序は保証されません。プロパティの順序が重要な場合は、他の方法を検討する必要があります。ES6以降は、順序が保証されるデータ構造であるMapやSetを使用する方がより安全です。配列（配列もオブジェクトです）の場合は、forEach()関数を使用してください。

このように、for...in文の主な特徴を考慮しながらオブジェクトのプロパティを走査し、扱うことが重要です。次のセクションでは、for...in文を使用する際に注意すべきいくつかのポイントについて見ていきます。

for...in文の注意すべき特徴と留意点

for...in文を使用する際には、いくつか注意すべき特徴や留意点があります。これらの点を確認し、走査中に発生する可能性のある問題への対処方法について見ていきましょう。

プロトタイプチェーンにおけるプロパティの走査とhasOwnProperty

for...in文はプロトタイプチェーン上のプロパティも走査します。これは、場合によっては意図しない動作を引き起こす可能性があります。そのため、オブジェクト自身のプロパティのみを走査するには、hasOwnPropertyメソッドを使って確認する必要があります。

JavaScript 
for (let key in object) {
    if (object.hasOwnProperty(key)) {
        // オブジェクト自身のプロパティに対して処理を実行
    }
}

走査中のプロパティ値の変更に関する注意点

for...in文を使用してオブジェクトのプロパティを走査しながら、そのプロパティの値を変更することは可能ですが、予期しない動作を引き起こす可能性があります。プロパティの値を変更する必要がある場合は、別の方法で処理するか、走査が完了した後に変更することをおすすめします。

Object.defineProperty()によるenumerable属性の制御

Object.defineProperty()メソッドを使用してプロパティを定義する際に、enumerable属性をfalseに設定すると、そのプロパティはfor...in文で走査されなくなります。

JavaScript 
Object.defineProperty(object, "nonEnumerableProperty", {
    value: "This property is not enumerable",
    enumerable: false
});

オブジェクトがnullまたはundefinedの場合の処理

for...in文を使用してオブジェクトを走査する際、オブジェクトがnullまたはundefinedの場合はエラーが発生します。したがって、走査を行う前に対象のオブジェクトが有効かどうかを必ず確認する必要があります。

JavaScript 
const obj = null;

for (let key in obj) {
    // ここは実行されません
}

for...in文を使用する際は、これらの注意点やポイントを十分に考慮した上でオブジェクトのプロパティを走査・操作する必要があります。そうすることで、予期せぬ問題を回避し、安定した処理が可能になります。次のセクションでは、for...in文の代替として使用できる方法について説明します。

for...in文の代替方法

for...in文以外にも、オブジェクトのプロパティを走査するためのさまざまな代替手段があります。これらの方法はより直感的で安全な走査を提供し、コードをより明確にします。以下では、Object.keys()、Object.values()、Object.entries()、for...of文、および配列のforEach()を活用した代替方法について説明します。

Object.keys()、Object.values()、Object.entries()を使用する利点

Object.keys()、Object.values()、Object.entries()は、オブジェクトを走査し、プロパティにより簡単にアクセスできるメソッドです。それぞれのメソッドは、オブジェクトのプロパティを配列に変換して返します。

  • Object.keys(obj)：オブジェクトのプロパティ名を配列として返します。
  • Object.values(obj)：オブジェクトのプロパティの値を配列として返します。
  • Object.entries(obj)：オブジェクトのプロパティを、[プロパティ名, 値]という形式の配列として返します。
JavaScript 
const person = {
    name: "John",
    age: 30,
    occupation: "Developer"
}

const keys = Object.keys(person);
const values = Object.values(person);
const entries = Object.entries(person);

console.log(keys);    // ['name', 'age', 'occupation']
console.log(values);  // ['John', 30, 'Developer']
console.log(entries); // [['name', 'John'], ['age', 30], ['occupation', 'Developer']]

for...of文およびforEach()を活用した代替方法

for...of文や配列のforEach()を使用して、オブジェクトのプロパティを走査することも可能です。

for...of文

for...of文は、イテラブルなオブジェクトを走査するために使用されます。オブジェクト自体は直接イテラブルではないため、この文はオブジェクトではなく、配列などのイテラブルなオブジェクトに対して使用されます。

JavaScript 
const values = Object.values(person);

for (const value of values) {
    console.log(value);
}

配列のforEach()関数

配列のforEach()は、配列の各要素に対してコールバック関数を実行します。このメソッドは配列にのみ適用可能であり、オブジェクトのプロパティを走査する場合は、事前にプロパティを配列に変換する必要があります。

JavaScript 
const person = {
    name: "John",
    age: 30,
    occupation: "Developer"
}

const entries = Object.entries(person);

entries.forEach(([key, value]) => {
    console.log(key + ": " + value);
});

これらの代替手段を利用することで、for...in文の注意点を回避しつつ、オブジェクトのプロパティをより安全に走査できます。状況に応じて適切な方法を選択し、コードをより明確に記述することが可能です。

注意点を守りながらオブジェクトを走査する重要性

for...in文はオブジェクトのプロパティを走査する便利な手段ですが、プロトタイプチェーン上のプロパティも走査されること、列挙可能なプロパティのみが対象であること、走査順序が保証されないことなど、注意すべき点があります。これらの注意点を理解し、プロパティ走査時に発生しうる問題を回避することが重要です。

また、for...in文のほかに、Object.keys()、Object.values()、Object.entries()、for...of文、およびforEach()といった代替手段を活用することで、より安全で直感的なプロパティの走査方法を利用できることも学びました。

オブジェクトはJavaScriptプログラミングにおいて非常に重要な概念です。オブジェクトのプロパティを走査することで、データの分析や加工、動的な操作、動的なプロパティの参照など、さまざまな処理を行うことができます。しかし、これらの操作を行う際には必ず注意点を守る必要があります。注意点を無視すると、プロパティの走査順序やプロトタイプチェーン上のプロパティの走査などによって、予期しない結果が発生する可能性があります。その結果、バグやセキュリティ問題が発生することもあるため、常に注意して作業を行うことが重要です。

最後に、オブジェクトを扱う際は常に注意と理解をもって作業することが重要です。また、オブジェクトのプロパティを順に処理する方法を効果的に活用できるよう、練習し慣れることが望まれます。

仕様書

for…in 문에 대한 명세서 사양
仕様書
for...in ECMAScript Language Specification
#sec-for-in-and-for-of-statements

ブラウザ互換性

for...in 文のブラウザ対応状況
文
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
for...in 1 12 1 1

参考資料

関連項目