JavaScriptのfor…of / for…inの違いとは？用途と使い分けを基礎から解説

JavaScriptでは、配列やオブジェクトの中身を繰り返し処理する場面が多くあります。
その際によく使われる構文が for…of と for…in です。

どちらも繰り返し処理を行う構文ですが、取得できる値や用途が大きく異なります。
違いを理解せずに使うと、意図しない結果になることもあります。

この記事では、for…of と for…in の違い、使い方、使い分けの考え方を基礎からわかりやすく解説します。

for…of / for…inとは

for…of と for…in は、どちらも 繰り返し処理（ループ） を行う構文です。

JavaScriptにはいくつかの繰り返し構文があります。

• for文
• while文
• for…of
• for…in

基本的な繰り返し処理については、以下の記事で詳しく解説しています。

関連記事

• JavaScriptの繰り返し処理（for文）とは？基本から解説
• JavaScriptのwhile文とは？for文との違いを解説

その中でも for…of と for…in は「コレクション（配列・オブジェクトなど）」を処理するための構文です。

ただし、取得するものが異なります。

この違いが最も重要なポイントです。

for…ofとは（値を取り出すループ）

for…of は、配列などの 値（要素）を順番に取り出す ための構文です。

基本構文

for (const 要素 of 配列) {
  処理
}

配列の例

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

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

実行結果

apple
banana
orange

このように 配列の中の値をそのまま取り出すことができます。

配列のインデックスが不要な場合に便利

通常の for 文では、インデックスを使います。

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

一方、for…of は 値を直接取り出すためコードが簡潔になります。

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

そのため 配列処理では for…of がよく使われます。

使える主なデータ

for…of は 反復可能オブジェクト（Iterable） に使用できます。

代表例

• 配列
• 文字列
• Map
• Set
• NodeList

例（文字列）

const text = "JavaScript";

for (const char of text) {
  console.log(char);
}

実行結果

J
a
v
a
S
c
r
i
p
t

for…inとは（キーを取り出すループ）

for…in は、オブジェクトの キー（プロパティ名）を取り出す ための構文です。

基本構文

for (const key in オブジェクト) {
  処理
}

オブジェクトの例

const user = {
  name: "Taro",
  age: 25,
  country: "Japan"
};

for (const key in user) {
  console.log(key);
}

実行結果

name
age
country

取得されるのは 値ではなくキー です。

値を取得する方法

値は キーを使って取得します。

const user = {
  name: "Taro",
  age: 25,
  country: "Japan"
};

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

実行結果

Taro
25
Japan

キーと値を両方取得する例

for (const key in user) {
  console.log(key, user[key]);
}

実行結果

name Taro
age 25
country Japan

for…ofとfor…inの違い

両者の違いを整理すると次の通りです。

簡単にまとめると次のようになります。

配列 → for…of
オブジェクト → for…in

配列でfor…inを使うとどうなるか

配列で for…in を使うと、インデックスが取得されます。

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

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

実行結果

0
1
2

値ではなく インデックス（キー） が取得されます。

値を取り出す場合は次のようになります。

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

ただし 配列処理では for…of の方が一般的です。

for…ofとfor…inの使い分け

基本的な使い分けは次の通りです。

配列を処理する場合

for (const value of array)

理由

• 値を直接取得できる
• コードが読みやすい
• 現代JavaScriptでは標準的

オブジェクトを処理する場合

for (const key in object)

理由

• オブジェクトはキーで管理される
• プロパティを順番に取得できる

for…of / for…inの注意点

for…inは継承プロパティも取得する

for…in は 継承されたプロパティも列挙する場合があります。

そのため、安全に処理する場合は hasOwnProperty を使うことがあります。

for (const key in object) {
  if (object.hasOwnProperty(key)) {
    console.log(key);
  }
}

ただし最近では次の方法がよく使われます。

Object.keys(object)

Object.keysとの組み合わせ

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

Object.keys(user).forEach(key => {
  console.log(key, user[key]);
});

JavaScriptのオブジェクトについては、以下の記事でも解説しています。

関連記事

• JavaScriptのオブジェクトとは？基礎からわかりやすく解説

まとめ

for…of と for…in の違いは 取得する対象 にあります。

基本的な使い分けは次の通りです。

• 配列 → for…of
• オブジェクト → for…in

この違いを理解しておくことで、JavaScriptの繰り返し処理を適切に使い分けることができます。

関連記事

• JavaScriptの繰り返し処理（for文）とは？基本から解説
• JavaScriptのwhile文とは？for文との違いを解説
• JavaScriptの配列とは？基本から使い方を解説
• JavaScriptのオブジェクトとは？基礎からわかりやすく解説