/*

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

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

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

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

function makeFunc() {

  var name = 'Mozilla';

  function displayName() {

    alert(name);

  }

  return displayName;

}

​

var myFunc = makeFunc();

myFunc();

​

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

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

function makeFunc() {

  var name = 'Mozilla';

  function displayName() {

    alert(name);

  }

  return displayName;

}

​

var myFunc = makeFunc();

myFunc();

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.

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