JavaScript code block with Switch statements

I thought I knew about switch statement until I tried this

Switch (eventName) {
 case 'click':
      let me = 'bar'
      break;
 case 'drag': 
     let me = 'foo'
}

It didn't run not because switch statement is mean(😠), just to be clear, it has been my go-to when I need saving from if else if else if block hell.

It's just variable declaration with let and const, playing a fast one on me.

Well here is one unpopular fact about let, you cannot redeclare a variable that is already declared with let keyword within the same code block, same thing goes for const.

Why would I want to do redeclare let variable within a switch statement. You see, most of the time, the logic within each case in a switch statement could have similar logic with some modifications and I really should be able to redeclare variable in this situation, var can help but I have issue with it, it's global/function scoped, we don't want to risk global or function scope knowing what we are cooking inside our switch unless we really want them (the scopes i.e global and function) to.

So, I thought, If let want a block, I am just gonna give it to em,

Switch (eventName) {
 case 'click': {
      let me = 'bar'
       me = 'foo'
   console.log(me)
      break;
      }
 case 'drag': {
     let me = 'foo'
       me = 'bar'
   console.log(me)
     break;
     }
}

Finally, I got the genie trapped! The truth is, I have always seen this pattern in codebases, but never really figured what it was meant for. Now, I do. And it's interesting to tell you that this has nothing to do with switch statement.

Yes, you 'read' me right, you see, JavaScript's code block can exist within and independent of function/class declaration, switch, loop and conditional statements.

The piece of code below is a legal citizen of JavaScript

{
let bar = 'foo';
console.log(bar)
}

{
let bar = 'baz'
console.log(bar)
}

You don't believe me? Go ahead and see for yourself.

Using code block could also help resolve eslint no-case-delcaration issue.

A switch statement by default is considered a single code block, switch {}. Therefore, every declaration within each case belong to the same switch block scope and every block scoped declaration like function, class, let and const in any of the cases declared within the switch.

let eventName = 'drag';
Switch (eventName) {
 case 'click': 
     let me = 'bar'
         me = 'foo'
     console.log(me)
      break;
 case 'drag': 
   console.log(me)
     break;
}

When the case where any function, class or variable( letand const only) is declared in is not executed, we have buggy code in our hands.

Code like this in JavaScript is one reason you never trust JavaScript not to trip you off no matter how long you have been speaking the language.

There is so much to learn in JavaScript, till next time.
Happy Coding!

Let me know if you have any suggestions or questions in the comments.
You can reach me on linkedin and Twitter: killcodeNG.