JavaScript code block with Switch statements
Tags: javascript, beginners, programming, tutorial
Published: 2023-02-15 10:41:04



I thought I knew about `switch` statement until I tried this

```javascript
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,
```javascript
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
```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](https://eslint.org/docs/latest/rules/no-case-declarations) 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.

```javascript
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( `let`and `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](https://www.linkedin.com/in/haastrupea/) and [Twitter: killcodeNG](https://twitter.com/killcodeNG).