JAVASCRIPT

closure

function outer() {
  const outerVar = "Hi i am outerVar";
  function inner() {
    const innerVar = "Hi i am innerVar";
    console.log(outerVar);
    console.log(innerVar);
  }
  return inner;
}

const innerFn = outer();
innerFn(); 
// Hi i am outerVar
// Hi i am innerVar

closure

function makeFunction() {
  const name = 'TK';
  function displayName() {
    console.log(name);
  }
  return displayName;
};

closure in js

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();

Closure ()

// 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 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();

closures in javascript

// 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

how javascript closures work?

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

closure in javascript

function makeFunc() {
  var name = 'Mozilla';
  function displayName() {
    alert(name);
  }
  return displayName;
}

var myFunc = makeFunc();
myFunc();

what are closures

Closures are related and often confused with lambda functions.
The 2 concepts are wonderfully explained and distinguished 
in this StackOverflow answer :
https://stackoverflow.com/a/36878651/13574304

js closure examples

function outer() {
  var counter = 0; // Backpack or Closure
  function incrementCounter() {
    return counter++;
  }
  return incrementCounter;
}

const count = outer();
count(); // 0
count(); // 1
count(); // 2

what is closure in javascript

function OuterFunction() {

    var outerVariable = 100;

    function InnerFunction() {
        alert(outerVariable);
    }

    return InnerFunction;
}
var innerFunc = OuterFunction();

js closure

// 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

closure

var counter = (function() {  //exposed function references private state (the outer function’s scope / lexical environment) after outer returns. 
 var privateCounter = 0;
 function changeBy(val)   { privateCounter += val; }
 return {  increment: function() {changeBy(1); },
           decrement: function() {changeBy(-1);},
           value: function() {return privateCounter; }
  };
})();

counter.increment(); counter.increment();
counter.decrement();
counter.value();      //  1

Closure Example

	 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*/

closure in javascript

var counter = (function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  };
})();

console.log(counter.value()); // logs 0
counter.increment();
counter.increment();
console.log(counter.value()); // logs 2
counter.decrement();
console.log(counter.value()); // logs 1

what is a closure in javascript

// 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();

closures

// Closures
//Almost mystical like feature that many developers fail to fully understand.
//We cannot create closures manually like how we create arrays and functions.
//Rather closures happen in certain  situations. We just need to recognize 
//those situations.

//Example:
const secureBooking = function () {
   let passengerCount = 0; //Variable of the secureBooking Function
   
  //returns a function
   return function () {
     passengerCount++; //Adding to the passengerCount
     console.log(passengerCount);
  };
 };

const book = secureBooking(); //capture that function
book();

//In the above example we have a function called secureBooking
//That function returns another function, which we stored in book variable
//We then call the book() function and it adds to the passengerCount.
//But you may be wondering? How can it add to the passengerCount
//if the secureBooking has finished executing, shouldn't it not exist?
//This works because all functions have access to the variable environment
// in which they were created in. Meaning since secureBooking created
// the function which we stored in book. The book function now has 
// access to the variable environment of secureBooking function.

what is closure

outer = function() {
  var a = 1;
  var inner = function() {
    console.log(a);
  }
  return inner; // this returns a function
}

var fnc = outer(); // execute outer to get inner 
fnc();

How do JavaScript closures work?

/*
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

closure in javascript

//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 

closure

func main() {
  x := 0
  increment := func() int {
    x++
    return x
  }
  fmt.Println(increment())
  fmt.Println(increment())
}

closure in javascript

// Explanation of closure
/* 1 */        function foo()
/* 2 */         {
/* 3 */             var b = 1;
/* 4 */             function inner(){
/* 5 */                 return b;
/* 6 */             }
/* 7 */             return inner;
/* 8 */         }
/* 9 */         var get_func_inner = foo();        
 
/* 10 */         console.log(get_func_inner());
/* 11 */         console.log(get_func_inner());
/* 12 */         console.log(get_func_inner());

Closures in javascript

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

A closure Function

var returns_a_func = function () {
  var word = 'I can see inside '     function sentence(){    var word2 = 'I can also see outside. '     console.log(word + 'and ' + word2)   }   return sentence;
}var finalSentence = returns_a_func()finalSentence()

what is closure in javascript

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

what is a closure in javascript

//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());

js closure

function aFunc(x){
  return () => console.log( x++ )
}

closure examples

function makeFunc() {
  const name = 'Mozilla';
  function displayName() {
    console.log(name);
  }
  return displayName;
}

const myFunc = makeFunc();
myFunc();

closure

function add(a) {
     return function(b) {
         return a + b;
     };
 }

 let addTen = add(10);
 let addSeven = addTen(7);

 console.log(addSeven); // 17

function - How do JavaScript closures work?

function createObject() {
  let x = 42;
  return {
    log() { console.log(x) },
    increment() { x++ },
    update(value) { x = value }
  }
}

const o = createObject()
o.increment()
o.log() // 43
o.update(5)
o.log() // 5
const p = createObject()
p.log() // 42

closure

def say():
    greeting = 'Hello'

    def display():
        print(greeting)

    display()
Code language: Python (python)

closure in javascript

A closure is a function bundeled together with its lexical scope

What is 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 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();

closure example

const add = (function () {
  let counter = 0;
  return function () {counter += 1; return counter}
})();

add();
add();
add();

// the counter is now 3

A closure Function

Cannot GET /about-us.html