Course Overview

Overview of history of the JavaScript language

History of JavaScript

Overview of the relationship between JavaScript and Java

JavaScript vs Java

Overview of how JavaScript is evolved as a programming language

How is it evolved?

Overview of how we can track upcoming features in the JavaScript language

How to track upcoming features?

Overview of how the ECMAScript is versioned

How is ECMAScript versioned?

Explanation of whether JavaScript is interpreted or a compiled language

Is it interpreted or compiled?

Explanation of how JavaScript is executed

How is it executed?

Execution Context

Explanation of what is a callstack and how it is used in JavaScript

Callstack

Overview of memory management in JavaScript

Memory

What is JavaScript

What is hoisting?

Explanation of common misconception about hoisting in JavaScript

Misconception about hoisting

Hoisting

What is scope?

Explanation of global scope in JavaScript

Global scope

Explanation of function scope in JavaScript

Function scope

Block scope

Explanation of module scope in JavaScript

Module scope

Scope chain

Scope

What is coercion?

Diving into inner details of  coercion in JavaScript

Deeper look at coercion

Explanation of what abstract operations are and common types of abstract operations in JavaScript

Abstract operations

Explanation of how abstract or loose equality works in JavaScript

Abstract equality operator

Explanation of how the addition operator works in JavaScript

Addition operator

Explanation of how relational operators work in JavaScript

Relational operators

Coercion exercise for testing and practicing the knowledge learned in this module

Coercion exercise

Coercion

What is a closure?

Explanation of a common misconception about closures in JavaScript

Misconception about closures

Explanation of the problem of closures inside loops and how to fix it

Closures inside loops

Explanation of closures can be used to hide data

Data hiding using closures

Closures

What is prototypal inheritance?

Prototype chain

__proto__ property

Explanation of how we can create objects with custom prototypes in JavaScript

Custom prototypes

Explanation of how prototype chain is set with ES6 classes

ES6 classes and prototypes

Prototypes

Explanation of this keyword in JavaScript

What is this?

Explanation of how "this" works inside arrow functions

Arrow functions and "this"

Explanation of how value of "this" can be set explicitly

Explicitly binding "this"

globalThis

Summarizing "this"

'this' keyword

What is a symbol?

Explanation of why symbols were added in JavaScript

Why symbols?

Symbols and privacy

Explanation of global symbols in JavaScript

Global symbols

Explanation of what well-known symbols are in JavaScript

Well-known symbols

Symbol

Overview of asynchronous behavior of JavaScript

Overview

Overview of how callbacks help us write asynchronous code in JavaScript

Callbacks

Event loop

Promise

Explanation of promise chaining in JavaScript

Promise chaining

Explanation of some static methods of promises and their use cases

Use cases for static Promise methods

Explanation of async-await syntax in JavaScript

async await

Explanation of microtasks, how they are processed, and how they are linked to promises

Microtasks

Explanation of common anti-patterns to avoid when using promises in JavaScript

Promise anti-patterns

Asynchronous JavaScript

Explanation of what is an iterator in JavaScript

Iterators

Explanation of what is a generator in JavaScript

Generators

Explanation of how we can create asynchronous iterators in JavaScript

Asynchronous iterators

Explanation of how we can create asynchronous generators in JavaScript

Asynchronous generators

Iterators and Generators

Overview of what is debugging and different ways to debug JavaScript

Debugging

Overview of using the "debugger" statement to debug JavaScript

Debugger statement

Overview of using the breakpoints in browser developers' tools to debug JavaScript

Breakpoints in browser

Overview of using the VS Code debugger to debug JavaScript

VS Code debugger

Debugging JavaScript

Final thoughts and advice regarding how to continue the exciting journey of learning JavaScript

Conclusion

Wrap up

Enter your name and email address below, then click the **"Send my free chapter"** button to get started

300+ page PDF

EPub

newline Access with Replits

All Code Samples

Discord Community Access

One-time price of $69

Become a confident JavaScript pro by unraveling the most challenging aspects of the language. With easy-to-understand explanations and code examples, you’ll gain a deeper and solid understanding of JavaScript's most complex features.

Advanced JavaScript Unleashed is for beginner and intermediate developers alike, who want to elevate their JavaScript skills and become senior engineers by gaining a deeper understanding of the core topics of the language.

Advanced JavaScript Unleashed

What output do you expect from the following code example?

for (var i = 1; i <= 3; i++) {
  setTimeout(() => {
    console.log(i);
  }, 1000);
}

Although the above output seems reasonable, it is not the output we get from the code example above. The actual output is as shown below:

Here is the output of the code example above in a Replit:

If this output surprised you, then this lesson is for you. Even if it didn't, do you understand the reasons behind this output? In this lesson, we will explore what causes this problem, also known as the "

The code example above suffers from this infamous "closures in loop" problem because the callback function of each 

