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();
// Closures
// In JavaScript, closure is one of the widely discussed and important concepts.
// A closure is a function that has access to the variable from another function’s scope which is accomplished by creating a function inside a function. As defined on MDN:
// “Closures are functions that refer to independent (free) variables. In other words, the function defined in the closure ‘remembers’ the environment in which it was created.”
// In JavaScript, closures are created every time a function is created, at function creation time. Most JavaScript developers use closure consciously or unconsciously — but knowing closure provides better control over the code when using them.
// Example:
function Spellname(name) {
var greet = "Hi, " + name + "!";
var sName = function() {
var welc = greet + " Good Morning!";
console.log(greet);
};
return sName;
}
var Myname = SpellName("Nishi");
Myname(); // Hi, Nishi. Good Morning!
// In the above example, the function sName() is closure; it has its own local scope (with variable welc) and also has access to the outer function’s scope. After the execution of Spellname(), the scope will not be destroyed and the function sName() will still have access to it.
-->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();
// 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
function foo() {
const secret = Math.trunc(Math.random() * 100)
return function inner() {
console.log(`The secret number is ${secret}.`)
}
}
const f = foo() // `secret` is not directly accessible from outside `foo`
f() // The only way to retrieve `secret`, is to invoke `f`
Run code snippet
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.
function OuterFunction() {
var outerVariable = 100;
function InnerFunction() {
alert(outerVariable);
}
return InnerFunction;
}
var innerFunc = OuterFunction();
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
//=====
//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.
// global scope
var 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)); // log 20
// You can also write without anonymous functions:
// global scope
var 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;
}
}
}
}
var sum2 = sum(1);
var sum3 = sum2(2);
var sum4 = sum3(3);
var result = sum4(4);
console.log(result) //log 20
function Counter() {
var counter = 0;
alert("XXXXX");
function increaseCounter()
{
return counter +=1;
}
return increaseCounter;
}
/***/
const counter = new Counter();
console.log(counter());
console.log(counter());
/*note that alert("XXXX") only executes once*/
/*think of counter() = new Counter() declaration as storing the value of ONE Counter function execution and
the remaining times you use counter(), you reexecute only the returned function*/
/*use counter() instead of Counter() if you want alert("XXXX") to execute only once AND for you to be able to return an actual value otherwise you only console.log a function and alert executes multiple times*/
// A Closure gives you access to an outer function's scope from an inner function.
// Example
function myNameIs(name) {
return function(){
console.log('Hi my name is ' + name);
}
}
let maxine = myNameIs('Maxine');
let amber = myNameIs('Amber');
maxine();
amber();
function numberGenerator() {
// Local “free” variable that ends up within the closure
var num = 1;
function checkNumber() {
console.log(num);
}
num++;
return checkNumber;
}
var number = numberGenerator();
number(); // 2
/*
A lexical environment is part of every execution context (stack frame) and is a map between identifiers (i.e. local variable names) and values.
Every function in JavaScript maintains a reference to its outer lexical environment. This reference is used to configure the execution context created when a function is invoked.
This reference enables code inside the function to "see" variables declared outside the function, regardless of when and where the function is called.
If a function was called by a function, which in turn was called by another function, then a chain of references to outer lexical environments is created.
This chain is called the scope chain.
In the following code, inner forms a closure with the lexical environment of the execution context created when foo is invoked, closing over variable secret:
*/
function foo() {
const secret = Math.trunc(Math.random() * 100)
return function inner() {
console.log(`The secret number is ${secret}.`)
}
}
const f = foo() // `secret` is not directly accessible from outside `foo`
f() // The only way to retrieve `secret`, is to invoke `f`
Run code snippet
//Closures
Closures means a function bind together with its lexical environment
OR
You can say a function along with its lexical scope bundle together forms
a closure
OR
In other words, a closure gives you access to an outer function's
scope from an inner function.
//Example
function x(){
var a = 7;
function y(){ //function y bind with its lexical enviroment
console.log(a);
}
a = 100;
return y;
}
var z = x();
console.log(z) //Output is 100
// javascript closure example
// outer function
function greet() {
// variable defined outside the inner function
let name = 'John';
// inner function
function displayName() {
// accessing name variable
return 'Hi' + ' ' + name;
}
return displayName;
}
const g1 = greet();
console.log(g1); // returns the function definition
console.log(g1()); // returns the value
//Closures are the inner functions that are embedded in parent function
function getName(){
// print name function is the closure since it is child function of getName
function printName(){
return 'Kevin'
}
// return our function definition
return printName;
}
const checkNames = getName();
console.log(checkNames());
/*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 from an inner function. In JavaScript, closures are
created every time a function is created, at function creation time.*/
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();