Javascript Interview Question Explanation -Asynchronous Behaviour

Introduction

In this article, we will explore a fascinating piece of JavaScript code that demonstrates the asynchronous nature of the language, particularly how closures and the setTimeout function work together. If you’ve ever been puzzled by why your loop outputs unexpected results, you’re in the right place!

Key Concept

Asynchronous Programming: JavaScript is single-threaded, meaning it can only execute one piece of code at a time. However, it can handle asynchronous operations, allowing certain tasks to run in the background while the main thread continues executing.

SetTimeout: This function is used to execute a piece of code after a specified delay. It takes two parameters: a callback function and a delay in milliseconds.

Closures: A closure is a function that retains access to its lexical scope, even when the function is executed outside that scope. This is crucial for understanding how variables are accessed in asynchronous callbacks.

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, i * 1000);
}

Before we dive into the details, take a moment to look at this code snippet. Try to guess what the output will be based on your current understanding. This approach not only helps reinforce your JavaScript skills but also makes the explanation that follows much more meaningful

Think about how JavaScript will process each line. Once you’ve made your guess, keep reading to see if you got it right!

Explanation

Let break down the code step by step:

Loop Execution: The loop runs five times, incrementing `i` from 0 to 4.

setTimeout: For each value of `i`, a `setTimeout` is scheduled to log `i` after `i * 1000` milliseconds.

Closures: By the time the `setTimeout` callbacks execute, the loop has already completed, and `i` has a final value of 5. Therefore, all the callbacks will log `5`.

What you might except

0
1
2
3
4

What actually Happen

5
5
5
5
5

However, this is not the actual output that you would see. The reason for this is a common JavaScript behavior related to the scope of the `i` variable.

In the provided code, the `i` variable is declared using `var`, which means it has function scope. When the `setTimeout()` functions are executed, the loop has already completed, and the value of `i` is 5. Therefore, all the `setTimeout()` functions will log the value 5 to the console, regardless of the delay.

Fixing the Issue

To achieve the expected output of `0, 1, 2, 3, 4`,

We can use an **`Immediately Invoked Function Expression (IIFE) `**to create a new scope for each iteration.
We can use `let` keyword instead of `var`.

Solution

1- Immediately Invoked Function Expression (IIFE)

for (var i = 0; i < 5; i++) {
  (function(i) {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
}

Now, each `setTimeout` will captures the current value of `i`, and output will be:

0
1
2
3
4

2- By Using `Let` keyword

The `let` keyword creates a block-scoped variable, which means that each iteration of the loop will have its own copy of the `i` variable, and the `setTimeout()` functions will capture the correct value of `i` for each iteration.

Conclusion

Understanding how JavaScript handles asynchronous operations and closures is crucial for writing effective code. The original code snippet serves as a great example of how the `setTimeout` function interacts with the loop variable `i`. By using an `IIFE`, we can ensure that each timeout logs the correct value. So, the next time you encounter a similar situation, remember the power of closures and how they can help you manage asynchronous behaviour in JavaScript

Mission Accomplished: Unraveling the Code!

I hope this explanation not only clarified the code but also sparked some curiosity to explore further. JavaScript is full of surprises and powerful tools, and each piece you learn brings you closer to mastering it.

Thanks for reading

I hope you enjoyed this breakdown! Feel free to share your thoughts, questions, or ideas for future topics in the comments.

Happy coding!

If you enjoyed the article and would like to show your support, be sure to:

Follow me On Medium

Follow me On Dev

Checkout more Portfolio