. As there are a total of three loop iterations in our example, 

 is called three times, so we have three callback functions, all having a closure over the 

 the loop execution has completed. The value of variable 

 after the last iteration of the loop is "4", and because each callback function of the "setTimeout" has a closure over the 

, all three of them see "4" as the value of the 

. This is the reason they all log "4" on the console.

The scope linkage for the code example above can be visualized in the image below:

It is important to note that functions form closures over variables, not their values. Closure over variables implies that each function logs the 

 value of the variable it has closed over; if functions formed closure over values rather than variables, they would log the snapshot of the value in effect when the closure was formed.

In our example, if the closure was over the values of 

 variable, then each callback would have logged the value of 

 that was in effect in the iteration in which that callback was created. This means we would have gotten the expected output, i.e., 

. But as is evident from the output of the code example, closures are formed over variables. As a result, each callback function of 

, and when each callback is executed, it sees the latest value of 

Now that we understand what the "closures in loop" problem is and what causes it let us discuss how this problem was tackled before ES2015.

---
title: Closures inside loops
description: Explanation of the problem of closures inside loops and how to fix it
isPublicLesson: false
useMdx: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/advanced-javascript-unleashed-app/-/tree/main/module_05/lesson_05.03
---

What output do you expect from the following code example?

```js
for (var i = 1; i <= 3; i++) {
  setTimeout(() => {
    console.log(i);
  }, 1000);
}
```

You might expect the following output:

```js
1;
2;
3;
```

Although the above output seems reasonable, it is not the output we get from the code example above. The actual output is as shown below:

```js
4;
4;
4;
```

Here is the output of the code example above in a Replit:

<ReplitEmbed src="https://replit.com/@newlineauthors/closures-in-loops-example1"/>

If this output surprised you, then this lesson is for you. Even if it didn't, do you understand the reasons behind this output? In this lesson, we will explore what causes this problem, also known as the "**closures in loop**" problem, and how we can fix it.

## What causes this problem?

The code example above suffers from this infamous "closures in loop" problem because the callback function of each `setTimeout` forms a closure over the _same_ variable `i`. As there are a total of three loop iterations in our example, `setTimeout` is called three times, so we have three callback functions, all having a closure over the _same_ variable `i`.

The callback function of each `setTimeout` call is invoked _after_ the loop execution has completed. The value of variable `i` after the last iteration of the loop is "4", and because each callback function of the "setTimeout" has a closure over the _same_ variable `i`, all three of them see "4" as the value of the `i`. This is the reason they all log "4" on the console.

The scope linkage for the code example above can be visualized in the image below:

![scope linkage](https://d2uusema5elisf.cloudfront.net/courses/advanced-javascript-unleashed/module_05/lesson_05.03/public/assets/closure-in-loop-problem.png)

It is important to note that functions form closures over variables, not their values. Closure over variables implies that each function logs the _latest_ value of the variable it has closed over; if functions formed closure over values rather than variables, they would log the snapshot of the value in effect when the closure was formed.

In our example, if the closure was over the values of `i` instead of the `i` variable, then each callback would have logged the value of `i` that was in effect in the iteration in which that callback was created. This means we would have gotten the expected output, i.e., `1 2 3` instead of `4 4 4`. But as is evident from the output of the code example, closures are formed over variables. As a result, each callback function of `setTimeout` has a closure over the variable `i`, and when each callback is executed, it sees the latest value of `i`.

## How to resolve this problem?

Now that we understand what the "closures in loop" problem is and what causes it let us discuss how this problem was tackled before ES2015.

### Pre-ES2015 solution

Before the introduction of ES2015, also known as ES6, one way to solve this problem was to use an [IIFE (Immediately Invoked Function Expression)](https://developer.mozilla.org/en-US/docs/Glossary/IIFE). The following code example shows how using an IIFE resolves this problem.

```js
for (var i = 1; i <= 3; i++) {
  ((counter) => {
    setTimeout(() => {
      console.log(counter);
    }, 1000);
  })(i);
}

/* output
---------
1
2
3
---------
*/
```

Here is the output of the code example above in a Replit:

<ReplitEmbed src="https://replit.com/@newlineauthors/closures-in-loops-example2"/>

How does the use of an IIFE solve this problem?

Recall that the problem is caused by the closure of different callbacks over the _same_ variable. But with the use of an IIFE, we can pass the value of `i` in each iteration to the IIFE as a parameter. This parameter (`counter`) is then used inside the callback function of the `setTimeout` function. This solves the problem because the `counter` parameter is closed over by each callback function, and in each iteration, a new IIFE is created, along with the new callback function of `setTimeout`. Each new instance of the IIFE gets passed a new value of `i`, i.e., "1" in the first iteration, "2" in the second iteration, and so on. So now, with the use of an IIFE, each callback function has a closure over a different `counter` variable.