for…ofとfor…inの違い | for…of | JavaScript 超完全入門 基本から発展までのすべて

for…ofとは？

for…ofは、配列やSet、Mapなどの反復可能オブジェクト（iterable）の各要素を繰り返し処理するための構文です。反復可能オブジェクトの要素の「値」を直接操作できるため、要素を効率よく処理できます。

for…inとは？

for…inは、オブジェクトのプロパティや配列のインデックスを列挙するための構文です。オブジェクトの「キー」や配列の「インデックス」を順に取り出し、それに基づいて処理を行います。

for…ofの使用例

for…ofを使用して、配列の要素を処理する例を見てみましょう。

const fruits = ["apple", "banana", "orange"];

for (let fruit of fruits) {
    console.log(fruit);
}

この例では、配列fruitsの各要素（apple、banana、orange）が順に出力されます。for...ofは、配列のインデックスではなく、要素の「値」を直接操作します。

for…inの使用例

次に、for…inを使用してオブジェクトのプロパティを列挙する例を見てみましょう。

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

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

この例では、オブジェクトuserのプロパティ名（name、age、city）が順に出力され、それぞれに対応する値も表示されます。for...inは、プロパティ名（キー）を操作します。

配列に対するfor…inの問題点

配列に対してfor…inを使うと、配列のインデックス以外のプロパティが含まれることがあります。例えば、次のように配列にプロパティを追加した場合です。

const fruits = ["apple", "banana", "orange"];
fruits.color = "red";

for (let index in fruits) {
    console.log(index + ": " + fruits[index]);
}

この例では、colorというプロパティが追加されており、for…inを使うとそのプロパティも列挙されます。

• 0: apple
• 1: banana
• 2: orange
• color: red

配列を安全に扱いたい場合は、for...ofを使うほうが適切です。

for…ofとfor…inの比較

for…ofとfor…inの違いをまとめた表を見てみましょう。

まとめ

JavaScriptのfor...ofとfor...inは、それぞれ異なる用途に適しています。for...ofは、配列や反復可能オブジェクトの要素を直接処理するのに適しており、for...inはオブジェクトのプロパティや配列のインデックスを列挙するために使用されます。配列やSet、Mapのような反復可能オブジェクトを扱う場合は、for...ofを使うことでより安全で直感的な処理が可能です。