Closures in JavaScript
Understanding JavaScript();
hey, JS devs! We hear this crazy term “closure”, daily right? and what if I say we also use it very often?
okay…., Wait what 🙁? do we use it daily? how, and where? I know there are many like me ✋ getting socked, so let’s understand it together.
Nobody knows, everyone learns
a lot of questions, right? so let’s start this story with a small definition of closure.
What is the closure?
according to MDN docs
A closure is a combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.
in simple terms, closure is a function with its lexical environment.
yes yes, I know it's still a bit tricky to understand, okay let’s make it more simple by understanding a scope first.
what is a scope?
the scope refers to the area of the function, in which it can access the variables and the statements.
printName is a function and all the console log statements can be accessed by the function as those statements reside insde the function.
- you might be wondering if age is written outside the function scope but still it is accessed in the function, how? 😕
are you lying to us? you would be like “this is why I have trust issues 😞” - ok ok, relax I am not lying. the function can access the statements written outside the function if those statements reside inside the function's parent scope.
- but the outer scope can not access the variables of the inner scope, getting confused?
- the scope can be: Local scope of Global scope
- Global scope: means global space or a public space, outside the function.
- Local scope: means a local region or a restricted region, inside the function.
- so the variable name is inside the scope of the function printName and if we try to access the variable name outside the scope of the function it gives the error: Uncaught ReferenceError: name is not defined.
coming back to closures, the function accessing the variables/values from its parent scope (parent function or global scope), this concept is known as a closure.
- the printer is a parent function of printDetails, so the function printDetails can access all the variables/values from its parent function scope, and that is what closure is.
- you guys would be like seriously 😳, yes yes, I am serious, this is what closure is.
- the closure is a function bundled with its lexical environment.
- another example of closure.
- when the above program was paused to line 4, the debugger says it was a value from a closure. what does that mean?
- so the function b() is having its lexical scope to its parent function a() and the variable x is a part of the lexical scope of the function b()
- so any variable present in the lexical scope of a function can be accessed by a function.
- when you return a function in js, you not only return the function, but you return the function with its lexical scope.
- it remembers the lexical scope of the function and when the function is executed it takes the values from that lexical scope.
as stated here there are nested functions, joinFirstAndLastNameAndAddAge is a function nested in namePrinter and namePrinter is again a function nested in the main function named printer.
talking about the scope here, we can see the innermost function is having all the operational statements (printing all data in our case) but how it is accessing the variables from the outer function?
the innermost function can access the variables from the parent scope(two outer functions in our case). joinFirstAndLastNameAndAddAge function can access the variables from the namePrinter function. But if the namePrinter function wants to access the variables from the innermost function joinFirstAndLastNameAndAddAge as it lies outside the scope of the joinFirstAndLastNameAndAddAge function.
this is the magic of javascript.
