Scopes And Closures Re-Explained: Part 2
Welcome back to Confusion: Part 2. I mean Scopes & Closures: Part 2. If you missed the first part where I talked about scopes, you can find it here.
In this part, I will be going over closures! Closures can be a scary and intimidating topic. Just look blow at how MDN defines it:
A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).
In this article I will breakdown the concept with some examples. Closure is such an important concept that we as developers use it everyday in our code whether we know it or not!
Closure Definition Simplified
An closure has three scopes:
- Local Scope — Access to its own variables.
- Parent Function Scope — Access to variables with the outer function.
- Global Scope — Access to global variables.
Let’s Take a Closer Look
Here is a simple example.
Here we have an parent function that contains the variable
name which has been defined. It also creates an inner function.
The inner function has a local variable
greeting . The inner function can access the variable in the parent function which is why it is able to output it in the console.
In line 12, the outer function is invoked for the first time. Lets see what is happening here starting at the top:
namevariable is created and its value is “Selene”.
- The inner function is declared and returned in line 5.
- The content of the inner function is stored in the variable
- After it is stored, the outer function finishes execution and its scope no longer exists. (Local variables only exist for the duration of its function). Once a function returns, any local variables are deleted.
- However, when greet is invoked, the name variable is still accessible and still used. This is why our output is “Hello Selene”.
How? Closures! The inner function is created when the outer function is invoked. At this point a closure is formed.
Lets go back to MDN’s definition.
A closure is the combination of a function and its lexical environment, or references to its surrounding state.
When the inner function is created, it holds a reference to its parents lexical environment in which the
name variable exists. It “remembers” the environment in which it was created which will included any local variables that are considered in scope.
And that is the power of closures!