setTimeout + Closures Interview Question 🔥 | Namaste 🙏 JavaScript Ep. 11

Introduction

In this tutorial, we will explore important JavaScript concepts related to closures and the setTimeout function, which are frequently discussed in technical interviews. Understanding these concepts will help you tackle tricky interview questions and improve your JavaScript skills.

Chapter 1: Understanding setTimeout and Closures

• The setTimeout function allows you to execute a callback after a specified delay.
• It does not halt execution; instead, it schedules the callback and continues running subsequent code.
• Example:

  function example() {
      let i = 1;
      setTimeout(() => {
          console.log(i);
      }, 1000);
  }
  example(); // Outputs: 1 after 1 second
  

• Key Point: Closures capture the reference to variables in their lexical scope, not the actual value at the time of execution.

Chapter 2: The Common Pitfall with setTimeout in Loops

• When using setTimeout inside a loop with var, all callbacks reference the same variable.
• Example of a problematic loop:

  for (var i = 1; i <= 5; i++) {
      setTimeout(() => {
          console.log(i);
      }, i * 1000);
  }
  // Outputs: 6 (five times) after 5 seconds
  

• Explanation: All callbacks reference the same variable i, which becomes 6 by the time the callbacks are executed.

Chapter 3: The Solution Using let

• Use let instead of var inside the loop to create a new block-scoped variable for each iteration.
• Example:

  for (let i = 1; i <= 5; i++) {
      setTimeout(() => {
          console.log(i);
      }, i * 1000);
  }
  // Outputs: 1, 2, 3, 4, 5 after 1 to 5 seconds respectively
  

• Tip: let creates a new binding for i in each iteration, preventing the closure problem.

Chapter 4: Alternative Solution Using a Closure

• If you must use var, create an immediately invoked function expression (IIFE) to capture the current value of i.
• Example:

  for (var i = 1; i <= 5; i++) {
      (function(currentValue) {
          setTimeout(() => {
              console.log(currentValue);
          }, currentValue * 1000);
      })(i);
  }
  // Outputs: 1, 2, 3, 4, 5 after 1 to 5 seconds respectively
  

• Explanation: The IIFE creates a new scope and captures the value of i at each iteration.

Conclusion

Understanding how setTimeout interacts with closures is essential for writing effective JavaScript code. By using let or IIFEs, you can avoid common pitfalls and ensure that your code behaves as expected. Continue practicing these concepts to strengthen your understanding of JavaScript closures and prepare for your next interview!