title: Javascript execution in conditional statements
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.onresize = window.onload = function(){
    if(window.innerWidth &lt; 480){
      document.getElementById('alert').onclick = function(){
        alert('&lt;480');
      };
      //large amounts of code
    }
    if(window.innerWidth &gt;= 480){
      document.getElementById('alert').onclick = function(){
        alert('&gt;=480');
      };
      //large amounts of code
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="alert"&gt;Alert&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In the above code if <code>window.innerWidth</code> is greater than 480, will the code inside first <code>if</code> be processed by the Javascript engine? The second block will be executed and I will have the function in memory and assigned to <code>#alert.onclick</code>.
  The question is will the <code>function</code> inside the other(false) condition be there in memory as a variable may be like a dangling reference or will that function be bootstrapped only when the condition is true?</p>
  
  <p><strong>This is to understand if there is any advantage in terms of initial amount of code processed when window loads if the code for mobile is inside conditional statements like this and is considerably large.</strong>. </p>
  
  <p>I'll be glad to see any documentation on how a function is bootstrapped and stacks allocated and when.</p>