Empty curly braces inside jQuery

Question

In the snippet, $({}).queue(function(next){}) what does $({}) represent? Why do people use this form?

I got the code from this answer here on SO.

Answer 1

Updated Answer

Your comment below that you're referring to the code in this answer changes things markedly.

The code in that answer:

$(document)
  .queue(callMe1)
  .queue(callMe2);

...and then there's a comment suggesting using {} instead of document:

$({})
  .queue(callMe1)
  .queue(callMe2);

You would do that to set up a chain of calls, where subsequent calls in the chain don't occur until previous ones say they're done. What they do can be synchronous or asynchronous. It's kind of an early form of promises.

Let's take an example: Suppose I want to do three things, one after another, and each of those things might or might not do something asynchronous, like an animation. We could do this:

$({}).queue(theFirstThing)
     .queue(theSecondThing)
     .queue(theThirdThing);

...and later functions wouldn't get called until the earlier functions said they were done.

Example:

$({}).queue(theFirstThing)
     .queue(theSecondThing)
     .queue(theThirdThing);

function theFirstThing(next) {
  // What I do is asynchronous: Fade out the a1 element,
  // then call the next function in the chain if any
  $("#a1").fadeOut("slow", next);
}
function theSecondThing(next) {
  // What I do is synchronous
  $("<p>Hi there</p>").appendTo(document.body);
  
  // Chain to next if any
  next();
}
function theThirdThing(next) {
  // What I do is asynchronous: Fade out the a2 element,
  // then call the next function in the chain if any
  $("#a2").fadeOut("slow", next);
}

<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

---

Original Answer:

The documentation tells us:

jQuery( object )

object
Type: PlainObject
A plain object to wrap in a jQuery object.

E.g., it wraps a jQuery instance around a plain object. We're used to jQuery instances being wrapped around one or more DOM elements, but they can be wrapped around other things as well.

Then they're doing queue on the resulting jQuery object:

.queue( [queueName ], callback )

queueName
Type: String
A string containing the name of the queue. Defaults to fx, the standard effects queue.

callback
Type: Function( Function next() )
The new function to add to the queue, with a function to call that will dequeue the next item.

So that tells us what it's doing: Wrapping a jQuery object around a plain object, then calling queue to put something in the default animation queue for that jQuery object, even though there are no elements in it to animate.

Why do people use this form?

I've never seen that used. I can't think of any reason to use it as shown in your question, it just ends up calling the function immediately, during the queue call, as we can see here:

$({}).queue(function(next){
  snippet.log("Function called");
  next();
});
snippet.log("queue call complete");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Answer 2

I've used $({}) before when instantiating a variable that will later be replaced with a real JQuery object, so that in case of an unexpected result, the original value is still a valid JQuery object. It may not really be necessary in that case.

Upon inspection, one major difference between $() and $({}) is the value of .length. 0 and 1, respectively. Good question and conversation. +1