Javascript execution in conditional statements

Question

window.onresize = window.onload = function(){
  if(window.innerWidth < 480){
    document.getElementById('alert').onclick = function(){
      alert('<480');
    };
    //large amounts of code
  }
  if(window.innerWidth >= 480){
    document.getElementById('alert').onclick = function(){
      alert('>=480');
    };
    //large amounts of code
  }
}

<button id="alert">Alert</button>

In the above code if window.innerWidth is greater than 480, will the code inside first if be processed by the Javascript engine? The second block will be executed and I will have the function in memory and assigned to #alert.onclick. The question is will the function 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?

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

I'll be glad to see any documentation on how a function is bootstrapped and stacks allocated and when.

Answer 1

Yes all the code will be parsed

And No, not all the code will be processed/executed.

What you are doing is a conditional assignment. on load and on resize

Means that if condition is true/false on function call load/resize the onclick property will be set/overwritten accordingly.

There is a difference between assignment and declaration

assignment:

assigned = function(){ console.log("blabla") }

declaration:

function declared(){ console.log("blablabla")}

function declarations will be hoisted (what you describe by "parsed and stored into memory before actual execution"), so:

You ask about performance so your actual question is depending on what you describe is "large amounts of code". if you are not talking about like 1mb of js-code in between there with tons of function declarations... dont worry.

and just as a note, never try to debug your js with alert() because it will stop all execution unless you interact with the popup. Means that if your alert fires when width > 479 and for some reason your width gets smaller than 480 in the meantime (for example orientation change on a device), your assignment wont happen!!!

as i pointed out in the comment below, you can test the parse and execution performance like this:

<script>
  var startTime = new Date().getTime();
</script>

// your stuff 

<script>
  console.log(new Date().getTime() - startTime)
</script>