JavaScript Closures

// Closures  
const secureBooking = function () {  
  let passengerCount = 0; // This variable will be accessed even after function isn't in the EC  
  return function () {  
    passengerCount++;  
    console.log(`${passengerCount} passengers`);  
  };  
};  
const booker = secureBooking(); // this makes booker a function as well  
booker(); // 1 passengers  
booker(); // 2 passengers  
booker(); // 3 passengers  
console.dir(booker); // Simliar to log, but allows more inspection like scopes  

// More Closure Examples  
let f; // define an empty variable  
const g = function () {  
  const a = 5; // set function scope variable  
  f = function () {  
    // set f value to a function  
    console.log(a * 2);  
  };  
};  
g();  
f(); // 10  

// Re-assigning f function  
const h = function () {  
  const b = 7;  
  f = function () {  
    console.log(b * 2);  
  };  
};  

h();  
f(); // 14  

// Example 2  
const boardPassengers = function (n, wait) {  
  const perGroup = n / 3;  
  setTimeout(function () {  
    // timeout functions are executed independently from its parent function  
    console.log(`We are now boarding all ${n} passengers`);  
    console.log(`There are 3 groups, each with ${perGroup} passengers`);  
  }, wait * 1000);  
  console.log(`Will start boarding in ${wait} seconds`);  
};  
const perGroup = 1000;  
boardPassengers(180, 3);  

// IIFE closure  
(function () {  
  const header = document.querySelector("h1");  
  header.style.color = "red";  
  document.querySelector("body").addEventListener("click", function () {  
    header.style.color = "blue"; // This function still have access to header, even though the parent function is executed already.  
  });  
})();