As a beginner in the world of JavaScript, you might have heard a lot about closures - those mysterious and somewhat intimidating creatures that seem to lurk in the shadows of your code. You might have heard stories of developers pulling their hair out, spending hours upon hours trying to debug an issue caused by a closure. But fear not, my friend, for closures are not as scary as they may seem!
In fact, closures are one of the most powerful features of JavaScript, allowing us to create functions that can retain access to variables that are defined outside of their own scope. This means that we can create functions that can access and manipulate variables from a higher scope, even after that higher scope has been closed.
Think of it like a treasure chest - once you close the lid, you might think that the treasure inside is out of reach. But with closures, you can create a secret key that allows you to open the chest and access the treasure even after it's been closed. Pretty cool, right?
Now, don't get me wrong - closures can be a bit tricky to wrap your head around at first. But once you understand how they work, you'll be able to create more powerful and flexible functions in your JavaScript code. So don't be afraid to dive in and explore the world of closures - who knows what kind of treasure you might find!
Before diving deep into closure let's understand what is lexical scope and how it relates to closures.
Lexical Scope :
Lexical scope is the set of rules that determines how a variable is accessed within a program. In JavaScript, when a function is defined, it creates its own scope, which is known as the local scope. This local scope contains all of the variables and functions that are defined within that function.
Let's see a code example of what the lexical scope of a variable looks like.
Now you have some idea about the lexical scope let's deep dive into the closure world.
Closures :
What the hell is a closure? The answer is very simple, function with its lexical scope forms a closure.
Let's see a simple code example to understand the concept of closure better.
Take a deep breath and look at the code. What will be the output? Does the code throw an error that the variable is not found? Let me break that bubble for you. The output will be hello world printed on the console. Pretty annoying right? No that's the beauty of javascript closures and you can utilize this pattern to write powerful functional programming code.
Let me show a real-life example to understand it better.
How we will look for room 5? We will go to the ground floor we will not find room 5 then we will go to the 1st floor we will not find room 5 then we will go to the 2nd floor where we will find room 5.
Let's map this on the code example :
The output will be room5 printing on the console.
How it's working ?
The room service function is looking for the room5 variable. It will start looking at its current local scope (roomService function) if the variable is not found it will jump to the parent scope (groundFloor function) if the variable is not found it will jump to one level more parent scope (firstFloor function) if the variable is not found it will jump to one level more parent scope (scopeBuilding function) where it will find the room5 variable.
Now you have a clear understanding of how closures work behind the scenes let's look at some advanced patterns of closures that you will see in the code that you have written but maybe don't know about it.
Let's look at a code example:
If you see the code I created a function adder which is returning another function which is utilizing the value of adder function and adding that value to whatever value is passed to that function. I called the function adder with 2 and store the returned value of the adder function which is also a function into a variable called twoAdder. When I called the twoAdder function with 5 value the output printed on the console is 7 but why is that? Because the twoAdder function is creating a closure and holds the lexical scope of its parent function even after its execution is ended. Same case with the fiverAdder function.
Now you have a pretty good understanding of how closures are created and how it works now you can use and point out this pattern in your code pretty easily.
Previous Article :
https://dev.to/hariszulfiqar054/javascript-hoisting-behind-the-scenes-5b6j
Top comments (0)