What Does Curly Brackets in the 'Var { ... } = ...' Statements Do

What does curly brackets in the `var { ... } = ...` statements do?

They're both JavaScript 1.7 features. The first one is block-level variables:

let allows you to declare variables, limiting its scope to the block, statement, or expression on which it is used. This is unlike the var keyword, which defines a variable globally, or locally to an entire function regardless of block scope.

The second one is called destructuring:

Destructuring assignment makes it possible to extract data from arrays or objects using a syntax that mirrors the construction of array and object literals.

...

One particularly useful thing you can do with destructuring assignment is to read an entire structure in a single statement, although there are a number of interesting things you can do with them, as shown in the section full of examples that follows.

For those familiar with Python, it's similar to this syntax:

>>> a, (b, c) = (1, (2, 3))
>>> a, b, c
(1, 2, 3)

The first code chunk is shorthand for:

var {Hotkey: Hotkey} = require("sdk/hotkeys");
// Or
var Hotkey = require("sdk/hotkeys").Hotkey;

You can rewrite the second code chunk as:

let Cc = Components.classes;
let Ci = Components.interfaces;
let Cr = Components.results;
let Cu = Components.utils;

When should I use curly brackets in javascript? In general

Curly brackets are used to denote a block of code. These are generally used while writing control flow statements, loops, functions etc.

For example:

for ( var index = 0; index < 10; index++ ) {
    //this will contain some lines of code
}

function doSomething() {
    //this will have a set of statements
}

if ( expression ) {
    //some statements to execute if condition is true
} else {
    //Statements to execute if condition is false
}

Javascript object literal notation also uses curly brackets.

Example:

var personObject = {firstName: "John", lastName: "Doe"};

What do curly braces in JavaScript mean?

In your case it is an object passed to your css function.

myObj={} // a blank object

Here you can use this too

myObj={'float' : 'right'}
xxx.css(myObj);

Here is another example of object

var myObj={
    'varOne':'One',
    'methodOne':function(){ alert('methodOne has been called!')}        
}
myObj.methodOne();​ // It will alert 'methodOne has been called!'

A fiddle is here.

What does this curly brace block do after a var declaration?

This is called a computed property. The kind you're seeing here is a read-only computed property.

Everytime you access the property (self.modelController in this case), the closure runs, returning the value that will be used for the property.

In the example given, the code checks whether another variable _modelController is set, and sets it if not, then returns that value. This is a way of lazy loading the object when it is accessed for the first time.

Understanding the Context of Curly Brackets '{}'

No, the curly braces in destructuring do form neither a block nor an object literal.

They definitely are not a block because they are not a statement (and don't contain a statement list), they are an expression like an object literal. In fact they even do have the same syntax as an object literal, the only difference is that they are in the position of an assignment target (left hand side of an assignment operator) or a function parameter.

Is let a = ({ a, b }) => {…} the same as let a = ( a, b ) => {…}?

No, really not. Both parameter lists do declare variables a and b for the function scope, but the first function expects an object with properties .a and .b while the second function expects two arguments.

My understanding is that we are merely mapping the properties into a new obj?

No. There is no new object created/instantiated. There is only the object that you pass in (the right hand side). And it is destructured - "pulled apart" - into pieces that are then assigned to the various sub-targets (variables, property references).

To write

a.b = anObj.first;
a.c = anObj.second;

with a destructuring assignment you'd use

({first: a.b, second: a.c}) = anObj;

(the parenthesis are necessary to distinguish the expression from a block).

The more common use case is for variable initialisations however. You can shorten

let b = anObj.first,
    c = anObj.second;

to

let {first: b, second: c} = anObj;

And also there's a shorthand when the variable has the same name as the property, so

let first = anObj.first,
    second = anObj.second;

is equivalent to

let {first, second} = anObj;

Is let a = { first : a, second : b } = anObj; correct?

No, that doesn't make much sense. It would desugar to

let a;
a = anObj.first;
b = anObj.second;
a = anObj;

When to wrap curly braces around a variable

What are PHP curly braces:

You know that a string can be specified in four different ways. Two of these ways are – double quote("") and heredoc syntax. You can define a variable in those 2 types of strings and PHP interpreter will parse or interpret that variable too, within the strings.

Now, there are two ways you can define a variable in a string – simple syntax which is the most used method of defining variables inside a string and complex syntax which uses curly braces to define variables.

Curly braces syntax:

To use a variable with curly braces is very easy. Just wrap the variable with { and } like:

{$variable_name}

Note: There must not be any gap between { and $. Else, PHP interpreter won't consider the string after $ as a variable.

Curly braces example:

<?php
$lang = "PHP";
echo "You are learning to use curly braces in {$lang}.";
?>

Output:

You are learning to use curly braces in PHP.

When to use curly braces:

When you are defining a variable inside a string, PHP might mix up the variable with other characters if using simple syntax to define a variable and this will produce an error. See the example below:

<?php
$var = "way";
echo "Two $vars to defining variable in a string.";
?>

Output:

Notice: Undefined variable: vars …

In the above example, PHP's interpreter considers $vars a variable, but, the variable is $var. To separate a variable name and the other characters inside a string, you can use curly braces. Now, see the above example using curly braces-

<?php
$var = "way";
echo "Two {$var}s to define a variable in a string.";
?>

Output:

Two ways to define a variable in a string.

Source: http://schoolsofweb.com/php-curly-braces-how-and-when-to-use-it/

When do we need curly braces around shell variables?

In this particular example, it makes no difference. However, the {} in ${} are useful if you want to expand the variable foo in the string

"${foo}bar"

since "$foobar" would instead expand the variable identified by foobar.

Curly braces are also unconditionally required when:

• expanding array elements, as in ${array[42]}
• using parameter expansion operations, as in ${filename%.*} (remove extension)
• expanding positional parameters beyond 9: "$8 $9 ${10} ${11}"

Doing this everywhere, instead of just in potentially ambiguous cases, can be considered good programming practice. This is both for consistency and to avoid surprises like $foo_$bar.jpg, where it's not visually obvious that the underscore becomes part of the variable name.

---

Related Topics