JavaScript Closure Explained
The closure in javascript is one of the essential concepts in javascript. Still, it is a confusing topic in javascript. Here we will be talking about javascript Closure. Let’s get started.
Before you understand closure, you need to have knowledge about two concepts.
- Nested Function
- Returning a function
Nested Function
In a javascript program, we can write a function into another function. It means a nested function is a function that is completely defined within a parent function.
// Outer function
function web(name) {
// inner function
function displayName() {
console.log("this is" + " " + name);
}
displayName(); // calling inner funcion
}
web("indgeek"); // output: this is indgeek.
Here web() is the outer function and displayName() is the inner function. We defined the inner function inside the outer function and called the inner function inside the outer function. And at last, we called the outer function with argument.
Also Read: JavaScript Hoisting Explained
Returning a Function
In javascript, you can return a function within a function, this is called returning a function. For example
function web(name) {
function displayName() {
console.log("this is" + " " + name);
}
displayName();
}
const webName = web("indgeek");
console.log(webName); // returning the function definition
webName(); // calling the function
Here the output will be:
// Output
function displayName(){
console.log("this is" + " " + name);
}
this is indgeek
When we console log the webName it will print the whole function and then it will return the function.
Also Read: Introduction to JavaScript Promises
Javascript Closure
In Javascript, the inner function can always access the variable of its outer function, even after the outer function has returned. This is called javascript Closure.
Example 1:
function outerFunction() {
let web = "indgeek"; // variable defined outside the innerFunction
function innerFunction() {
return "This is" + " " + web; // accessing the outerFunction's name variable
}
return innerFunction;
}
const innerFunc = outerFunction();
console.log(innerFunc); // returning the function definition
console.log(innerFunc()); // return the value
Output:
function innerFunction(){
return "This " + " " +web; // accessing the outerFunction's name variable
}
This is indgeek
Explanation:
- In the first example when outerFunction is called, it returns the function definition of innerFunction.
- Here innerFunc is a reference of the innerFunction(). So, when innerFunc() is called, it has the access to the variable of the outerFunction().
- Therefore when we run console.log(innerFunc), it returns the function definition of innerFunction.
- And when we run console.log(innerFunc()), it returns the value of innerFunction() because of the reference.
Example 2:
function Add(x) {
// outerfunction
function Sum(y) {
// innerfunction
return x + y;
}
return Sum; // returning innerfunction
}
const sum1 = Add(3); // closures
const sum2 = Add(4); // closures
console.log(sum1); // returns the add function defination
console.log(sum1()); // NaN
console.log(sum1(10)); // 13
console.log(sum2(5)); // 9
Output:
[Function: Sum]
NaN
7
9
Explanation:
- The
Add()
function contains a single argument x and returns the function definition of the Sum() function. - The Sum() function contains a single argument y returns x + y, as it can access the variable of the outer function.
- Here both sum1 and sum2 are the closures.
- The Add() function is called passing a parameter x.
- When we called sum1() with no argument it returns noting because of y argument of the inner function. But when we called sum1(10) and sum2(5) it returns a value because the Sum() function has access to the passed x argument of the outer Add() function.