Hey there! Have you ever found yourself baffled by JavaScript’s asynchronous behavior? Let’s roll up our sleeves and dig into the magic behind this fascinating puzzle of JavaScript!

The Challenge 🏆:

Your task is simple (or is it?): Write a JavaScript script to print the numbers 1, 2, 3 sequentially, each number appearing after a one-second delay. It sounds like a breeze, right? But hold on to your hats; there’s a twist awaiting you!

The Solution 💡:

Let’s uncover the solution! We’ll walk through the JavaScript code that accomplishes this task using a simple loop and setTimeout.

for (let i = 1; i <= 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}

Practical Output:

//Each number appears after one-second delay.
1
2
3

What if, instead of ‘let’, we use ‘var’? 🤔

What if we dared to switch from let to varin our script? Could this minor tweak lead to a dramatic change in our expected outcome? The answer lies in the nuances of variable scoping and how JavaScript handles asynchronous operations with different variable declarations.

// This is what our code looks like now
for (var i = 1; i <= 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}

Practical Output:

//Each number appears after one-second delay.
4
4
4

Unexpected Turn of Events: ‘var’ Twist🔀

The unexpected shift from letto varintroduces a fascinating twist in our JavaScript narrative. Instead of the anticipated sequential output of 1, 2, 3, we’re met with an unforeseen repetition of 4, 4, 4.
This intriguing outcome prompts us to embark on a deeper exploration of variable scoping intricacies and asynchronous execution dynamics within JavaScript.

Understanding the Root Cause:

Variable Scoping :

• let and its Block Scoping: Each iteration in the loop possesses its exclusive i, encapsulated within its block.

• var and its Function-Level Scope: var shares a single iacross all iterations, existing at the function level.

Asynchronous Nature of setTimeout:

• setTimeout’s Timekeeping Quirk: It doesn’t halt the loop; rather, it schedules functions for later execution.

• Asynchronous Function Access: Functions grab the value of inot when scheduled but at their execution time.

Closures: Capturing Magic in Asynchronous

While we’ve focused on let and var, another concept worth mentioning is closures. Closures act like little memory capsules, preserving variable values even within asynchronous contexts.

Imagine a magician sealing a secret message in a time capsule that can only be opened later. Similarly, closures preserve the captured value of i within their scope, ensuring it remains unchanged even when the surrounding function has finished executing.

Conclusion

This unexpected behavior highlights the importance of understanding variable scoping and the intricate dance of asynchronous execution in JavaScript. Mastering these concepts allows you to write robust and predictable code that truly shines.

Bonus: Exploring Further with async/await

Modern JavaScript offers even more powerful tools for handling asynchronous code. Let's peek into the async/await:

async function printNumbersSequentially() {
  for (let i = 1; i <= 3; i++) {
    await new Promise(resolve => setTimeout(resolve, i * 1000));
    console.log(i);
  }
}

printNumbersSequentially(); 
// Output: 1, 2, 3 (each after a 1-second delay)

Here, async/await simplifies asynchronous control flow, making it feel almost like synchronous code.

Originally published on Medium