From bafca998d70ccb2b27c2c04805a8fd02f94c9c2c Mon Sep 17 00:00:00 2001 From: mohamedabdelhaq-123 Date: Sat, 21 Mar 2026 17:11:34 +0200 Subject: [PATCH 1/2] Add question about the difference between for loop and forEach --- README.md | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/README.md b/README.md index efe91a82..8edf4d5a 100644 --- a/README.md +++ b/README.md @@ -499,6 +499,7 @@ | 476 | [Why is it important to remove event listeners after use?](#why-is-it-important-to-remove-event-listeners-after-use) | | 477 | [What is structuredClone and how is it used for deep copying objects?](#what-is-structuredclone-and-how-is-it-used-for-deep-copying-objects) | | 478 | [What is the difference between const and Object.freeze](#what-is-the-difference-between-const-and-objectfreeze) | +| 479 | [What is the difference between for loop and forEach](#what-is-the-difference-between-for-loop-and-foreach) | @@ -9577,6 +9578,59 @@ Common use cases and benefits: **[⬆ Back to Top](#table-of-contents)** +479. ### What is the difference between for loop and forEach + + Both are used to iterate over arrays, but they differ in performance, flexibility, and purpose. + + The `for` loop is a core JavaScript statement that gives you full control over iteration: + ```javascript + const arr = [1, 2, 3]; + for (let i = 0; i < arr.length; i++) { + console.log(arr[i]); + } + ``` + + The `forEach` is an array method introduced in ES5 that accepts a callback and calls it for each element: + + ```javascript + const arr = [1, 2, 3]; + arr.forEach((num) => console.log(num)); + ``` + + **Why is `for` loop faster?** + + `forEach` has two sources of overhead on every iteration: first, it + invokes your callback using `.call()` (a function call has a cost). + Second, it checks for empty slots in the array (`i in this`) on every + single iteration even when the array has no empty slots at all. The + `for` loop does neither of these things, and JavaScript engines like + V8 are highly optimized for its simple counter pattern. + + **Why was `forEach` created?** + + For readability. The classic `for (let i = 0; i < arr.length; i++)` + is noisy you have to declare a counter, write a condition, and + increment manually, just to access each element. `forEach` hides all + of that mechanics and lets you focus on the element itself. Arrow + functions later made it even cleaner. However, they also made its + optional `thisArg` parameter (used to set `this` inside the callback) + mostly obsolete, since arrow functions inherit `this` automatically. + + **When to use which:** + ```javascript + // Use forEach — simple iterations where readability matters + arr.forEach((num) => console.log(num)); + + // Use for loop — when you need break, continue, or max performance + for (let i = 0; i < arr.length; i++) { + if (arr[i] === target) break; // impossible with forEach + } + ``` + + **Note:** The `for` loop is strictly more powerful anything `forEach` does, `for` loop can do too, but not the other way around. + +**[⬆ Back to Top](#table-of-contents)** + ### Coding Exercise From 429c181c3cd610dcbf3ea19ef95bd9619b8b3f2e Mon Sep 17 00:00:00 2001 From: mohamedabdelhaq-123 Date: Sat, 21 Mar 2026 17:21:50 +0200 Subject: [PATCH 2/2] Remove manual TOC entry, let the action handle it --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index 8edf4d5a..2be6b6d0 100644 --- a/README.md +++ b/README.md @@ -499,7 +499,6 @@ | 476 | [Why is it important to remove event listeners after use?](#why-is-it-important-to-remove-event-listeners-after-use) | | 477 | [What is structuredClone and how is it used for deep copying objects?](#what-is-structuredclone-and-how-is-it-used-for-deep-copying-objects) | | 478 | [What is the difference between const and Object.freeze](#what-is-the-difference-between-const-and-objectfreeze) | -| 479 | [What is the difference between for loop and forEach](#what-is-the-difference-between-for-loop-and-foreach) |