Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What is the difference between closure and nested functions in JavaScript?
In JavaScript, closures and nested functions are related but distinct concepts. A closure occurs when an inner function retains access to variables from its outer function's scope, even after the outer function has finished executing. Nested functions are simply functions defined inside other functions.
JavaScript Closures
A closure is formed when a function "closes over" variables from its lexical scope. The inner function remembers the environment in which it was created, not where it's called.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Closures</title>
</head>
<body>
<h2>JavaScript Closures Example</h2>
<button onclick="demonstrateClosure()">Test Closure</button>
<p id="output"></p>
<script>
function demonstrateClosure() {
var p = 20;
function a() {
var p = 40;
b(function() {
document.getElementById("output").innerHTML = "Closure accesses p = " + p;
});
}
function b(f) {
var p = 60; // This won't affect the closure
f();
}
a();
}
</script>
</body>
</html>
Output: The closure will display "40" because it remembers the variable p from function a's scope, not from function b where it's executed.
JavaScript Nested Functions
Nested functions are simply functions defined inside other functions. They have access to variables in their outer function's scope through lexical scoping.
<!DOCTYPE html>
<html>
<head>
<title>Nested Functions</title>
</head>
<body>
<h2>JavaScript Nested Functions Example</h2>
<button onclick="calculateHypotenuse()">Calculate Hypotenuse</button>
<p id="result"></p>
<script>
function calculateHypotenuse() {
function hypotenuse(a, b) {
function square(x) {
return x * x;
}
return Math.sqrt(square(a) + square(b));
}
var result = hypotenuse(5, 4);
document.getElementById("result").innerHTML = "Hypotenuse: " + result;
}
</script>
</body>
</html>
Output: This will calculate and display "Hypotenuse: 6.4031242374328485"
Key Differences
| Aspect | Closure | Nested Function |
|---|---|---|
| Definition | Function + its lexical environment | Function defined inside another function |
| Memory | Retains outer variables even after outer function returns | Variables are garbage collected when outer function ends |
| Usage | Data privacy, callbacks, modules | Code organization, helper functions |
Practical Example: Closure vs Nested Function
<!DOCTYPE html>
<html>
<body>
<h2>Closure vs Nested Function</h2>
<button onclick="demonstrateDifference()">Show Difference</button>
<div id="demo"></div>
<script>
function demonstrateDifference() {
// Closure example - counter persists
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
let counter = createCounter();
let output = "Closure counter: " + counter() + ", " + counter() + ", " + counter() + "<br>";
// Nested function example - just organization
function calculator(a, b) {
function add() { return a + b; }
function multiply() { return a * b; }
return "Sum: " + add() + ", Product: " + multiply();
}
output += "Nested functions: " + calculator(5, 3);
document.getElementById("demo").innerHTML = output;
}
</script>
</body>
</html>
Conclusion
While all closures involve nested functions, not all nested functions create meaningful closures. Closures are powerful for creating private variables and maintaining state, while nested functions primarily help with code organization and scoping.
1K+ Views
