77

Why are we using ({ })?

Is it delegate?

What does it mean to use this syntax?

What are we wrapping with it?

For example:

$.ajaxSetup ({ // <-- THIS
    error: fError,
    compelete: fComp,
    success: fSucc
}); // <-- AND THIS
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
uzay95
  • 16,052
  • 31
  • 116
  • 182
  • 1
    http://stackoverflow.com/questions/1509535/javascript-false-and-false/1509664#1509664 is a seemingly irrelevant question, but with a relevant answer to one thing you *may* be tripping on. – Crescent Fresh Apr 07 '10 at 19:07

5 Answers5

158

{} is object notation in JavaScript. For example:

$('selector').plugin({ option1: 'value' });

In this case you're passing an object containing your settings to the plugin. The plugin can deal with this as a object, whatever it's referenced as, for example:

settings.option1 //the option you passed in.

Of course it has a lot more uses, but this is the most common example in jQuery. The same is true for the .animate(), $.ajax(), .css() functions, etc. Anything that takes properties generally uses this format.


As requested, some other examples:
Any object inside the passed object can be a function as well, not only properties, for example:

$("<input>", {
  type: "text",
  focusin: function() { alert("Hi, you focused me!"); }
});    

This would set the focus event of that input to have an alert. Another is extending an object, adding properties to it, like this:

var person = { first_name: "John" };
$.extend(person, { last_name: "Smith" });
//equivalent to: 
person.last_name = "Smith";
//or:
person["last_name"] = "Smith";

Now person has the last_name property. This is often used by plugins as well, to take the default settings, then merge any settings you passed in, overwriting with any settings you specified, using defaults for the rest.

Why are we using it? Well...that's how JavaScript works, and in the jQuery spirit: it's an extremely terse and flexible way to pass information.

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • 4
    I'd say the "why" is it allows you to easily pass a variable number of arguments to a function. (That's the phrasing that makes the most sense to me.) – Annika Backstrom Apr 07 '10 at 18:07
  • 5
    Very good answer, but if you add some example about other usages, it will very very good. – uzay95 Apr 07 '10 at 18:09
  • @uzay95 - Added a few more examples off the top of my head, there are a lot of cases for use out there. – Nick Craver Apr 07 '10 at 18:19
  • 1
    Very very very good answer... I've learned a lot of things. Thank you so much. – uzay95 Apr 07 '10 at 18:36
  • the example with focusin doesn't work, or I can't make it to work? – Sotiris Jul 10 '11 at 10:50
  • @Sotiris - which version of jQuery are you using? The [`$(html, props)` overload](http://api.jquery.com/jQuery/#jQuery2) was added in 1.4, so it won't be available before then. Also if you have any crazy plugins overriding normal event behavior...anything could happen there. – Nick Craver Jul 10 '11 at 10:55
  • @NickCraver, may I request you to have a look at a jquery question on a different topic here : http://stackoverflow.com/questions/13137404/jquery-find-div-class-name-at-a-certain-position-while-scrolling ? – Istiaque Ahmed Oct 31 '12 at 07:22
  • The sentence "This is often used by plugins as well, to take the default settings, then merge any settings you passed in, **overwriting any settings you specified**, using defaults for the rest." seems to be worded poorly. Specifically, the part in bold sounds like the plugin is overwriting the settings you provide. May I suggest changing the wording to: "This is often used by plugins as well for configuration options; they declare default settings and then merge in any user-specified settings to overwrite the defaults." – Jesse Webb Mar 06 '14 at 19:33
  • @JesseWebb Thanks, it was indeed backwards, fixed! – Nick Craver Mar 06 '14 at 19:35
10

I mean, what we are wrapping it ?

No. That's JavaScript object notation (JSON). In your example you're invoking the function ajaxSetup with an object whose properties are:

error: fError,
compelete: fComp,
success: fSucc

For instance, to create an "user" object you could write:

user = { 
    "name":"Oscar", 
    "lastName":"Reyes"
};

And then use one of its attributes:

alert( a.name );

Shows: Oscar

What you see there (in your code) is the creation of an object and passing it as an argument.

It would be equivalent to:

var setUpInfo = {
    "error": fError,
    "compelete": fComp,
    "success": fSucc
};  

$.ajaxSetup( setUpInfo );
OscarRyz
  • 196,001
  • 113
  • 385
  • 569
  • 18
    It's actually *not* JSON, which requires member names to be quoted. It is perfectly valid Javascript, of course. Also, your user object should use `:` instead of `=` – friedo Apr 07 '10 at 18:13
  • 2
    It's JavaScript object literal notation but not JSON. As http://json.org says - "JSON is based on a subset of the JavaScript Programming language. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others" – Russ Cam Jul 10 '10 at 22:40
7

It is either a JavaScript object literal or more specifically JSON when it comes to sending parameters over Ajax. JSON is subset of JavaScript object literals.

For example:

// This is JSON data sent via the Ajax request (JSON is subset of JavaScript object literals)
var json = {id: 1, first_name: "John", last_name: "Smith"};

// This is a JavaScript object literal, it is not used for transfer of data so doesn't need to be JSON
var jsol = {type: 'POST', url: url, data: json};

$.ajax(jsol);

Please read more about it here:

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Ivo Sabev
  • 5,230
  • 1
  • 26
  • 38
  • 6
    It'd be more accurate to say it's an object written with object literal syntax than "a JSON." – Jimmy Apr 07 '10 at 18:07
  • 9
    It is a JavaScript object literal. It isn't JSON since it doesn't conform to JSON syntax (which is a **subset** of JavaScript object literal syntax). – Quentin Apr 07 '10 at 18:21
6

The question was about the notation "({ })".

In this context, the parentheses "(...)" following an expression, such as $.ajaxSetup, causes the function specified by the expression to be called.

The expression inside the parentheses (which could be a comma separated list of expressions) results in a value (or a list of values) that is the argument(s) passed to the function.

Finally, when "{...}" is used in an expression context, it constructs an object with the name-value properties specified. This is like JSON but it is, more generally, any legal JS object literal.

dlaliberte
  • 3,250
  • 2
  • 25
  • 22
4

If you mean in this context:

$("#theId").click( function() { /* body here */ } );

Then the ( function() {}) is an anonymous function. But without an example, can't be sure that's what you mean.

Armstrongest
  • 15,181
  • 13
  • 67
  • 106
  • This is like delegate function isn't it? – uzay95 Apr 07 '10 at 18:08
  • 2
    simliar. an anonymous function is essentially an "inline function" that you don't plan on reusing. You can use an anonymous function anywhere a delegate is expected. That's why it works here. the click function expects a delegate ( you would likely use a delegate function if you're planning on reusing the function elsewhere or the function isn't really simple ) – Armstrongest Apr 07 '10 at 18:15