closure-explanation.js

const outerFunction = () => {
  let storedValue = 0;
  
  // returning a function from a function is the key
  return () => {
    storedValue = storedValue + 1;
    console.log('storedValue = ', storedValue);
  };
};

// By executing outerFunction, we create a unique instance of the returned function with permanent access to a unique instance of the storedValue variable.
const functionWithPermanentAccessToStoredValue = outerFunction();

// The below line is important to note. Closures are created by functions being returned from other functions.
console.log(typeof functionWithPermanentAccessToStoredValue); // function

// By executing functionWithPermanentAccessToStoredValue, we increment storedValue. This happens because it has access to the storedValue since it was a nested function inside the outerFunction scope.
functionWithPermanentAccessToStoredValue(); // storedValue = 1
functionWithPermanentAccessToStoredValue(); // storedValue = 2
functionWithPermanentAccessToStoredValue(); // storedValue = 3

// storedValue is only accessible to the function that was returned from outerFunction which we have stored inside the variable functionWithPermanentAccessToStoredValue.
console.log(typeof storedValue); // undefined
// Accessing storedValue outside functionWithPermanentAccessToStoredValue is undefined

Closures:
- A closure is a function that was return from a wrapping/outer function and has permanent access to the variables created inside of the outer function scope.
- JavaScript is function scoped. Any variables created inside of a function
  can only be accessed by that function or its nested functions.
- All variables created inside the outer function can be accessed permanently inside the function that we return.