Is there a reason why the JavaScript console or WebStorm IDE didn't warn me about this mistake?

Question

Below is some code that wasn't behaving as expected. The middleLayerChoice being passed into the function that holds this code is '2MM'. Looking at it now, the error is obvious, but this was nested into a longer conditional branch (I'll be refactoring to Switch statements) so it took me a few trial-and-error runs of plugging in some console.log('line x') statements. The broken code is below:

if (middleLayerChoice === '1MM') 
     if (buttonID === 'xmm2mm') {
          console.log('MID = 1mm, TOP = 2mm');
          return ('resources/OptionalTopCovers/M_2_1.js');
     }                
     else if (buttonID === 'xmm3mm') {
          console.log('MID = 1mm, TOP = 3mm');
          return ('resources/OptionalTopCovers/M_3_1.js');
     }
else if(middleLayerChoice === '2MM') {
     if (buttonID === 'xmm2mm') {
          console.log('MID = 2mm, TOP = 2mm');
          return ('resources/OptionalTopCovers/M_2_2.js');
     }
     else if (buttonID === 'xmm3mm') {
          console.log('MID = 2mm, TOP = 3mm');
          return ('resources/OptionalTopCovers/M_3_2.js'); 
     }
}
...
...
else {
     console.log('getNewObject case 3 failed');
}

What I was missing was an entire set of braces:

if (middleLayerChoice === '1MM') **{**
     if (buttonID === 'xmm2mm') {
          console.log('MID = 1mm, TOP = 2mm');
          return ('resources/OptionalTopCovers/M_2_1.js');
     }
**}**    

Once we're all done giggling at my amateur mistake, could anyone tell my why the JavaScript console or WebStorm didn't warn me about this error? My code didn't crash, my else statement didn't log the error I wanted, and the code kept on running like things were okay (what was being returned was an undefined value).

I feel like compilers from other languages would have screamed at me for this mistake; so what's the reasoning behind both JavaScript and WebStorm ignoring this?

Answer 1

Because it's technically legit. You can have a one-line statement block. So, that's why the code didn't complain, although that's definitely not what you wanted because this:

if (middleLayerChoice === '1MM') 
     if (buttonID === 'xmm2mm') {
          console.log('MID = 1mm, TOP = 2mm');
          return ('resources/OptionalTopCovers/M_2_1.js');
     }                
     else if (buttonID === 'xmm3mm') {
          console.log('MID = 1mm, TOP = 3mm');
          return ('resources/OptionalTopCovers/M_3_1.js');
     }
else if(middleLayerChoice === '2MM') {
     if (buttonID === 'xmm2mm') {
          console.log('MID = 2mm, TOP = 2mm');
          return ('resources/OptionalTopCovers/M_2_2.js');
     }
     else if (buttonID === 'xmm3mm') {
          console.log('MID = 2mm, TOP = 3mm');
          return ('resources/OptionalTopCovers/M_3_2.js'); 
     }
}
...
...
else {
     console.log('getNewObject case 3 failed');
}

got interpreted as (note the indentation, added the braces for clarity):

if (middleLayerChoice === '1MM') {
     if (buttonID === 'xmm2mm') {
          console.log('MID = 1mm, TOP = 2mm');
          return ('resources/OptionalTopCovers/M_2_1.js');
     }                
     else if (buttonID === 'xmm3mm') {
          console.log('MID = 1mm, TOP = 3mm');
          return ('resources/OptionalTopCovers/M_3_1.js');
     }
     else if(middleLayerChoice === '2MM') {
        if (buttonID === 'xmm2mm') {
          console.log('MID = 2mm, TOP = 2mm');
          return ('resources/OptionalTopCovers/M_2_2.js');
        }
        else if (buttonID === 'xmm3mm') {
          console.log('MID = 2mm, TOP = 3mm');
          return ('resources/OptionalTopCovers/M_3_2.js'); 
        }
     }
     ...
     ...
     else {
         console.log('getNewObject case 3 failed');
     }
}

causing only middleLayerChoice === '1MM' to actually be able to "go in", to check for buttonID.

Many thanks to @apsillers for helping me correct this.