-1

I'm never entirely comfortable with formatting switch/case statements in JavaScript. Given the following:

switch (myVariable) {

  case ('a'):
  console.log('apple');
  break;

  case ('b'):
  console.log('banana');
  break;

  case ('c'):
  console.log('cherry');
  break;

  default:
  console.log('pineapple);
}

I feel that the lines after the case declaration ought to be indented.

But if they were indented, there would then be a peculiar-looking two-column gap between the last line of the last case and the closing curly brace of the switch block.

It has just occurred to me that I might surround the code of each case within their own curly braces.

I suspected this might be invalid, but my browser is happy with it, Prettier is happy with it and, surprisingly, even JSHint is content with this formatting.

Here is an example of what I'm describing:

switch (myVariable) {

  case ('a'): {
    console.log('apple');
    break;
  }

  case ('b'): {
    console.log('banana');
    break;
  }

  case ('c'): {
    console.log('cherry');
    break;
  }

  default: {
    console.log('pineapple);
  }
}

This formatting enables code indentation without introducing the two-column gap.

But surely this isn't valid ECMAScript syntax, is it?

Rounin
  • 27,134
  • 9
  • 83
  • 108
  • Why not just try it and find out if it throws a syntax error or not? (It's valid.) – CertainPerformance May 25 '22 at 20:48
  • 1
    @CertainPerformance - I'm aware that what is sometimes accepted by JS-interpreters in browsers doesn't necessarily conform with ECMAScript proper. I can test JS in the browser, but I can only determine what is right in ECMAScript by reading specs etc. – Rounin May 25 '22 at 20:51
  • Thanks, @jonrsharpe, appreciated. This is the relevant section: https://262.ecma-international.org/#sec-switch-statement, though, as far as I can tell, it has nothing to say about using curly braces with each `case`. – Rounin May 25 '22 at 20:59
  • I don't know what you were expecting to see - the official specs including "Yes Rounin you can have braces here :)"? They say what's valid case, and that includes the possibility of blocks. – jonrsharpe May 25 '22 at 21:00
  • @jonrsharpe - in the answer below, CertainPerformance cites precisely the kind of official confirmation I was looking to find (but had, thus far, failed to locate): _"A statement may be a BlockStatement"_. Alongside that, I very much appreciate the link you posted above. Thanks again. – Rounin May 25 '22 at 21:03
  • 4
    this is very common in my experience, and not for formatting - sometimes you need to declare variables in `case` clauses, and you would really want these to be in their own scope, which a `{...}` block creates (assuming you're using `let` or `const` rather than `var`!), but a `case` statement on its own most certainly does not! – Robin Zigmond May 25 '22 at 21:05
  • Yes, I see. That absolutely makes sense, @RobinZigmond. Thank you for adding that. – Rounin May 25 '22 at 21:06

1 Answers1

3

In the syntax, a single "case" is called a CaseClause. A CaseClause is componsed of:

case Expression: StatementList

A StatementList is composed of a StatementListItem.

A StatementListItem is either a statement or declaration.

A statement may be a BlockStatement.

A block statement is a plain block - which is a block which contains a StatementList:

{ StatementList }

So yes, it's valid syntax.

CertainPerformance
  • 356,069
  • 52
  • 309
  • 320