JavaScriptでfor〜inとfor〜ofの使い方と違い

38 回閲覧されました

公開日 : 2025年5月2日
最終更新日 : 2025年5月1日

みなさんこんにちは、jonioです。

今回はJavaScriptのfor〜inとfor〜ofの使い方のメモになります。

for〜inの使い方

オブジェクトや配列のキーを取得するのに使います。

まずはオブジェクトの場合で考えます。

const obj = { a: 1, b: 2, c: 3 };

for (const key in obj) {
    console.log(`キー: ${key}, 値: ${obj[key]}`);
}

結果は下記になります。

キー: a, 値: 1
キー: b, 値: 2
キー: c, 値: 3

バリューを取得したい場合は「obj[key]」の記述をすればいいです。

次は配列の場合です。

const arr = [10, 20, 30];

for (const index in arr) {
    console.log(`インデックス: ${index}, 値: ${arr[index]}`);
}

結果は下記になります。

インデックス: 0, 値: 10
インデックス: 1, 値: 20
インデックス: 2, 値: 30

バリューを取得したい場合は「arr[index]」の記述をすればいいです。

for〜inかキーを取得するのに対してfor〜ofは配列やオブジェクトのバリューを取得します。

まずはオブジェクトの場合です。

const obj = { a: 1, b: 2, c: 3 };

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

結果は下記になります。

1
2
3

次は配列の場合です。

const arr = ['a', 'b', 'c'];

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

結果は下記になります。

a
b
c

for〜inがキーを取得するのに対してfor〜ofはバリューを取得します。