Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What do the curly braces do in switch statement after case in es6?

People also ask

What do curly braces do in JavaScript?

Curly braces { } are special syntax in JSX. It is used to evaluate a JavaScript expression during compilation. A JavaScript expression can be a variable, function, an object, or any code that resolves into a value.

Do switch statements need braces?

The braces are always needed following the switch statement.

What does curly braces mean in JSX?

The curly braces are a special syntax to let the JSX parser know that it needs to interpret the contents in between them as JavaScript instead of a string. You need them when you want to use a JavaScript expression like a variable or a reference inside JSX.

What does empty curly braces mean in JavaScript?

It means the variable is a dictionary that stores key value pairs. The subscript or the value within the [] brackets is the key and the value on the right side is the value.


Curly braces used in this way establish their own block scope, in which you can define local let variables or const constants:

switch (false) {
    case true: {
      let x = "bar";
      console.log(x);
      break;
    }

    case false: {
      let x = "baz";
      console.log(x);
      break;
    }
}

The example would throw without nested block scopes, since multiple let/const declarations with the same identifier are not allowed within the same scope in Ecmascript 2015.

Please note that the switch statement creates a block scope itself, i.e. whether you use nested block scopes or not, let/const declarations inside switch don't leak into the parent scope.

However, in the context of switch, curly brackets are also used purely decorative, to visually highlight the blocks of the individual case branches.


you have to use curly brackets:

  1. when creating more block scoped variables (const / let) with the same name
    • according to spec MDN web docs
    • ERROR: Uncaught SyntaxError: Identifier 'variablename' has already been declared
  2. when using eslint in default settings and using even single one (const / let)
    • according to rule no-case-declarations
    • ERROR: Unexpected lexical declaration in case block no-case-declarations