Javascript Interview Question Explanation -Asynchronous Behaviour

Asynchronous Behaviour of JavaScript with setTimeout

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

Before diving into the code, Let discuss few 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.

Closure: 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 Happens

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,

• you 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

Immediately Invoked Function Expression

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

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

Comments

[JAYANT JAIN]

Nice work