I have this fragment of code from a book I am reading. And want to understand what $({}) means and what is its use exactly.

I tried searching on several search engines and even on SO. $({}) wasn't a search-friendly term.

    var Events = {
       bind: function(){
          if ( !this.o ) this.o = $({});
          this.o.bind.apply(this.o, arguments);
       },

       trigger: function(){
          if ( !this.o ) this.o = $({});
          this.o.trigger.apply(this.o, arguments);
       }
    };

I did find a similar question about $([]) but I don't think it is quite the same thing.

I have this fragment of code from a book I am reading. And want to understand what $({}) means and what is its use exactly.

I tried searching on several search engines and even on SO. $({}) wasn't a search-friendly term.

    var Events = {
       bind: function(){
          if ( !this.o ) this.o = $({});
          this.o.bind.apply(this.o, arguments);
       },

       trigger: function(){
          if ( !this.o ) this.o = $({});
          this.o.trigger.apply(this.o, arguments);
       }
    };

I did find a similar question about $([]) but I don't think it is quite the same thing.

• javascript
• jquery

• Hey @Robin Maben, your edit just put the answer in the title ! I'm not sure you did wrong, so I won't revert, but I wonder. – Denys Séguret Commented Sep 6, 2012 at 17:19
• It's a more likelier search term with somebody asking a why/what. Hence, the edit. Searching what does mean in jquery brings up the other question to which this one is marked as a "related question". So I thought both titles need not be obscure since one would lead to another anyway. Am I making sense? :) – Robin Maben Commented Sep 6, 2012 at 17:29

2 Answers 2

You're just wrapping a basic javascript object as a jQuery one.

From jquery documentation :

Working With Plain Objects

At present, the only operations supported on plain JavaScript objects wrapped in jQuery are: .data(),.prop(),.bind(), .unbind(), .trigger() and .triggerHandler(). The use of .data() (or any method requiring .data()) on a plain object will result in a new property on the object called jQuery{randomNumber} (eg. jQuery123456789).

// define a plain object
var foo = {foo:'bar', hello:'world'};

// wrap this with jQuery
var $foo = $(foo);

// test accessing property values
var test1 = $foo.prop('foo'); // bar

// test setting property values
$foo.prop('foo', 'foobar');
var test2 = $foo.prop('foo'); // foobar

// test using .data() as summarized above
$foo.data('keyName', 'someValue'); console.log($foo); // will now contain a
                                                      // jQuery{randomNumber}
                                                      // property

// test binding an event name and triggering
$foo.bind('eventName', function (){
    console.log('eventName was called');
});

$foo.trigger('eventName'); // logs 'eventName was called'

Should .trigger('eventName') be used, it will search for an 'eventName' property on the object and attempt to execute it after any attached jQuery handlers are executed. It does not check whether the property is a function or not. To avoid this behavior, .triggerHandler('eventName') should be used instead.

$foo.triggerHandler('eventName'); // also logs 'eventName was called'

Here's a (not really useful) example :

​var a =$({});
a.data('b', 3);
console.log(a.data('b')); // this prints 3

If you keep your object created with $({}), you may use it as callee for data, bind, and so on. This is probably the minimal non DOM keepable jquery object you can make.

this really has more to do with javascript syntax than jQuery.

{} is for objects like so:

 //makes an empty object
 var myObject = {}; 

 //makes an object containing 'foo' and 'bar' as 'firstItem' and 'secondItem'
 var myObject = { firstItem : foo, secondItem : bar }; 

[] is for arrays like so:

 //makes a blank array
 var myArray = [];

 //makes an array containing 'foo' and 'bar' at postions 0 and 1
 var myArray = [foo, bar];

() is for functions (which jQuery generally is). This is abit more plicated because it can have multiple meanings.

 //running an existing function
 myFunction();

 //running an anonymous function
 (function(){  
    //doSomething }
 )();

 //running a function with an argument
 myFunction(arg);

jQuery is generally just a function called $ instead of myFunction so...

 //runs jQuery as a function on 'arg'
 $(arg);

The argument you pass jQuery can be almost anything. If you pass it a string like '#myDiv' jQuery will use that argument as a selector to get an element from the html. If you pass it something else like an object or an array, it can still do some things with it like: http://api.jquery./jQuery/ as @dystroy said.

So $({}) is the same as $(myBlankObject), for example:

var myBlankObject = {};
$(myBlankObject);
//is the same as
$({});

and

var myObjectWithStuff = { firstItem :  foo, secondItem : bar };
$(myObjectWithStuff);
//is the same as
$({ firstItem :  foo, secondItem : bar });

$('selector') works. $({'selector'}) or $(['selector']) does not, because you are not passing jQuery a string, but another data type.