0

What's the difference (if any) between:

$(document).ready(function() {
    $(function() {
        $("#selector").doSomething();
    });
});

and:

$(document).ready(function() {
    $("#selector").doSomething();
});

I'm asking because I would ordinarily use the second bit of code, but the jQuery Mobile website gave the first bit of code as the example.

Brad
  • 1,019
  • 1
  • 9
  • 22
  • At the first example is not necessary to wrap function in `jQuery()` – guest271314 Oct 09 '16 at 21:50
  • `$(function(){`…`})` is actually the same as `$(document).ready(function(){`…`})`, as far as I know; so it doesn’t really make sense to nest them and isn’t necessary. – Sebastian Simon Oct 09 '16 at 21:51
  • Thanks @guest271314, so the second example is perfectly valid to use? – Brad Oct 09 '16 at 21:52
  • Yes. See http://api.jquery.com/jquery , http://api.jquery.com/ready – guest271314 Oct 09 '16 at 21:53
  • @Brad perhaps you could provide a link or reference to what you've seen on the jQuery Mobile website? – Alnitak Oct 09 '16 at 21:56
  • I have a feeling you were looking at an IIFE inside the `.ready()` callback. Like Alnitak said, a link would be good. –  Oct 09 '16 at 21:57
  • This is a great example of why good API designers avoid "two ways to do something". It just adds confusion. –  Oct 09 '16 at 21:58
  • Thanks all, rereading [the jQuery documentation here](http://api.jquery.com/ready/), it looks as though the `$(document).ready(function() {` call is being deprecated in favour of `$(function() {`. There you go! – Brad Oct 09 '16 at 21:59
  • @squint https://github.com/jquery/jquery/issues/3025 – guest271314 Oct 09 '16 at 21:59
  • @guest271314: That's a good move. I think they should scrap both behaviors and just do `$.ready(fn)`, so that the meaning of the code is clearer and the `$` function isn't so heavily overloaded, which is another design problem, IMO. –  Oct 09 '16 at 22:01
  • 1
    it would be good if they could get rid of `.click` et al while they're at it. – Alnitak Oct 09 '16 at 22:11
  • It makes me sad nobody is mentioning the scope of both examples, jquery plugins are wrapped in self executing anonymous functions to let them have their own scope with their own variables. – seahorsepip Oct 09 '16 at 22:11
  • 1
    @seahorsepip 1. there's no plugins here, just doc ready handlers, 2. there's no variables being used either – Alnitak Oct 09 '16 at 22:11
  • 1
    @Alnitak What's wrong with ``.click``? It's a nice shorthand for ``.on("click")`` which is only needed for multiple events and/or event delegation in most cases. – seahorsepip Oct 09 '16 at 22:12
  • 1
    @seahorsepip because it's also overloaded as a means to _trigger_ a click event. IMHO, there should be _one_ method to register events (`.on`) and just _one_ to trigger them (`.trigger`) – Alnitak Oct 09 '16 at 22:14
  • 1
    @Alnitak jQuery is a language with their own standards, they might be different from pure javascript coding standards, but that's why it's a framework in the first place nothing wrong about creating your own coding standards as long it's kept consistent and it is(``.click``, ``.submit`` etc). – seahorsepip Oct 09 '16 at 22:18
  • 1
    @seahorsepip it's poor API design. Someone reading code shouldn't have to examine the function parameters to determine whether it's registering or triggering an event handler. Fortunately the jQuery developers do seem to be making some efforts to clean this up. – Alnitak Oct 09 '16 at 22:21
  • 1
    @Alnitak ``Poor API design`` is totally opinion based, there is no such thing as a true coding standard. The only thing most developers can at least agree on is that an API without documentation is a poor API. – seahorsepip Oct 09 '16 at 22:24
  • @Alnitak Removing `.click` would make all previous of versions obsolete and updating jQuery to the newest version work break all previous working code. I'm really doubtful that would be a good thing. Also that is exactly how native JavaScript also functions. So considering both of those no it would not be *"good"*, it would be a terrible idea to just remove it. Rather they can just discourage it's use and recommend a different method and still retain support. – Spencer Wieczorek Oct 10 '16 at 01:05
  • @SpencerWieczorek jQuery has a well-established mechanism for deprecating functions, and it would be far from the first time they'd have made a change that breaks existing code. As for "exactly how native JavaScript also functions" - please elaborate - off the top of my head I can't think of a single standard ES5 or DOM method that has wildly different behaviour based on the function parameters supplied. – Alnitak Oct 10 '16 at 08:40

3 Answers3

-1

All $(function() { ... }) is is short-hand for $(document).ready(function() { ... }), there is no need to and is redundant to use them as in your first code snippet.

Spencer Wieczorek
  • 21,229
  • 7
  • 44
  • 54
-1

According to the jQuery documentation here:

The .ready() method is typically used with an anonymous function:

$( document ).ready(function() {
  // Handler for .ready() called.
});

Which is equivalent to the recommended way of calling:

$(function() {
  // Handler for .ready() called.
});
Brad
  • 1,019
  • 1
  • 9
  • 22
-2
$(document).ready(function() {
    $(function() {
        var a = 5;
    });
    alert(a); //Outputs an is undefined error
});

Compared with:

$(document).ready(function() {
    var a = 5;
    alert(a); //Shows an alert with the number 5
});

In the first code example a is undefined because it's in a different scope, in the second code example a is 5because it's in the same scope.

Both examples in the OP have the same result but differ in the defined scope which results in above example in different results but in other cases(like the OP) in the same result depending on the code inside the scope(s).

seahorsepip
  • 4,519
  • 1
  • 19
  • 30
  • 1
    and how is this relevant to the question? – Alnitak Oct 09 '16 at 22:12
  • @Alnitak It's relevant since ``.doSomething`` might refer a variable in either scope, the question asked is about the difference between the two examples which NOBODY answered yet, instead everyone says they're the same and just different notation which is false. – seahorsepip Oct 09 '16 at 22:15
  • 1
    No, `.doSomething` is clearly a jQuery plugin method, and not any sort of "variable in the scope". – Alnitak Oct 09 '16 at 22:22
  • @Alnitak And you know what ``.doSomething`` does? Besides the fact that there is no denying about the fact that there is a difference in scopes in the examples. He asks about the difference in the code examples and I answer (correctly) that there is a difference in the scopes instead of (incorrectly) that both examples are the same. The same result is not equal to the same code. – seahorsepip Oct 09 '16 at 22:30
  • 1
    @seahorsepip: I don't see any indication that the OP is confused about scope. There are other differences too, but nobody is touching on them because it's beyond the point of the question. If you're suggesting that it would be a way to create a new variable scope, then yes of course it would work, but why would you use a "ready" callback for that? –  Oct 09 '16 at 22:36