概要
forは 従来型ループ構文で、配列や文字列の インデックスを制御しながら反復処理ができます。
for...ofは Iterable（反復可能オブジェクト）用の構文で、配列や文字列の 値を直接取り出して処理できます。
for...inは オブジェクトのプロパティ列挙用の構文で、オブジェクトの キー（名前）を順番に取り出して処理できます。
つまり、
-
forは「インデックスを扱う汎用ループ」 -
for...ofは「配列・文字列などの値を処理するループ」 -
for...inは「オブジェクトのキーを処理するループ」
です。
目次
基本構文
JavaScript
// for: インデックスを使うループ
const arr = ["a", "b", "c"];
for (let i = 0; i < arr.length; i++) {
console.log(i, arr[i]);
}
// for...of: 値を直接扱うループ
for (const value of arr) {
console.log(value);
}
// for...in: キーを扱うループ（オブジェクト向け）
const obj = { x: 1, y: 2 };
for (const key in obj) {
console.log(key, obj[key]);
}
for, for...of, for...in の比較
for文
JavaScript
const fruits = ["apple", "banana", "orange"];
for (let i = 0; i < fruits.length; i++) {
console.log(i, fruits[i]);
}
// 出力結果
// 0 "apple"
// 1 "banana"
// 2 "orange"
- 対象: 配列・文字列など
- 列挙内容: インデックスを手動で制御
- 用途: 範囲制御・前後の要素参照・細かい条件付きループ
for...of文
JavaScript
const fruits = ["apple", "banana", "orange"];
for (const fruit of fruits) {
console.log(fruit);
}
// 出力結果
// "apple"
// "banana"
// "orange"
- 対象: Iterable（配列、文字列、Set, Map など）
- 列挙内容: 値
- 用途: 配列や文字列の要素をシンプルに処理したいとき
for...in文
JavaScript
const user = { name: "Alice", age: 25 };
for (const key in user) {
console.log(key, user[key]);
}
// 出力結果
// "name" "Alice"
// "age" 25
- 対象: オブジェクト
- 列挙内容: プロパティ名（キー）
- 用途: オブジェクトのキーと値を処理したいとき
比較結果
| 構文 | 対象 | 列挙内容 | 主な用途 |
|---|---|---|---|
for |
配列・文字列 | .length | 範囲制御、細かい条件ループ |
for...of |
Iterableなオブジェクト （配列/文字列/Map/Set） |
配列: 要素 文字列: 文字 |
配列や文字列をシンプルに処理 |
for...in |
オブジェクト | キー | プロパティ列挙 |
活用例
1. 配列をループして合計を求める（for）
JavaScript
const nums = [1, 2, 3, 4];
let sum = 0;
for (let i = 0; i < nums.length; i++) {
sum += nums[i];
}
console.log(sum);
// 出力結果 10
2. 配列の値をそのまま処理する（for...of）
JavaScript
const words = ["hello", "world"];
for (const w of words) {
console.log(w.toUpperCase());
}
// 出力結果 "HELLO" "WORLD"
3. オブジェクトのプロパティを列挙する（for...in）
JavaScript
const car = { brand: "Toyota", year: 2020 };
for (const key in car) {
console.log(`${key}: ${car[key]}`);
}
// 出力結果
// "brand: Toyota"
// "year: 2020"