Introduction
In this article, we will learn the important concept of javascript i.e closures
.
So, let's dive in
What is Closure?
CLOSURE = FUNCTION + LEXICAL ENVIRONMENT
or
A closure is a combination of a function bundled together (enclosed) with references
to its surrounding state (the lexical environment)...🤔 🤔 🤔
Let me give you an example,
function outerFunction() {
var x = 10
function innerFunction() {
console.log(x, "I am inside inner function") ;
// here, variable x can accessed... through lexical environment
}
innerFunction()
}
outerFunction()
Lexical environment: Here, innerFunction
has access to variable x
which is defined in its parent function i.e outerFunction
. This is what lexical environment
.
Now,
var y = 9
function outerFunction() {
var x = 7
function innerFunction() {
console.log(x, y, "I am inside innerfunction")
}
return innerFunction
//so here function is not returned whereas whole closure is returned
}
const output = outerFunction()
console.dir(outerFunction)
You would have thought that how the innerFunction
was able to access x
.
But javascript makes it possible. when function outerFunction
is called, both variable x
and function innerFunction
will be created inside the local memory of outerFunction
that shares the same lexical environment.
Due to which when innerFunction
is returned from the outerFunction
it will have access to the surrounding variables during the time of its declaration. Whereas variable y
is accessed via Global scope.
A Closure is a combination of function bundled together with its surrounding references (Lexical environment). In simple terms, it means, closure gives you access to an outer function’s scope from an inner function.
Gotchas in Closures
Re-assign the variable
For example,
function outerFunction() {
var x = 9
return function innerFunction() {
console.log(x)
}
x = 80
}
var output = outerFunction()()
Here, x
is re-assigned to a new value i.e 80.
What do you think will be its output?
Yes, we will get the value of variable x
as 80
not 9
because remember we look for reference
!😅
Nesting in functions
For example,
function outermost() {
var x = 10
function middle() {
var y = 8
function innermost() {
console.log(x, y)
}
return innermost
}
return middle
}
const output = outermost()()()
So, In the above example, innermost
forms a closure with parent middle
and grandparent outermost
Advantages of closures
Module design pattern
Currying in Javascript
Memoize
Maintaining state in
async
worldData hiding And encapsulation
Iterators
set timeout
Disadvantages of Closures
Memory in closure cannot be garbage collected
It slows down the performance because a function within another function creates a duplicate in memory.
Congratulations!
We are done, I hope you have learned something new and enjoyed the blog!
Please share your feedback.