29 August 2018

Use curly braces inside JavaScript switch statements

I’ve been working on a react/redux application, and this has led me to use JavaScript switch-statements much more frequency than normal.

I noticed, while looking at someone else’s code, that they were putting curly braces around the statements after every case clause. I have since adopted this as a convention in my own code. While it seems not much different and you do still need to break or return at the end of the statements to prevent fall-through, there are two nice benefits:

  1. Visually the statements appear much more cohesive and more similar to other control structures (for-loop, if-statement, etc.)

  2. The braces create a block scope, this means that you can define unique, scoped variables via let without bumping into the statements in other cases.

To illustrate the second point, here’s some code that could conceivably appear within a redux reducer.

bad.js:

function reducer(state = {}, action) {
  switch (action.type) {
    case "SET_PROPERTY":
      let { key, value } = action.payload;
      return Object.assign({}, state, { [key]: value });
    case "REMOVE_PROPERTY":
      let { key } = action.payload;
      state = Object.assign({}, state);
      delete state[key];
      return start;
  }
}

It’s not immediately obvious that anything is weird here, however the block scope for each case is the entire switch block. As a result, key is being declared with let twice in the same block! If I try to compile this with a JavaScript compilation tool, like Parcel, then I get the following error:

> parcel build bad.js
🚨 bad.js:7:12: bad.js: Duplicate declaration "key"

If we add the curly braces, then the error goes away!

good.js:

function reducer(state = {}, action) {
  switch (action.type) {
    case "SET_PROPERTY": {
      let { key, value } = action.payload;
      return Object.assign({}, state, { [key]: value });
    }
    case "REMOVE_PROPERTY": {
      let { key } = action.payload;
      state = Object.assign({}, state);
      delete state[key];
      return start;
    }
  }
}

Even if you’ve heard it before, reading other people’s code can be a great way to pick up new coding techniques and ideas!


Did you find this helpful or fun? Please donate!

donate via btc or eth

btc: 18jCzwsZDGQYcs6Kyv92pd4683cnnxm1Dd
eth: 0xC285F21Cb271Cb4B3F70c4C47B2f7B26063AF590
paypal: paypal.me/mrcoles
comments powered by Disqus

Peter Coles

Peter Coles

is a software engineer who lives in NYC, works at Ringly, and blogs here.
More about Peter »

github · soundcloud · @lethys · rss

It’s time to get big money out of politics. Join the kick-started campaign to put government back in the hands of the people. Pledge mayday.us now