A combination of a function object and a scope (a set of variable bindings)
in which the function's variables are resolved is called a closure.
Callbacks are functions that are passed into another function as an argument.
Closures are functions that are nested in other functions, and it's often used to avoid scope clash
with other parts of a JavaScript program
xxxxxxxxxx
<button type="button" onclick="funClosure()">Click to Count</button>
<p id="displayValue">0</p>
<script>
const add = (function(){
let count = 0;
return function(){
count += 1;
return count;
}
})();
function funClosure(){
document.getElementById("displayValue").innerHTML = add();
}
</script>
xxxxxxxxxx
A closure gives you access to an outer function’s scope from an inner function
//example
function init() {
var name = 'Mozilla'; // name is a local variable created by init
function displayName() { // displayName() is the inner function, a closure
alert(name); // use variable declared in the parent function
}
displayName();
}
init();
xxxxxxxxxx
// A closure is a function having access to the parent scope,
// even after the parent function has popped.
function greeting() {
let message = 'Hi';
function sayHi() {
console.log(message);
}
return sayHi;
}
let hi = greeting();
hi(); // still can access the message variable
xxxxxxxxxx
-->closure in javascript
//closure is the combination of function and the lexical enviornment in
//which the function is defined.closure give you access to the functions
//and variables outside the function.
function outer(){
const outerData ="outer";
function inner(){
const innerData="inner";
console.log(`${outerData} and{innerData}`);
}
inner();
}
outer();
xxxxxxxxxx
function makeAdder(x) {
return function(y) {
return x + y;
};
}
var add5 = makeAdder(5);
var add10 = makeAdder(10);
console.log(add5(2)); // 7
console.log(add10(2)); // 12
xxxxxxxxxx
function makeFunc() {
var name = 'Mozilla';
function displayName() {
alert(name);
}
return displayName;
}
var myFunc = makeFunc();
myFunc();
xxxxxxxxxx
function outerFunction() {
var outerVariable = 'I am an outer variable';
function innerFunction() {
var innerVariable = 'I am an inner variable';
console.log(outerVariable);
}
return innerFunction;
}
var closureExample = outerFunction();
closureExample();
xxxxxxxxxx
let counter = (function() {
let i = 0; // private property
return { // public methods
get: function() {
alert(i);
},
set: function(value) {
i = value;
},
increment: function() {
alert(++i);
}
};
})(); // module
counter.get(); // shows 0
counter.set(6);
counter.increment(); // shows 7
counter.increment(); // shows 8
xxxxxxxxxx
function makeFunc() {
var name = 'Mozilla';
function displayName() {
alert(name);
}
return displayName;
}
var myFunc = makeFunc();
myFunc();
xxxxxxxxxx
function makeAdder(x) {
return function(y) {
return x + y;
};
}
var add5 = makeAdder(5);
var add10 = makeAdder(10);
console.log(add5(2)); // 7
console.log(add10(2)); // 12
//my words: what this code do is basically a nested function that will return
//its inner function (un-activated). So var add5 in line 7 activated the outer
//function with 5 as parameter which makes add5 is now the nameless function at
//line 2 that will return 5 + y;
//MDN words:
//add5 and add10 are both closures. They share the same function body
//definition, but store different lexical environments. In add5's lexical
//environment, x is 5, while in the lexical environment for add10, x is 10.