Home »
JavaScript »
JavaScript Examples
JavaScript Closure Inside Loops - A Simple Practical Example
By IncludeHelp Last updated : September 23, 2024
In this article, we will learn how to use JavaScript closure inside loops using a simple practical example. So before proceeding directly with the example let's try to know about the closure first then slowly move towards the example scenario.
What is a JavaScript Closure?
A JavaScript closure is a function that retains access to its lexical scope, allowing it to reference variables from its containing (outer) function even when it is executed outside that scope.
In other words, when you create a function inside another function, the inner function forms a closure. This means it can access variables from its scope, the outer function scope, and even the global scope.
Example
Following is the example of JavaScript closure to use inside the loops:
function outerFunction() {
// Variable in the outer function's scope
let outerVariable = 'Outer';
// Inner function (closure)
function innerFunction() {
// Accessing the outer variable
console.log(outerVariable);
}
// Return the inner function
return innerFunction;
}
// Creating a closure
const myClosure = outerFunction();
// Calling the closure
myClosure();
JavaScript Closure Inside for Loop
You can use the closure inside a for Loop. A for loop in JavaScript is a control structure that allows you to repeat a block of code a specific number of times.
Example
In the following example, we will use the closure within the for loop, which will perform certain operations repeatedly till the for loop is not ended as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Closure Example</title>
</head>
<body>
<p>Example of using closure inside for loop</p>
<script>
function createFunctions() {
const functions = [];
for (let i = 0; i < 5; i++) {
// Creating a closure
functions.push(function() {
document.write(i + " ");
});
}
return functions;
}
const myFunctions = createFunctions();
myFunctions.forEach(func => func());//call each function
</script>
</body>
</html>
Output
Following is the output of the above example:
Example of using closure inside for loop
0 1 2 3 4
JavaScript Closure Inside while Loop
You can use the closure inside a while loop also. A while loop in JavaScript is a control structure that repeatedly executes a code block if a specified condition is true. It's useful when the number of iterations is not known earlier.
Example
The following is another example of using closure inside loops, we will use the closure inside the while loop as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Closure Example</title>
</head>
<body>
<p>Example of using closure inside while loop</p>
<script>
function createCounter() {
let count = 0;
return function() {
count += 1;
document.write(count + " ");
};
}
// Create the counter function
const counter = createCounter();
// Using a while loop to call the counter function multiple times
let i = 0;
while (i <=10) {
counter();
i++;
}
</script>
</body>
</html>
Output
After executing the above program, the following output will be displayed:
Example of using closure inside while loop
1 2 3 4 5 6 7 8 9 10 11