57

I found this in a jQuery file:

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

What do the curly braces do?

SetFreeByTruth
  • 793
  • 7
  • 23
Mouse Hello
  • 815
  • 1
  • 7
  • 11

11 Answers11

65

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
  • 131,979
  • 25
  • 271
  • 286
  • 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
17

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

Rafael
  • 17,823
  • 5
  • 52
  • 65
  • 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
7

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,087
  • 5
  • 41
  • 78
6

It's an object literal.

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

ThiefMaster
  • 285,213
  • 77
  • 557
  • 610
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,160
  • 1
  • 27
  • 53
4

Creates an object.

var myObject = {"element" : "value"};
alert(myObject.element); // Would alert: "value"
jchavannes
  • 1,930
  • 19
  • 12
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
  • 800,325
  • 104
  • 1,079
  • 1,205
3

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

clklachu
  • 883
  • 1
  • 7
  • 19
2

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
  • 4,943
  • 1
  • 11
  • 5
2

Creates Object Literal.

Read more if you want here: http://www.dyn-web.com/tutorials/obj_lit.php

Shahar Galukman
  • 39
  • 5
-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,359
  • 7
  • 26
  • 39