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( 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 and Twitter: killcodeNG.
Top comments (0)