【JavaScript】for..inで反復処理を記述する方法

（最終更新月：2023年11月）

✔以下のような方に向けて書かれています

✔当記事を通じて伝えること

• JavaScriptのfor in文の基本
• for in文の使用方法とその応用の仕方
• JavaScriptのfor in文の実生活応用例

当記事では、JavaScriptのfor in文の基礎知識からオプションの使用方法まで、実際のサンプルコードを交えて詳しく解説します。

最後までお読みいただくことで、自身もfor in文を自由自在に使いこなせるようになるでしょう。

ぜひご一読ください。

for..inとは？

こちらでは、「for..in」についてお伝えしていきます。

「for..in」を使用することで、オブジェクトのプロパティを簡単に反復処理できるのがメリットです。

• オブジェクトでのfor..inの使用
• プロパティの値を取り出すためのfor..in文

オブジェクトでのfor..inの使用

for..in文は、オブジェクトの各プロパティに対して反復処理をおこなうための構文です。

この構文を使用すると、オブジェクト内のすべてのプロパティを簡単にループできます。

let person = {name: "John", age: 30};

オブジェクトがある場合、for..inを使用して各プロパティを取得できます。

プロパティの値を取り出すためのfor..in文

for..in文を使用して、オブジェクトのプロパティの値を取り出せます。

以下の例は、personオブジェクトの各プロパティの値をコンソールに表示するものです。

let person = {name: "John", age: 30};
for (let key in person) {
    console.log(person[key]);
}

for..inの基本操作

こちらでは、「for..inの基本操作」についてお伝えしていきます。

for..inを使うことで、オブジェクトのプロパティを効率的に操作できます。

• 早速for..inを試してみよう
• 構文と引数の理解

早速for..inを試してみよう

for..in文の基本的な使用方法を以下の例で確認してみましょう。

let car = {brand: "Toyota", model: "Camry", year: 2020};
for (let property in car) {
    console.log(`${property}: ${car[property]}`);
}

構文と引数の理解

for..in文の構文は、以下の形式を取ります。

for (variable in object) {
 // variableに対する処理など
}

ここで、variableはオブジェクトの各プロパティ名を取得する変数、objectは対象となるオブジェクトです。

for..inを深く理解する

こちらでは、「for..inの深い理解」について見ていきましょう。

for..inを使うことで、オブジェクトのプロパティに対する高度な操作が可能となります。

• プロパティの追加、削除、変更を反映
• 配列とfor..inの関係性
• 個別のプロパティを対象にした繰り返し処理

プロパティの追加、削除、変更を反映

for..in文は、オブジェクトのプロパティが動的に追加、削除、変更された場合でも、それを反映してループをおこないます。

ループ中に新しいプロパティを追加すると、そのプロパティもループの対象です。

let student = {name: "Alice", grade: "A"};
for (let key in student) {
    console.log(key, student[key]);
    if (key === "name") {
        student.subject = "Math";
    }
}

配列とfor..inの関係性

配列もオブジェクトの一種であるため、for..in文を使用して配列の要素にアクセスできます。

ただし通常の配列操作には、for..ofや配列のメソッドを使用する方が適しています。

for..inを配列に使用すると、配列のインデックスが文字列として返される点に注意が必要です。

let fruits = ["apple", "banana", "cherry"];
for (let index in fruits) {
    console.log(index, fruits[index]);
}

個別のプロパティを対象にした繰り返し処理

特定のプロパティだけを対象にfor..inループを行いたい場合、条件分岐を使用して制御できます。

let person = {name: "John", age: 30, country: "US"};
for (let key in person) {
    if (key === "name" || key === "age") {
        console.log(key, person[key]);
    }
}

例をもとにしたfor..inの実用性の把握

こちらでは、「for..inの実用性」について見ていきましょう。

for..inを使用することで、オブジェクトのプロパティを効率的に操作できます。

• 具体的なfor..inの使用例
• 独自のプロパティを対象とした反復処理

具体的なfor..inの使用例

オブジェクトのプロパティを一覧表示する際や、プロパティの値を変更する際など、多岐にわたるシチュエーションでfor..inは役立ちます。

let settings = {brightness: 70, volume: 50, theme: "dark"};
for (let setting in settings) {
    console.log(`Current ${setting} is ${settings[setting]}`);
}

独自のプロパティを対象とした反復処理

オブジェクトが継承したプロパティを除外して、独自のプロパティだけを対象にfor..inループを行いたい場合、hasOwnPropertyメソッドを使用します。

for (let key in person) {
    if (person.hasOwnProperty(key)) {
        console.log(key, person[key]);
    }
}

継承への注意と対応策

こちらでは、「継承とfor..inの関係性」についてお伝えしていきます。

オブジェクトがほかのオブジェクトからプロパティを継承する場合、for..inループは継承されたプロパティも反復処理の対象とするからです。

• hasOwnPropertyの役割と使用方法
• Object.keysを使った場合の対処法

hasOwnPropertyの役割と使用方法

hasOwnPropertyメソッドは、オブジェクトが特定のプロパティを独自に持っているか（継承されていないか）を確認するためのメソッドです。

for..inループ内でこのメソッドを活用すれば、継承されたプロパティをループの対象から除外できます。

function Animal() {
    this.species = "animal";
}

function Dog(name) {
    this.name = name;
}

Dog.prototype = new Animal();

let beagle = new Dog("Beagle");

for (let prop in beagle) {
    if (beagle.hasOwnProperty(prop)) {
        console.log(prop, beagle[prop]);
    }
}
// 出力: name Beagle

Object.keysを使った場合の対処法

Object.keysメソッドを使用すると、オブジェクトの独自のプロパティのキーのみを配列として取得できます。

これを利用することで、継承されたプロパティを反復処理の対象から簡単に除外できます。

let keys = Object.keys(beagle);
for (let i = 0; i < keys.length; i++) {
    console.log(keys[i], beagle[keys[i]]);
}
// 出力: name Beagle

まとめ

当記事では、JavaScriptのfor in文について見てきました。

for..inはJavaScriptでオブジェクトのプロパティを効率的に反復処理するための強力なツールです。

ただし継承されたプロパティや配列の要素に対する使用には注意が必要。

適切なメソッドやテクニックを活用することで、安全かつ効率的にfor..inを使用きます。