Closures in JavaScript
- A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).
- In other words, a closure gives you access to an outer function's scope (its variables) from an inner function, even after the outer function is removed/returned from the stack.
- Closure is a JavaScript property, which ensures that a function remembers the environment in which it was created.
Closures in JavaScript
Closures in JavaScript
function outer() {
const outerConst = 300;
function inner() {
console.log(outerConst)
const innerConst = 500;
}
console.log(outerConst)
inner()
console.log(outerConst)
}
outer()
- The inner function gets access to the variables of the outer function,
- But the outer function does not has access to inner function
Closures in JavaScript
- Because of closures, although the outer function is done or has returned, its variables can still be accessed by the inner function.
- Now if the inner function is accessed outside the outer function, it can still access the outer function's variables.
- Because closure of a function is created exactly when that function is created
function outerWrapper() {
let counter = 0;
function incrementCounter() {
counter++
return counter
}
return incrementCounter
}
const counterInc = outerWrapper()
counterInc() // 1
counterInc() // 2
counterInc() // 3
Closures in JavaScript
const globalValue = "I'm global"
function outer() {
const outerConst = 300;
console.log(globalValue)
return function inner() {
console.log(outerConst, globalValue)
const innerConst = 500;
}
}
const innerFunc = outer()
innerFunc()
- The inner function has access to all the variables which are defined in outer function,
- Also the variables to which outer function has access
(globalValue)
are also accessible to the inner function
Closures in JavaScript
function outer(firstName) {
const outerConst = 300;
console.log(firstName, lastName)
// Reference Error: 'lastname' is
// not defined
return function inner(lastName) {
console.log(firstName, lastName)
const innerConst = 500;
}
}
const innerFunc = outer("Yash")
innerFunc("Priyam")
- The arguments that the outer function receives, are also accessible to the inner function.
- The arguments that the inner function receives, are not accessible to the outer function.
Closures in JavaScript
- Any function generally has 3 scopes:
- its own scope: local scope
- its enclosing scope: closure scope
- and lastly: global scope
function makeAdder(x) {
const zero = 0;
return function (y) {
return x + y + zero;
};
}
const add5With = makeAdder(5);
const add10With = makeAdder(10);
console.log(add5With(2)); // 7
console.log(add10With(2)); // 12
Scope Chain
Closures in JavaScript
- We can have multiple nested functions, each inside the other.
- Now each inner function will have access to all the variables in the scope of its outer function/s.
- The scope of all of these nested functions are connected like a chain, called a Scope Chain.
- Now even though an outer function is done/returned, its variables will remain a part of scope chain for the inner functions to be able to access them.
// global scope
const e = 10;
function sum(a) {
return function sum2(b) {
return function sum3(c) {
// outer functions scope
return function sum4(d) {
// local scope
return a + b + c + d + e;
};
};
};
}
const sum2 = sum(1);
const sum3 = sum2(2);
const sum4 = sum3(3);
const result = sum4(4);
console.log(result); // 20
Scope Chain
Closures in JavaScript
// global scope
const e = 10;
function sum(a) {
return function (b) {
return function (c) {
// outer functions scope
return function (d) {
// local scope
return a + b + c + d + e;
};
};
};
}
console.log(sum(1)(2)(3)(4)); // 20
Scope Chain
- The same code can also be written with anonymous functions, like this:
- This pattern (line 15), is also called as currying pattern.
Closures in JavaScript
By Yash Priyam
Closures in JavaScript
- 116