Scoping variables in JavaScript switch statement

In JavaScript, variables can be scoped to a block. A block is enclosed by curly braces. This makes the switch statement a block.

A switch statement is used in place of several if...else statements. Using one or several case statements to match expression. The matching case is then run otherwise if there is no matching case, the default case is run.

Normally when you declare variable in case statements, they would hoisted to the switch statement. I would show you a very simple way to make sure the variables you declare in your case statements can only be accessed from that block.

Block level scope issue

One important point to remember is that each case statement is not a block. Variables declared anywhere within the switch statement is locally scoped to the switch statement.

let number  = 2;

switch (number) {
    case 1: 
        let message = "first number";
        console.log(message)
        break;
    case 2:
        let message = "second number";
        console.log(message)
        break;
  case 3:
        let message = "third number";
        console.log(message)
        break;
    default
        let message = "second number";
        console.log(message)
        break;
}

//This throws a syntax error: identifier "message" 
//has already been declared

This shows that the case statements themselves are not blocks, variables declared within them are hoisted to the switch statement block. When the compiler hoists the new declaration of the "message" variable, you are now re-declaring an existing variable which results in a syntax error.

Block level scope fix

There are cases where you might need yo hold different variable values in each of the case statements. It's possible to keep a variable scoped to the case statement. There's a very easy fix for this, Let's solve this

let number  = 2;

switch (number) {
    case 1: { // braces make the case statement a block
        let message = "number" + number; // this remains in this block
        console.log(message)
        break;
    }
    case 2: {
        let message =  "number" + number; // this is a valid syntax
        console.log(message)
        break;
    }
    case 3: {
        let message = "number" + number; 
        console.log(message)
        break;
    }
    default
        let message =  "number" + number;
        console.log(message)
        break;
}

By wrapping a block in braces, any variable declared within that block is only visible within the block,and is garbage collected once the block ends.

With this syntax, each of these variables are declared within a block, scoped away from each other. They can only be accessed from within the case scope and thrown away once the block ends.

Conclusion

I'm sure this is a much easier than you thought. This fix is a legal syntax.

Thank you for reading, I'm Azeez Lukman and here's a developer's journey building something awesome everyday. Please let's network on Twitter, LinkedIn and GitHub @robogeeek95

Comments

[Amirhosein Kalari!]

This thing makes me re-think about the scoping in JavaScript. I think I was dump about this topic before this. So, if you didn't know that, no matter it's a control flow or logical operation like for or if things, you can even have a block that is just a block. What does it mean? Well, the code blow is a valid JS code:

{
    const message = "Hello world";
    console.log(message);
}

So in the lexical context of JavaScript, it's just a block. So that means somehow _anything in between two curly braces, is a block in JavaScript _

Your article was thought provoking. thanks!

[fabris rugero]

I didn't even know you could do this. I just assumed switch statement has no local scoping in javascript, but I am currently working with reducers and scoping variables keeps me sane!