Scope and closures are fundamental concepts in JavaScript that control how variables are accessed and how functions interact with their surrounding environment. Understanding these concepts is essential for writing clean, efficient, and bug free code.<\/p>\n\n\n\n
Scope determines where variables can be accessed in a program. It defines the visibility and lifetime of variables.<\/p>\n\n\n\n
Global Scope
Variables declared outside any function or block are in the global scope and can be accessed anywhere in the code.<\/p>\n\n\n\n
Function Scope
Variables declared inside a function are only accessible within that function.<\/p>\n\n\n\n
Block Scope
Variables declared using let and const inside a block such as loops or conditionals are limited to that block.<\/p>\n\n\n\n
let globalVar = \"I am global\";
function testScope() {
let functionVar = \"I am inside function\";
if (true) {
let blockVar = \"I am inside block\";
console.log(globalVar);
console.log(functionVar);
console.log(blockVar);
}
\/\/ console.log(blockVar); This will cause an error
}
testScope();<\/code><\/pre>\n\n\n\nWhat is Closure<\/h3>\n\n\n\n
A closure is created when a function remembers variables from its outer scope even after the outer function has finished executing.<\/p>\n\n\n\n
Closures allow functions to access and preserve data in a controlled way.<\/p>\n\n\n\n
Example of Closure<\/h3>\n\n\n\nfunction outerFunction() {
let count = 0;
return function innerFunction() {
count++;
console.log(count);
};
}
const counter = outerFunction();
counter();
counter();
counter();<\/code><\/pre>\n\n\n\nHow Closures Work<\/h3>\n\n\n\n
When the outer function runs, it creates a local variable. The inner function keeps a reference to that variable even after the outer function has completed. This allows the inner function to use and update the variable later.<\/p>\n\n\n\n
Benefits of Closures<\/h3>\n\n\n\n
Data privacy and encapsulation
Helps create reusable functions
Useful in event handlers and callbacks
Maintains state in asynchronous programming<\/p>\n\n\n\n
Real World Use Case<\/h3>\n\n\n\n
Closures are commonly used in counters, timers, and maintaining state in applications without exposing variables globally.<\/p>\n\n\n\n
Conclusion<\/h3>\n\n\n\n
Scope and closures are powerful features of JavaScript that help manage variable access and maintain data. Mastering them improves code structure, readability, and performance.<\/p>\n\n\n