💡
【JavaScript】for ループと forEach の違い
この記事でわかること
for ループと forEach の違い3選
- 適用範囲
- 制御の自由度
- 可読性
目的
for と forEach の違いを知ること
→ 知った上で、自分で使い分けの判断ができるようになることが目標です
きっかけ
forEach を実際に使ってみて、for ループと何が違うのかについて疑問を持ったこと
主な違い①: 適用範囲
| 構文 | 適用対象 | 特徴 |
| for ループ | ほぼ全ての繰り返し処理 | インデックスに基づいた処理の制御が可能
配列、オブジェクト、特定の回数の繰り返しなど、汎用的に使用できる |
| forEach | 配列専用のメソッド | 配列の各要素に対して処理を行なう
インデックスを意識しなくて済む |
for ループ
繰り返し回数や条件を自由に設定できるため、配列に限らず、特定の回数だけ繰り返したい場合や、複雑な反復条件を持つ処理など、汎用的に利用できます。
forEach
基本的に配列のメソッドとして提供されており、配列の全ての要素に対して順番に処理を実行したい場合に特化しています。
主な違い②: 制御の自由度
| 構文 | ループの制御 |
| for ループ | break や continue が使用できる |
| forEach | break や continueに相当する機能は使用できない |
※forEach におけるコールバック関数内のreturnは、その回の処理をスキップする continue のような挙動になりますが、ループ全体を中断する break としては機能しない
for ループ
特定の条件が満たされたときに break や continue でループを制御することができます。
forEach
配列の全要素に処理を適用することを目的としているため、途中で中断する機能を持っていません。
主な違い③: コードの書き方と可読性
for ループ
- インデックスの初期化、ループ継続条件、インクリメント（またはデクリメント）という手続きを記述する必要があるため、forEachに比べて冗長になりがち
- パフォーマンス面では、言語や実行環境によりますが、一般的にはforEachなどのコールバック関数を持つメソッドに比べて高速であることが多いようです
例
const nums = [1, 2, 3];
for (let i = 0; i < nums.length; i++) {
console.log(nums[i] * 2);
}
forEach
- 簡潔で読みやすい宣言的なコードになる
- 配列の各要素に対して「何をしたいか」という目的が明確になりやすい
- 要素の取得やインデックスの管理といった手続きを記述する必要がない
例
const nums = [1, 2, 3];
array.forEach(num => {
console.log(num * 2); // 要素に対する処理を記述
});
まとめ: 使用したいタイミング
forループ
- 配列以外の任意の回数や、複雑な条件で繰り返したいとき
- 特定の条件が満たされたときにbreakやcontinueでループを制御したいとき
- パフォーマンスが非常に重要で、可能な限りオーバーヘッドを避けたいとき
forEach
- 配列の全要素に順番に処理を適用したいとき
- ループの途中で中断する必要がないとき
- 可読性やコードの簡潔さを優先したいとき
最後までお読みいただき、ありがとうございました。
参考URL
Discussion