66

I found this in a jQuery file:

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

What do the curly braces do?

SetFreeByTruth
  • 819
  • 8
  • 23
Mouse Hello
  • 915
  • 1
  • 7
  • 12

10 Answers10

71

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.

The Alpha
  • 143,660
  • 29
  • 287
  • 307
  • 1
    There is no good reason in creating a global variable for this purpose though. – ThiefMaster Mar 14 '12 at 09:31
  • 7
    Thanks and it was only for an example to make it clear to OP. – The Alpha Mar 14 '12 at 09:33
  • 12
    this is a question about _syntax_ and hence there absolutely exists brilliant reason in creating a variable for this purpose. In fact, perhaps the answer might want to include something along the lines of `myObj.varOne` takes the value of `'One'` – lol Jul 08 '13 at 16:57
18

The curly braces in the code you've shown define an object literal

Emoticon
  • 26
  • 1
  • 5
Rafael
  • 18,349
  • 5
  • 58
  • 67
  • But why does OP have 'float':'right' instead of float: 'right'? Like the link you asserted. – Ke Ke Jan 06 '20 at 12:29
  • 1
    @KeKe both syntaxes are valid. The [language specification](https://es5.github.io/#x11.1.5) allows to define object property names using numeric literals, **string** literals (like in OP's example) and [identifier names](https://es5.github.io/#x7.6) (like in the Mozilla Developer Portal). The word `float` fulfills all syntax requirements of an identifier name, so quotes can be ommited. – Rafael Jan 07 '20 at 20:05
  • 1
    @KeKe also please keep in mind, that `float` *was* a reserved word in ECMAScript 3. In the past (before ECMAScript 5 spec got released) [some browsers](http://kangax.github.io/compat-table/es5/#test-Object/array_literal_extensions_Reserved_words_as_property_names) didn't allow reserved words as object property names without using quotes. Also some tools (e.g. [YUI Compressor](https://stackoverflow.com/a/18533285/80720)) failed on such code. – Rafael Jan 07 '20 at 20:15
12

This is the top search engine result for "javascript braces". As such it's worth mentioning that braces in JavaScript can be used for:

Markus R
  • 5,572
  • 1
  • 14
  • 9
  • But what is this, the inner one (In Quasar - Vuex documentation): `const Store = createStore({ modules: { showcase }, })` – mirek Nov 02 '21 at 14:35
  • Object destructuring. `{showcase}` becomes `{"showcase":showcase}` to comply with the [Vuex API](https://vuex.vuejs.org/api/#modules). Proof: `{showcase}["showcase"] === showcase` – Markus R May 25 '22 at 07:25
  • "code block" is important, and not mentioned in any other answer. Can you add links to all three ? Maybe [Object initializer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer) and [code block](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block) ? – kca Mar 11 '23 at 22:37
9

In javascript curly braces are used for several purposes.

I your case these are used to create a key-value pair.

In others cases curly braces are used to combine a set of statements in a block. And sometimes they are used to create objects like var abc = { "a": 1, "b": 2 };

me_digvijay
  • 5,374
  • 9
  • 46
  • 83
8

It's an object literal.

var x = {'float': 'right'} is the nicer/shorter form of var x = new Object(); x.float = 'right';

ThiefMaster
  • 310,957
  • 84
  • 592
  • 636
5

Basically the curly braces {} are the another way for creating objects in javascript. This is equivalent to the "new Object()" syntax.

clklachu
  • 951
  • 1
  • 7
  • 19
4

curly braces identify an Object like so:

timObject = {
    property1 : "Hello",
    property2 : "MmmMMm",
    property3 : ["mmm", 2, 3, 6, "kkk"],
    method1 : function(){alert("Method had been called" + this.property1)}
};

in jQuery they are used to provide an Object with options for your method. You could also write your code like so xxx.css("width","10px").css("font-size","30px"); But passing it an Object makes it faster and more readable 

xxx.css({"width":"10px","font-size":"20px"});
mas-designs
  • 7,498
  • 1
  • 31
  • 56
4

Creates an object.

var myObject = {"element" : "value"};
alert(myObject.element); // Would alert: "value"
jchavannes
  • 2,440
  • 1
  • 26
  • 15
4

That is an object literal

An object literal is a list of zero or more pairs of property names and associated values of an object

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
-1

They encapsualte the css attributes in this example.

Normally curly brackets represent a function or an encapsulated piece of code that needs to be executed as one.

beaumondo
  • 4,862
  • 7
  • 29
  • 42