JavaScriptのfor系構文まとめ
最近ちゃんとJavaScriptを使い始めて知ったのですが、JavaScriptのfor文にはいくつかの派生構文があるとのこと。
今回は、私自身の備忘録としての意味も含めつつ、よく使われる派生構文について学んだ内容をまとめています。
1. 通常のfor文
for (let i = 0; i < 5; i++) {
console.log(i);
}
// 出力: 0, 1, 2, 3, 4
使いどころ
- 回数やインデックスを明示的に制御したい場合
- 配列の一部だけ処理したい場合
- ステップ幅を自由に変えたい場合
2. for of
const arr = ['apple', 'banana', 'cherry'];
for (const value of arr) {
console.log(value);
}
// 出力: apple, banana, cherry
for of はJavaScriptで 反復可能オブジェクト（iterable） の「値」を順番に取り出すための構文です。
配列、文字列、Map、Set、arguments、NodeListなどのiterableに対応しています。
後述するfor inが「プロパティ名」を列挙するのに対し、for ofは「値」そのものを列挙します。
使いどころ
- 配列や文字列などiterableの値を順に処理したい場合
- 値そのものに直接アクセスしたい場合
3. 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
for in はJavaScriptで オブジェクトのプロパティ名（キー） を順番に取り出すための構文です。
配列でも使えますが、挙動上の注意が多いようで、主にオブジェクト用と考えるべきです。
使いどころ
- オブジェクトのプロパティ名を取得したい場合
- 配列には非推奨（順序や継承プロパティの影響を受けるため）
4. for await of
async function* asyncGenerator() {
yield 'one';
yield 'two';
yield 'three';
}
(async () => {
for await (const value of asyncGenerator()) {
console.log(value);
}
})();
// 出力: one, two, three
for await of は、非同期反復（Async Iteration） のための構文です。
for ofと似ていますが、処理対象が 非同期反復可能オブジェクト（AsyncIterable）の場合に使われます。
ループ内でawaitが自動的に働き、1つずつ非同期の結果を待ってから次の値に進みます。
使いどころ
- 非同期反復処理（AsyncIterable）の値を逐次取得したい場合
- ネットワークやストリームなど、到着順に処理する場合
基本構文↓↓↓
for await (変数 of asyncIterable) {
// 非同期に取得した値を使った処理
}
5. 条件・初期化省略形
let i = 0;
for (;;) {
if (i >= 3) break;
console.log(i++);
}
// 出力: 0, 1, 2
使いどころ
- 無限ループを作り内部で条件判定して抜けたい場合
- 初期化や更新処理をループ外に置きたい場合