Share:

R

Rupali Yadav

in

javascript

Sept 15, 2022

What is closure in javascript

#closure

#lexical scope

#pass by value javaScript

#webexpe

#webexpe.com

#rupali yadav

#rupali

In this article we are going to see what are closures in Javascript. Closures work around the concept of a scope. So, first let's see more on how scope works.

# 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 one() {
const rice = 'rice';
const plate = rice;
function two() {
const gravy = 'gravy';
const plate = rice + gravy;
function three() {
const salad = 'salad';
const plate = rice + gravy + salad;
return plate;
}
return three();
}
return two();
}
const plate = one();
console.log(plate)

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 and 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.
closures in javascript | Rupali Yadav
Now that we are good with scopes, let's dive right into Closures.

# Closures in javascript

Closures are a combination of a function bundled with references to its surrounding state (lexical environment). In simple words, it is a function along with all the variables that are accessible in the function's scope. In other words, a closure gives you access to an outer function’s scope inside an inner function.
const getDescription = (name, birthDate) => {
const calculateAge = () => {
return Math.floor((new Date() - new Date(birthDate).getTime()) / 3.15576e+10)
}
return 'My name is '+name + '. My age is '+ calculateAge();
}
const description = getDescription('John', '1990-10-02');
console.log(description); // "My name is John. My age is 32"
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.
closures in javascript | Rupali Yadav

# Closures maintain their lexical scope.

const getInfo = () => {
const birthDate = '2004-11-12';
const calculateAge = () => {
console.log(Math.floor((new Date() - new Date(birthDate).getTime()) / 3.15576e+10));
}
return calculateAge;
}
const info = getInfo();
console.log(info()); // 17
In the above code snippet we can see upon calling getInfo function the calculateAge function is returned. 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.

In conclusion, all the child functions will have access to all the variables declared in outer functions. But the same is not true other way around. Local variables of a function are not accessible outside the function.
Thanks for reading with us till here 🙂. If this article helped you please follow me on twitter, github and linkedIn for more such articles and other updates.
If you have any queries please write them below.

More from Author

What is hoisting in Javascript
What is hoisting in Javascript
Difference between pass by value and pass by reference in javascript
Difference between pass by value and pass by reference in javascript
How to use ref to style in react
How to use ref to style in react

Share:

Copyright © 2022 Web Expe

Privacy PolicyTerms and Conditions