🚀 JavaScript Challenge: Do you know how Closures and Event Loops work? Pop quiz for my fellow developers! 💻 Look at the code snippet below. What do you think the console will output? Is it 0, 1, 2? Or perhaps 3, 3, 3? 💡 The Explanation If you guessed 3, 3, 3, you’re right! But do you know why? This is a classic interview question that tests your understanding of Scope, Closures, and the Event Loop. Here is the breakdown: 1. Global Scope: The variable i is declared using let outside the loop. This means there is only one instance of i shared across every iteration. 2. The Event Loop: setTimeout is asynchronous. It schedules the log function to run after 100ms. By the time that 100ms passes, the for loop has already finished executing. 3. The Final Value: When the loop finishes, the value of i has been incremented to 3 (the condition that broke the loop). 4. Closure in Action: When the three scheduled log functions finally execute, they all look at that same single variable i, which is now 3 🛠️ How to fix it? If you wanted to output 0, 1, 2, the simplest fix is to move the declaration of i inside the loop head: for (let i = 0; i < 3; i++). This creates a block scope for each iteration, effectively "capturing" the value of i at that specific moment. Why this matters: Writing clean code is about more than just making it work—it's about understanding the underlying mechanics of the language to prevent memory leaks and unexpected bugs. #JavaScript #WebDevelopment #CodingChallenge #SoftwareEngineering #Frontend #TechCommunity
This happening because When variable - i is declared outside loop, the variable - i is stored in lexical environment of the global execution context. At every iteration of loop, log function keep the reference of the variable - i. Since, setTimeout is a asynchronous task, firstly it goes into call stack, then to browser, when the timer is expired, it is moved into event queue, and when call stack gets empty, it is moved to call stack. But loop gets executing and end when i = 3; At every execution of function - log, same variable -i is accessed by the reference. That's why 3 is printed every time. When we declared i in for loop like :- for(let i =0;i<3;i++); let has special per-iteration binding in loops. At every iteration, a new lexical environment is created with the latest value of variable - i; and in each iteration, log function keep the reference of variable - i found in its nearest lexical environment. Hence, at first i=0, 2nd time i=1, and last time i=2;
Wasiu Ramoni
2mo
since 'let' is declared outside the loop, it's not block scoped so we get 3,3,3 but if we declare it in the loop we get 0,1, 2
Because i is declared outside the loop, all callbacks reference the same variable, whose value becomes 3 when the loop finishes, so the output is 3 3 3.
Sadik Ansari
2mo
Yeah, Another way is that we can pass the i as argument to the setTimeout, so that each iteration passes the current value of i to the callback
Sakshi Tiwari
2mo
Answer is 3,3,3
Gaurab Mukherjee
2mo
2
Aman Maurya
2mo
0,1,2
Print 0 1 2 , without 1st iteration for loop dont increment i think