オブジェクトのプロパティを繰り返す | for…in | JavaScript 超完全入門 基本から発展までのすべて

amazon

スマイルSALE

--:--:--

～

検索

ad. 価格範囲を指定して商品を探せます

for...inとは？

for...inは、JavaScriptでオブジェクトのプロパティ（キー）を1つずつ取り出して処理するためのループ構文です。取得したキーを使って、それぞれの値へアクセスできます。

オブジェクト内の設定値やデータを順番に処理したい場合によく利用されます。

for...inの基本構文

基本的な書き方は次のとおりです。

for (const key in object) {
    // 処理
}

keyにはオブジェクトのプロパティ名が順番に代入されます。

基本的な使用例

オブジェクトのプロパティ名と値を順番に表示してみましょう。

const user = {
    name: "Taro",
    age: 25,
    city: "Tokyo"
};

for (const key in user) {
    console.log(key + ": " + user[key]);
}

実行結果は次のようになります。

name: Taro
age: 25
city: Tokyo

プロパティ名はkeyへ入り、値はuser[key]で取得できます。

配列にはfor...ofの方が適している

for...inはオブジェクト向けの構文です。配列にも使用できますが、通常はfor...ofやforEach()を利用する方が適しています。

配列に対してfor...inを使うと、要素ではなく添字（インデックス）が取得されます。

const fruits = ["Apple", "Orange", "Banana"];

for (const index in fruits) {
    console.log(index);
}

実行結果は次のようになります。

0
1
2

プロトタイプのプロパティも列挙される

for...inは、オブジェクト自身のプロパティだけでなく、プロトタイプチェーン上にある列挙可能なプロパティも取得します。

そのため、自身のプロパティだけを処理したい場合は、Object.hasOwn()またはhasOwnProperty()を使用します。

const user = {
    name: "Taro",
    age: 25,
    city: "Tokyo"
};

for (const key in user) {
    if (Object.hasOwn(user, key)) {
        console.log(key + ": " + user[key]);
    }
}

実行結果は次のようになります。

name: Taro
age: 25
city: Tokyo

古い環境では、代わりにuser.hasOwnProperty(key)を使用します。

Object.keys()との違い

オブジェクトを繰り返し処理する方法として、Object.keys()もよく利用されます。

for...inを使用する際の注意点

• オブジェクトの繰り返し処理に使用する。
• 配列には通常for...ofを使用する。
• プロトタイプチェーン上のプロパティが取得される可能性がある。
• 自身のプロパティだけを扱う場合はObject.hasOwn()やhasOwnProperty()を利用する。

まとめ

• for...inはオブジェクトのキーを順番に取得するループである。
• 値はobject[key]で取得できる。
• 配列よりもオブジェクトの処理に適している。
• プロトタイプチェーン上のプロパティも取得する可能性がある。
• 自身のプロパティのみ処理したい場合はObject.hasOwn()やhasOwnProperty()を利用する。