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

Image
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, innerFunc...
Post a Comment

About Us

Hi! I'm Ankur Saini, a passionate web developer and content creator. I started "Web Coding with Ankur" to share everything I learn about building modern websites and applications using technologies like React, JavaScript, Node.js, and more.

My mission is to make web development simple, engaging, and accessible to everyone—whether you're just starting or brushing up your skills.

Feel free to connect with me on:

© 2025 Web Coding with Ankur

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