Examples of Javascript closures in action with a for loop

Question

Examples of Javascript closures in action with a for loop

I decided to stop my research here. Below is the question I have:

After reading this post, I grasped the concept illustrated by the code snippet provided.

var funcs = {};
for (var i = 0; i < 3; i++) {          // creating 3 functions
funcs[i] = function() {            // storing them in funcs
    var item = "item" + i;         // internally
    console.log("item: " + item + ", i: " + i); // each should log its value.
    };
}
for (var j = 0; j < 3; j++) {
    funcs[j]();                        // running each function to see the output
}

Result:
item: item3, i: 3
item: item3, i: 3
item: item3, i: 3

However, I noticed that if I move var item = "item" + i outside of the function(), it leads to a different result. Can someone explain why this happens?

var funcs = {};
for (var i = 0; i < 3; i++) {          // creating 3 functions
    var item = "item" + i;             // externally
    funcs[i] = function() {            // storing them in funcs
        console.log("item: " + item + ", i: " + i); // each should log its value.
    };
}
for (var j = 0; j < 3; j++) {
    funcs[j]();                        // running each function to see the output
}

Result:
item: item2, i: 3
item: item2, i: 3
item: item2, i: 3

javascript closures

Answer 1

Answer №1

You are currently encountering an issue where closures capture variables by reference, rather than by value. For instance:

var i = 0;
var f = function(){ i++; console.log(i); }
var g = function(){ i++; console.log(i); }
f(); g(); f(); g();

This code will output 1, 2, 3, 4 because both f and g are mutating the same variable i, as they capture the variable itself, not its value.

A common mistake is creating multiple closures in a loop without realizing that they all capture the same variable used within the loop. This results in all previously created closures reflecting changes made to the loop variable. For example:

for (var i = 0; i < 3; i++) {
    funcs[i] = function() {
        var item = "item" + i; // inside
        console.log("item: " + item + ", i: " + i);
    };
}

When you set i = 42; and call the functions, they will all display 42, and similarly with i = 99;. This happens because i is shared among all closures.

In your second scenario, if you define item outside the closure as well, it also becomes shared across all functions.

To resolve this issue and have each closure use its own index value, you can implement a pattern like:

var f = (function(i){return function(){ ... };})(i);

This technique creates separate variables for each iteration of the loop by passing them as parameters to an outer function.

Updating your code to:

for (var i = 0; i < 3; i++) {
    funcs[i] = (function(i){return function() {
        var item = "item" + i;
        console.log("item: " + item + ", i: " + i);
    };})(i);
}

will ensure each function has its own unique i value.

EDIT

In modern Javascript, you can use let variables which are block-scoped instead of function-scoped like var.

This allows for simpler code implementation such as:

lambdas = [];
for (let i=0; i<10; i++) {
    let j = i*i; // Variable j is block scoped
    lambdas.push(function(){ return j; });
}
console.log(lambdas[3]()); // ==> output 9
console.log(lambdas[5]()); // ==> output 25

(Using var j = i*i; would result in both outputs being 81)

Answer 2

You are currently encountering an issue where closures capture variables by reference, rather than by value. For instance:

var i = 0;
var f = function(){ i++; console.log(i); }
var g = function(){ i++; console.log(i); }
f(); g(); f(); g();

This code will output 1, 2, 3, 4 because both f and g are mutating the same variable i, as they capture the variable itself, not its value.

A common mistake is creating multiple closures in a loop without realizing that they all capture the same variable used within the loop. This results in all previously created closures reflecting changes made to the loop variable. For example:

for (var i = 0; i < 3; i++) {
    funcs[i] = function() {
        var item = "item" + i; // inside
        console.log("item: " + item + ", i: " + i);
    };
}

When you set i = 42; and call the functions, they will all display 42, and similarly with i = 99;. This happens because i is shared among all closures.

In your second scenario, if you define item outside the closure as well, it also becomes shared across all functions.

To resolve this issue and have each closure use its own index value, you can implement a pattern like:

var f = (function(i){return function(){ ... };})(i);

This technique creates separate variables for each iteration of the loop by passing them as parameters to an outer function.

Updating your code to:

for (var i = 0; i < 3; i++) {
    funcs[i] = (function(i){return function() {
        var item = "item" + i;
        console.log("item: " + item + ", i: " + i);
    };})(i);
}

will ensure each function has its own unique i value.

EDIT

In modern Javascript, you can use let variables which are block-scoped instead of function-scoped like var.

This allows for simpler code implementation such as:

lambdas = [];
for (let i=0; i<10; i++) {
    let j = i*i; // Variable j is block scoped
    lambdas.push(function(){ return j; });
}
console.log(lambdas[3]()); // ==> output 9
console.log(lambdas[5]()); // ==> output 25

(Using var j = i*i; would result in both outputs being 81)

Answer 3

Answer №2

In the initial situation, the item variable is created when the function runs and is local to each function thereafter. It is assigned a value of "item" + i, where i equals 3 due to its declaration at the outer scope during the loop's termination.

Conversely, in the latter scenario, the item variable persists within the scope of the functions - sharing this scope with i - and is set as "item2" on the last iteration of the first loop. Throughout this loop, i progresses through the values 0, 1, 2; only becoming 3 upon the loop's conclusion.

Answer 4

In the initial situation, the item variable is created when the function runs and is local to each function thereafter. It is assigned a value of "item" + i, where i equals 3 due to its declaration at the outer scope during the loop's termination.

Conversely, in the latter scenario, the item variable persists within the scope of the functions - sharing this scope with i - and is set as "item2" on the last iteration of the first loop. Throughout this loop, i progresses through the values 0, 1, 2; only becoming 3 upon the loop's conclusion.

Examples of Javascript closures in action with a for loop

Answer №1

EDIT

Answer №2

Similar questions

Tips for creating a countdown timer from scratch without relying on a plugin

Variable missing in the ExpressJs view

Angular utilizing external parameter for Ajax requests

Comparing XDomainRequest and XMLHTTPRequest - which one to choose

Using AngularJS to access form field ids that are generated dynamically

Is there a way for me to gain entry to this array in vuejs?

Tips for customizing the border radius style of the menu in Vuetify's v-autocomplete component

Perform an Ajax request with JQuery in an HTML document and transfer the response to a different HTML page

Obtain the index of a selected option in a Select Tag using Node.js/Express

Failed verification of C-Lang in React-Hardware/Particle

Showing JSX/HTML content depending on the props received

Setting up an i18n project in AngularJS

Steps to retrieve values from a grid and execute a sum operation using PROTRACTOR

React component that enables radio inputs to repeat upon selection

What is the reason for the lack of user data being saved in studio3t?

Changing focus to 'DIV' element without JQuery using Javascript and Angular's ng-click event

Trigger a re-render of specific components upon clicking a button in React

Utilizing HTML5 Canvas for Shadow Effects with Gradients

Encountering a Node Js post handling error with the message "Cannot GET /url

Ways to extract link value in Angular