🔐 What is Closure in JavaScript? ? Explained with Simple Examples

-
What is closure in JavaScript

In JavaScript, a closure is created when a function "remembers" the variables from its outer scope even after the outer function has finished executing. This concept allows functions to access variables from an enclosing scope or function — even after that outer function has returned.

Closures are a powerful feature in JavaScript that enable data encapsulation, callback handling, and the creation of private variables.

💡 Let's Understand with an Example


function outerFunction() {
  let outerVariable = "I am from outer scope!";

  function innerFunction() {
    console.log(outerVariable); // Accessing variable from outer scope
  }

  return innerFunction;
}

const closureFunc = outerFunction();
closureFunc(); // Output: I am from outer scope!

🔍 Explanation:

  • outerFunction defines a variable outerVariable.
  • innerFunction is declared inside outerFunction and uses that variable.
  • Even after outerFunction() has finished executing, innerFunction() can still access outerVariable.
  • This is closure in action.

📦 Why Use Closures?

Closures are used to:

  • ✅ Preserve Data between function calls.
  • 🔐 Create private variables in JavaScript.
  • 🧠 Maintain state in asynchronous operations (e.g., setTimeout).
  • 🎯 Implement factory functions that produce custom behavior.

🧪 Real-World Use Case: Counter Function


function createCounter() {
  let count = 0;

  return function() {
    count++;
    console.log(count);
  };
}

const counter1 = createCounter();
counter1(); // 1
counter1(); // 2

const counter2 = createCounter();
counter2(); // 1

🔍 Each counter maintains its own separate copy of count due to closures.

🧠 Key Points to Remember

  • A closure gives you access to an outer function’s variables even after the outer function has returned.
  • Closures help emulate private variables in JavaScript.
  • Closures are created every time a function is created, at function creation time.

🎯 Conclusion

Closures in JavaScript may seem tricky at first, but they are essential for writing modular, maintainable, and efficient code. Understanding closures will help you master more advanced concepts like callbacks, currying, and function factories.

🖱️ Explore this powerful concept in your code today and see the magic of closures in action!

🔗 Read more tutorials like this at:

🌐 webcodingwithankur.blogspot.com

Comments

Post a Comment

Popular posts from this blog

🚀 “JavaScript Debounce Made Simple + Live Example!”

-
Image
🧠 Debounce in JavaScript — Explained Simply! Have you ever noticed a search box firing too many requests as you type? Or a button that triggers a function multiple times when clicked repeatedly? That’s where Debounce becomes your best friend! 🚀 What is Debounce? Debounce is a programming pattern used to limit the rate at which a function is executed. It ensures that a function runs only once after a specific delay , and only if the event hasn’t occurred again during that delay. "Debounce waits… and if no new event happens during that wait, it triggers the function!" 🛠 Why Do We Need Debounce? Without debounce, continuous user actions like: Typing in a search input Resizing the window Scrolling the page …can flood your application with function calls, degrading performance and user experience. ✅ With debounce: Smooth performance Controlled API calls Reduced CPU load 📦 Real-Life Example: Search Bar <input type=...
Read more

What is Hoisting in JavaScript? 🔄 Explained with Example

-
Image
📌 What is Hoisting in JavaScript? In this post, we’ll understand one of the most commonly asked JavaScript interview questions: What is Hoisting? I’ve also added a video below that explains hoisting visually. 👇 🔍 What is Hoisting? Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. 🧠 Think of it like this: Even if you declare your variables or functions at the bottom of the file, JavaScript will act as if they were declared at the top — but only the declarations, not initializations. 📂 Example 1: Variable Hoisting console.log(x); // undefined var x = 10; 🔎 Explanation: The declaration var x is hoisted to the top, but the assignment = 10 is not. So x exists but is undefined at the time of the console.log . ⚠️ Let’s Try with let or const console.log(y); // ReferenceError let y = 20; Note: Variables declared with let and const are also hoisted but are not initi...
Read more

🧩 Event Delegation in JavaScript – Write Cleaner, More Efficient Code

-
Image
When building modern web applications, adding event listeners to multiple DOM elements can quickly become a hassle — and impact performance. But what if you could use just one event listener to control many elements? That’s the power of Event Delegation in JavaScript! 🔍 What is Event Delegation? Event Delegation is a JavaScript technique where a single event listener is attached to a parent element , and events from child elements are caught during the bubbling phase . Instead of assigning handlers to each item individually, you delegate the event to the parent, checking the event’s target to determine what was clicked or interacted with. 🌟 Benefits of Using Event Delegation ✅ Better Performance 📉 Reduce memory usage by attaching fewer event listeners. ✅ Simplified Code 🧹 Cleaner, more maintainable code by avoiding repetition. ✅ Dynamic Element Handling ⚙️ Easily manage elements added to the DOM after the initial page load. ✅ Improved Scalability 📈...
Read more