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 double curly brackets are not HTML but scripting code. The term inside, interest, is a placeholder, sort of like the name and address in a form letter. The string {{interest}} will be replaced when the HTML template is converted into straight HTML that is sent over the network to the user.
In programming, curly braces (the { and } characters) are used in a variety of ways. In C/C++, they are used to signify the start and end of a series of statements. In the following expression, everything between the { and } are executed if the variable mouseDOWNinText is true. See event loop.
This is what's known as a destructuring assignment, and it's a new feature of JavaScript 1.7 (and ECMAScript 6) (Currently, only available as part of the Firefox JavaScript engine.) Roughly, it would translate into this:
var ActionButton = require("sdk/ui/button/action").ActionButton;
It seems silly in this example, as there's only one item being assigned. However, you'd be able to use this pattern to assign multiple variables at once:
{x, y} = foo;
Is the equivalent to:
x = foo.x;
y = foo.y;
This can also be used for arrays. For example, you could easily swap two values without using a temporary variable:
var a = 1;
var b = 3;
[a, b] = [b, a];
Browser support can be tracked using kangax' ES6 compatibility table.
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