Is it valid syntax in ECMAScript to surround each case in a switch / case statement with curly braces?

Question

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?

Answer 1

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.