Take this code for example; it is a Redux reducer function:

export default (state = initialState, action) => {
    switch (action.type) {
        case EMPLOYEE_UPDATE: {                                           // <-- this {
            // action.payload === { prop: 'name', value: 'Jane' }
            const { prop, value } = action.payload
            return { ...state, [prop]: value }
        }                                                                 // <-- and this }

        default:
            return state
    }
}

I was simply trying to destructure action.payload to minimize duplication, and I noticed it was aggravating the ES Lint rule (no-case-declarations). Normally, I might turn it off after confirming the rule. This one seems much more serious due to this ES Lint definition:

...The reason is that the lexical declaration is visible in the entire switch block but it only gets initialized when it is assigned, which will only happen if the case where it is defined is reached.

Source:

If I remember memory leak potential correctly, does this mean the piler will maintain a reference to action.payload at all times? -- meaning that if a large loop, dataset or long running calculation got into there, it could cause massive memory consumption even though the case only executes when it matches because it cannot be garbage collected or ignored?

First and foremost, is my interpretation correct?

The nature of my question is around what exactly { and } are protecting against in this execution context/lexical environment. Is it just memory leak potential or is there a topic I did not mention, as well?

Take this code for example; it is a Redux reducer function:

export default (state = initialState, action) => {
    switch (action.type) {
        case EMPLOYEE_UPDATE: {                                           // <-- this {
            // action.payload === { prop: 'name', value: 'Jane' }
            const { prop, value } = action.payload
            return { ...state, [prop]: value }
        }                                                                 // <-- and this }

        default:
            return state
    }
}

I was simply trying to destructure action.payload to minimize duplication, and I noticed it was aggravating the ES Lint rule (no-case-declarations). Normally, I might turn it off after confirming the rule. This one seems much more serious due to this ES Lint definition:

...The reason is that the lexical declaration is visible in the entire switch block but it only gets initialized when it is assigned, which will only happen if the case where it is defined is reached.

Source: https://eslint/docs/rules/no-case-declarations

If I remember memory leak potential correctly, does this mean the piler will maintain a reference to action.payload at all times? -- meaning that if a large loop, dataset or long running calculation got into there, it could cause massive memory consumption even though the case only executes when it matches because it cannot be garbage collected or ignored?

First and foremost, is my interpretation correct?

The nature of my question is around what exactly { and } are protecting against in this execution context/lexical environment. Is it just memory leak potential or is there a topic I did not mention, as well?

• javascript
• memory-leaks
• garbage-collection
• switch-statement
• eslint

• That rule looks wrong to me. You've got a block around the case code. – Pointy Commented Oct 6, 2017 at 21:56
• No, it means that if you don't wrap block statements in the cases, declarations will be shared amongst all cases. – MinusFour Commented Oct 6, 2017 at 21:57
• The additional blocks in the cases protect you only from a variable collision, when you declare two variables by the same name in different cases. Without the curly brackets they are in the same block, the switch. No more, no less. If there would be a memory leak, the brackets would not change anything about that. – Thomas Commented Oct 6, 2017 at 22:06
• Luckily, I think const would throw an error in that event, which is good news. – agm1984 Commented Oct 6, 2017 at 22:20

1 Answer 1

The problem:

switch (true) {
  case false:
    let x = 10;
    break;
  case true:
    let x = 20; //error there's already an x declaration in scope
    break;
}

The cases all share the same lexical scope. So the example runs an error.

So, a way to fix this is by adding a block statement to introduce block scope and localize the lexical declarations.

switch (true) {
  case false:
    {
      let x = 10;
      break;
    }
  case true:
    {
      let x = 20;
      break;
    }
}

It's unrelated to memory issues. Other than initialized bindings inside the switch block (that should eventually be GC).