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.
The braces are always needed following the switch statement.
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.
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:
const
/ let
) with the same name
const
/ let
)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With