title: Safe code in javascript How it handles the global execution context
body: <p>This might be a silly question but most of the frameworks start with </p>
  
  <pre><code>(function(){
  //all data
  })() 
  </code></pre>
  
  <p>Immediately invoked expression
  So that There will be no collision with other js files right,so basically this is a function execution context that gets popped of the stack after execution,
  but how come it still could handle asynchronous requests like a click after page has been loaded</p>
  
  <p>For example:</p>
  
  <pre><code>(function(){
  //all data  
  var a=true; 
  btn.addEventListener("click",()=&gt;{
  alert(a);
  });
  })() ;
  </code></pre>
  
  <p>The whole code runs first and an event Listener is given to a button but after,that execution context is popped off the stack so how come my button can still contact and get data from the "finished safecode function"?</p>
  
  <p>Is this an implementation of closures where execution stack gets popped off but still the variables needed for dependant nested functions getting hung up?</p>