🚀 JavaScript Debugging Challenge: Fixing a Closure Bug

Peeyush Tyagi — Mon, 03 Feb 2025 18:08:29 +0000

Problem Statement
You're given the following JavaScript function that is supposed to print numbers 1 to 5, each with a 1-second delay. But something is wrong!

javascript
Copy
Edit
function printNumbers() {
for (var i = 1; i <= 5; i++) {
setTimeout(function() {
console.log(i);
}, i * 1000);
}
}

printNumbers();
Expected Output:
Copy
Edit
1
2
3
4
5
Actual Bugged Output:
Copy
Edit
6
6
6
6
6
🔎 What’s the Bug?
The issue is caused by closures and the var keyword.
setTimeout stores a reference to i, but by the time the callback executes, the loop has already finished and i = 6.
Hence, all iterations log 6 instead of 1, 2, 3, 4, 5.
✅ How to Fix It?
Solution 1: Use let instead of var (Block Scope Fix)
javascript
Copy
Edit
function printNumbers() {
for (let i = 1; i <= 5; i++) {
setTimeout(function() {
console.log(i);
}, i * 1000);
}
}
printNumbers();
🔹 let creates a block-scoped variable for each loop iteration, fixing the issue.

Solution 2: Use an IIFE (Immediately Invoked Function Expression)
javascript
Copy
Edit
function printNumbers() {
for (var i = 1; i <= 5; i++) {
(function(num) {
setTimeout(function() {
console.log(num);
}, num * 1000);
})(i);
}
}
printNumbers();
🔹 The IIFE captures i as num, preserving the correct value for each iteration.

⚡ Final Thoughts
Understanding closures and scope is crucial for mastering JavaScript! Which solution do you prefer? Let me know in the comments! 💬🔥

JavaScript #Closures #Debugging #WebDevelopment

🚀 Understanding React Context and the Double Curly Braces in AuthContext.Provider 💡

Peeyush Tyagi — Fri, 31 Jan 2025 18:08:34 +0000

In React, the Context API is a game-changer when it comes to managing global state across your components. One part of React Context that often trips up developers is the use of the Provider component and its value prop. Specifically, you might have encountered this line:

jsx
Copy
Edit

But why does this line contain double curly braces? Let’s break it down!

1️⃣ React Context Overview
The Context API allows you to pass values (like user data, authentication state, themes, etc.) through your component tree without manually passing props to each intermediate level.

2️⃣ The Double Curly Braces
Outer {}: These are used to embed JavaScript expressions within JSX. In React, whenever you want to execute JavaScript inside JSX, you wrap it in curly braces.

Inner {}: This is where we define a JavaScript object. In this case, it’s an object containing useData and admin. You’re passing this object as the value to the Provider to share it with the child components.

Here's the breakdown:

jsx
Copy
Edit

The outer {} is needed because we are using JSX. The inner {} creates an object to pass useData and admin as values to the Provider.

3️⃣ Why It Matters
Using Context in this way allows components deeper in the component tree to access the values shared via the Provider, avoiding "prop drilling" and making the code cleaner and more maintainable.

🔗 Key Takeaways:

The Context API is a powerful tool for managing global state in React.
The double curly braces are necessary for embedding a JavaScript object in JSX.
It makes managing shared state between components much more efficient.

DEV Community: Peeyush Tyagi

🚀 JavaScript Debugging Challenge: Fixing a Closure Bug

JavaScript #Closures #Debugging #WebDevelopment

🚀 Understanding React Context and the Double Curly Braces in AuthContext.Provider 💡