Lets understand javascript closure closely :
A JavaScript closure is a function that remembers and can access variables from its parent function's scope, even after the parent function has finished executing.
Not enough right ?
Lets understand what this definition says and how things worked behind the scene !
Imagine you have a "container" (a function) that contains some stuff (variables). Now, this container can do two special things:
Hold on to Stuff: Even after you're supposed to be done with the container (the function has finished running), it can keep a hold of some things inside it, like a little secret.
Use Those Secrets Later: Not only can it keep these secrets, but it can also use them when needed, like a magic container that remembers and uses its tricks even when it's closed.
So, a closure in JavaScript is like this magic container. It's a function that remembers and uses things from the environment (like variables) where it was created, even after that environment is gone.
Lets have an example :
function outerFunction() {
let secret = "I'm a secret"; // This is the secret inside the container
function innerFunction() {
console.log(secret); // This inner function can still access the secret
}
return innerFunction; // We give you the magic container (the inner function)
}
const magicBox = outerFunction(); // Now, you have the magic container in your hand
magicBox(); // When you open the magic box, it reveals the secret: "I'm a secret"
Here is code execution detail:
outerFunction creates a little secret (secret variable) and gives you the innerFunction (the magic container) that can still access and use that secret, even after outerFunction has finished running.
When you call magicBox(), it still knows about the secret and can reveal it.
Now the next question is where and how js closure reference is stored...and how it looks like ?
JavaScript closures store references to their lexical environments (which include variables and their values) in a data structure called the "Lexical Environment" or "Lexical Environment Record." This data structure is typically implemented as a stack or chain of objects.
Here's a simplified conceptual representation:
Closure:

• Function (inner function)
• Lexical Environment (references to variables in the outer function's scope)
  In practice, JavaScript engines manage the closure's internal references and lexical environment, but you don't typically interact with these details directly. You simply work with closures as functions that can access variables from their parent's scope, creating powerful and flexible code structures.
  some common usage of closure :

1. React useState hook (it has the reference of updated state)
   2.Memoization
2. maintaining private variable
   I'd love your support! If you found my post helpful or informative, please consider giving it a 'Like' and sharing it .

frontenddevelopment #javascript #ui #javascriptlearning #closure