What Do {Curly Braces} Around JavaScript Variable Name Mean

What do {curly braces} around javascript variable name mean

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.

What do curly braces around a variable in a function parameter mean

This is destructuring assignment syntax.

As another example, the following two lines of code are equal:

const { items } = args

const items = args.items

Simply put, it is a simplified way of accessing specific field of a given variable for further use in that scope.

In your original example, it is declaring a variable items for use in the function body that is the items field of that first argument.

const SortableList = SortableContainer(({items}) => {
    // do stuff with items here

is equal to

const SortableList = SortableContainer((input) => {
    const items = input.items
    // do stuff with items here

javascript: meaning of curly brace between variable name

Essentially curly braces like you've mentioned are Objects in javascript.

So making something like this in javascript

const user = {
    name: 'bob',
    age: 23,
};

Is making a user Object which you can use like this: user.name which will return bob.

With ES6 you're capable of making Objects from other Objects.

const {user} = state.params;
//user will be state.params.user

The above is basically pulling the property user from the object state.params into a new variable. Really all they're doing is making it so you don't have to write state.params.user each time and rather you can write user.

There's some other cool stuff you can do with this above technique. You can 'merge' arrays and objects into new constants which is pretty cool.

const test = {
    ...user,
    anotherProperty: 'value',
};

With react and redux (if you're using it) you'll see a lot of this: Object.assign({}, state, {}); which is used to create a new object with the previous properties of the state overwritten with the new state (because redux requires a new object). This is kind of the same as using {...state, ...newState}.

Please someone remind me what this ...Object method is called?

This line const isInfo = state.params.mode === 'info'; is a shorthand for declaring a bool. isInfo will be either true or false depending on whether state.params.mode === 'info'.

To translate the above into C++ for you

if (state.params.mode === 'info') {
    bool isInfo = true;
else {
    bool isInfo = false;
}

I can't remember if there is a similar Object array in C++ as in JavaScript bit think of Objects in JavaScript as Arrays with defined keys. That way the above {...state, ...newState} is like an 'override' of keys. So

int y = [1,2,3];
int x = [3,2,1];

for (i=0;i<=2;i++) {
    y[i] = x[i];
}

Something like that I think?

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 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;

JS variables definition inside curly braces

Curly braces like that in JavaScript define a block. They can be used to contain scope if a variable is initialised using either let or const, but since the variable in your example is initialised using var, they don't actually do anything (unless there's a statement in the preceding line like an if or while etc.).

Just going by the code you've given us, I think it's a mis-interpretation of code or a mis-understanding of JavaScript by the developer. To contain scope in JavaScript using var variables, you'll need to write closure like this:

function mainFunction() {

  var foo = new objFoo();

  foo.name = "fooname";
  foo.desc = "foodesc";

  // some instructions here

  (function () {

    var bar = new objBar();

    bar.name = foo.name;
    bar.desc = foo.desc;

    // some other instructions here

  }());

  return(foo);

}

What does ${} (dollar sign and curly braces) mean in a string in JavaScript?

You're talking about template literals.

They allow for both multiline strings and string interpolation.

Multiline strings:

console.log(`foobar`);// foo// bar

---

Related Topics