Only jQuery function syntax works in specific scenario

Question

Take a look at the anonymous jQuery function from the jfiddle snippet below. There are other libraries as external references to this jfiddle, so I'm just guessing this is jQuery syntax.

http://jsfiddle.net/LEt4Q/12/

Code snippet:

$(function() {

    var canvas = new draw2d.Canvas("gfx_holder");
    var x = 20,
        y = 20;
    addArrowToConnection();
    injectSetPosition();
    var previousRec, newRec;
    for (var i = 1; i <= 64; i++) {
        newRec = addRec(canvas, i, x, y);

        if (i / 8 == Math.floor(i / 8)) {
            y = y + 80;
            x = 20;
        } else {
            x = x + 80;
        }

        if (previousRec != null && newRec != null) {
            var conn = new draw2d.Connection();

            conn.sourcePort = previousRec.port;
            conn.targetPort = newRec.port;
            var label = new draw2d.shape.basic.Label({
                text: "Label"
            });
            label.setColor("#0d0d0d");
            label.setFontColor("#0d0d0d");
            label.setStroke(0);
            var arrow = new draw2d.decoration.connection.ArrowDecorator(10, 6);
            conn.setTargetDecorator(arrow);
            conn.setRouter(new draw2d.layout.connection.DirectRouter());
            conn.add(label, new draw2d.layout.locator.ParallelMidpointLocator());
            canvas.add(conn);
        }

        previousRec = newRec;
    }

});

All of the other functions within this jfiddle are using one of the JavaScript standard function notations (var functionName = function() {} vs function functionName() {}) except the one above. If you try replacing the syntax with the other three notations, the code doesn't work. What is significant about this notation? Why does only the last syntax work?

var fun = function() { ... }  // doesn't work
function fun() { ... }  // doesn't work 
(function() { ... })();  // doesn't work
$(function() { .. });  // works!!!!!!!!!!!!!!!

This notation is for jQuery and is the equivalent of `$(document).ready(function() {` which says "When the document has fully loaded, execute the following" — DevlshOne, Sep 08 '14 at 19:46
+ 1 for the comment and because you're a Packer fan! I live in Wisconsin! — MacGyver, Sep 08 '14 at 20:33
I'll take the +1 but the "G" is for University of Georgia - not Green Bay. ;) — DevlshOne, Sep 08 '14 at 23:06

score 3 · Accepted Answer · answered Sep 08 '14 at 19:44

3

Because they are not the same thing. You are confusing the shorthand for the ready event in jQuery, and an IIFE:

$(document).ready(function(){})

Is the same as:

$(function(){})

But it is not the same as:

(function(){}())

The latter is an immediately invoked function expression; it has no relation to the ready event. It is simply a function that executes itself, for the purpose of creating a closure.

answered Sep 08 '14 at 19:44

elclanrs

85,039
19
126
159

Is $(document) syntax specific to jQuery as well? – MacGyver Sep 08 '14 at 19:51
`$ === jQuery`, so it's the same as `jQuery(document)`. The dollar sign is no special syntax, it's a valid variable name. – elclanrs Sep 08 '14 at 19:52
So I guess jQuery's implementation is a little more complex than .. window.onload = function() { .. } depending on which browser you're in ..... http://stackoverflow.com/questions/1795089/how-can-i-detect-dom-ready-and-add-a-class-without-jquery – MacGyver Sep 08 '14 at 19:59

score 2 · Answer 2 · answered Sep 08 '14 at 19:44

This is not a syntactic issue. If you call the global jQuery function ($) and pass it a function, it means exactly the same thing as

$(document).ready(function() { ... });

In other words, the setup you posted makes that function invocation be delayed until the browser has finished assembling the DOM. The function is probably in the <head> of your page (or imported there), so it won't work unless it runs when the DOM is ready because it wouldn't otherwise be able to locate that "gfx_holder" element.

score 1 · Answer 3 · answered Sep 08 '14 at 19:51

var fun = function() { ... }  // doesn't work

This syntax defines variable to refer to function object, does not call the function.

function fun() { ... }  // doesn't work

This sytax defines a function, does not call the function

(function() { ... })();  // doesn't work

This syntax defines an anonymous function and calls it immediately, before the DOM is ready

Only jQuery function syntax works in specific scenario

3 Answers3