JavaScriptでループ処理（繰り返し構文）を書く際、for...in と for...of のどちらを使うべきか曖昧になっていませんか？
今回は、違いをコード例付きで徹底解説します！
for…in：オブジェクトの「キー」をループする
for...in は、主にオブジェクトの「キー」を先頭から順に処理するために使用します。
for (const キー in オブジェクト) {
// 処理
}出力されるのは「バリュー」ではなく「キー」
ポイントは、ループの仮変数に格納されるのが「バリュー」ではなく「キー」である点です。
const todo = {
name: '料理をする',
description: 'カレーを料理する',
date: 20260521
};
for (const key in todo) {
console.log(key);
}
// 出力されるのはキー
// "name"
// "description"
// "date"もし「バリュー」を取得したい場合は、以下のようにオブジェクトにキーを流し込む必要があります。
for (const key in todo) {
console.log(todo[key]);
}
// 出力されるのはバリュー
// '料理をする'
// 'カレーを料理する'
// 20260521for…of：配列の「バリュー」を直接ループする
for...of は、配列や列挙可能なオブジェクトの「バリュー」を直接取り出して処理するために使用します。
for (const 値 of 配列) {
// 処理
}値だけを安全に取得
バリューだけを出力してくれます。
const area = ['tokyo', 'osaka', 'nagoya'];
for (const item of area) {
console.log(item);
}
// 出力されるのはバリュー
// "tokyo"
// "osaka"
// "nagoya"⚠️ for…ofをオブジェクトで使用するとエラーが出ます。
for...of は、「順番に要素を取り出す仕組み（反復可能性 / Iterable）」を持っているデータにしか使えません。
const product = {
name: 'Nintendo Switch',
price: 32978
};
for (const value of product) {
console.log(value);
}
// ❌ 実行結果 (エラー):
// TypeError: product is not iterable【余談】オブジェクトのキーとバリューを取得する方法
オブジェクトのキーやバリューを配列として一括取得する方法と for...of を組み合わせる書き方が最も安全とされています。
const product = {
name: 'Nintendo Switch',
price: 32978
};
// Object.entries() で [キー, 値] の配列に変換し、for...of で回す
for (const [key, value] of Object.entries(product)) {
console.log(`${key}: ${value}`);
}
// 出力されるのはキーとバリューの配列
// "name: Nintendo Switch"
// "price: 32978"この方法を使えば、オブジェクトをループできます。
まとめ
最後に、2つの違いをわかりやすく表にまとめました。
| 特徴 | for…in | for…of |
| 主な用途 | オブジェクト | 配列 |
| 取得できるもの | キー | バリュー |
for...in
→ オブジェクトのキーを取得したい時
for...of
→ 配列のバリューを取得したい時
正しく使い分けて、バグのない安全でクリーンなコードを書いていきましょう！
