Closures work around the concept of a scope. So, first let's see more on how scope works.
What is Scope?
A scope basically refers to the current context, which determines the accessibility of variables in a program. Every function call creates a new scope. When the function has finished the execution, the scope is usually destroyed.
There are two types of scope global and local. Let's have a look at the below example to understand nested functions and scope.
- Function three will have access to the variables declared in function two and one.
- Function two will have access to the variables declared in function one.
But as functions cannot access the variables declared in it's child/inner functions
- function two cannot access variable of function three
- function one cannot access the variables of both two and three.
When function one is invoked a new scope is created and same is done when function two and three are invoked. once function three has completed its execution its scope will be destroyed, and control will return to function two. once two is done with its execution its scope will also be destroyed and control will be back to function one and the scope of one is destroyed when function one returns a value to variable plate.
The same can be explained with the help of below illustration.
Now that we are good with scopes, let's dive right into Closures.
To understand how closure works, let's consider the following example:
In this example, outerFunction creates a variable called outerNumber and then defines an inner function called innerFunction, which simply returns innerNumber + outerNumber. The outer function then returns the inner function.
When we call outerFunction, it returns the innerFunction, which we store in innerFunc variable. We can then call innerFunc as a regular function, even though it's no longer inside the outerFunction (we are calling it outside of the outerFunction).
When we invoked innerFunc which ultimately invoked innerFunction a closure is formed as seen in the image below. This proves that innerFunc was able to access the outerNumber variable from the outer function because of the closure that is formed.
Bonus! let's consider one more example.
In the above code, we can see calculateAge (child function) is invoked from getDescription (parent function). Once calculateAge is invoked we can see in the below image a closure is formed with function getDescription and variable birthDate.
The Benefits of Using Closure
Closures maintain their lexical scope
In the above code snippet when we call that returned function, we can see there was no error as it still had access to const birthDate and logs 17 in the console. That is because after the execution of getInfo is done, its scope is not destroyed in this case.
Creating private variables
Closures help us create private variables which can help to protect sensitive data and prevent other parts of your code from modifying or accessing it.
Closure can help improve the performance of your code by reducing the number of global variables and functions that need to be created.
The fundamental React Hooks: A Comprehensive Guide to useState and useEffect
Discover the immense potential of React Hooks as we delve into the fundamental hooks, useState and useEffect.
How to conditionally render in React Functional Components | ReactJs Interview Questions
Discover the power of React's conditional rendering to create dynamic user interfaces.
Learn how data is handled and shared in function arguments, variables, and objects with simple examples.