Introduction
In this tutorial, you will learn the concept of Scope and Closure in JavaScript.
In JavaScript, Scope and Closure are important concepts. Scope determines where a variable can be accessed in the code. It controls the visibility of variables inside functions, blocks, or globally.
A Closure occurs when a function remembers and accesses variables from its outer scope even after the outer function has finished executing.
If developers understand the difference between scope and closure, they can write cleaner code, manage variables properly, and avoid unexpected bugs in JavaScript applications.
What is Scope in JavaScript?
Scope is used to control the visibility of variables inside functions, the scope and the global.
Note: Scope determines where variables can be accessed in a program.
Example:
let name = "John"; // Global scope
function greet() {
let message = "Hello"; // Function scope
console.log(message + " " + name);
}
greet();
Explanation:
name → You can access name everywhere (global scope).
message → You can access only inside the function.
Types of Scope
There are three types of Scope
1. Global Scope
2. Function Scope
3. Block Scope
2. What is Closure in JavaScript?
Closures allow functions to access variables from their parent scope.
function outer() {
let count = 0;
return function inner() {
count++;
console.log(count);
};
}
const counter = outer();
counter(); // 1
counter(); // 2
Explanation:
1. inner() remembers the count variable.
2. Even after outer() finishes, the count is still accessible.
Common Mistakes with Closures
Example:
for (var i = 1; i <= 3; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
Output:
4
4
Explanation:
var is function scoped, all callbacks share the same variable.
Fix the above program:
for (let i = 1; i <= 3; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
Output:
2
3
Scope vs Closure
| Feature | Scope | Closure |
|---|---|---|
| Definition | Determines where variables can be accessed | Function remembering variables from outer scope |
| Purpose | Controls variable visibility | Preserves variable state |
| Lifetime | Exists while scope is active | Exists as long as closure exists |
| Usage | Used in every JavaScript program | Used for data privacy and callbacks |
| Example | Global, Function, Block scope | Functions returning functions |
Real Life Example of Scope vs Closure
Suppose a bank application stores a user's balance privately so that it cannot be directly modified from outside the system.
function createBankAccount() {
let balance = 1000; // Local variable (scope)
return function deposit(amount) {
balance += amount;
console.log("Current Balance:", balance);
};
}
const myAccount = createBankAccount();
myAccount(1500); // Current Balance: 2500
myAccount(1200); // Current Balance: 2700
Explanation:
Scope
- The variable balance is declared inside createBankAccount().
- It cannot be accessed directly outside this function.
Closure
- The inner function deposit() remembers the variable balance.
- Even after createBankAccount() finishes executing, deposit() can still access and update the balance.
Interview Questions
Q 1: What is Scope in JavaScript?
Q 2: What is a Closure in JavaScript?
Q 3: Does every function create a Closure?
Q 4: Can Closures cause memory issues?
Q 5: Why are Closures useful in JavaScript?
Create private variables
Maintain state
Build data encapsulation
Conclusion
Scope controls where variables can be accessed, while closures allow functions to remember variables from their outer scope even after the outer function has executed.
Closures are widely used in JavaScript for data privacy, callbacks, event handling, and functional programming patterns. By understanding how scope and closures work together, developers can write more efficient, secure, and maintainable code.