problem

[1UnitedPower]

Meine Herren!

Was ist der Unterschied zwischen

function whatever() {}

und

$(function() {});

Ich drösel das mal noch weiter auf:

a();  
  
function a(){  
   console.log('a invoked');  
}

b();  
  
(function b(){  
   console.log('b invoked');  
})

Augenscheinlich sehr ähnlich, aber der Teufel liegt im Detail.
Das erste Skript schreibt, wie erwartet, 'a invoked' auf die Konsole.
Das zweite Skript wirft einen Fehler: 'Uncaught ReferenceError: b is not defined'

Obwohl die Skripte sich mehr als ähnlich sehen haben wir es hier mit zwei grundsätzlich verschiedenen Konstrukten zu tun. a ist ein „function statement“, b dagegen ein „function expression“, genauer ist b sogar ein „named function expression“.

Es existieren noch weitere statements und expressions in JavaScript. if, for, while, switch, var sind alles statements. 42, 'foo', 1337 + 1337, document.write() dagegen sind expressions. Als Faustregel kann man sich merken, dass alles was einen Wert produziert ein Expression ist.

function-statements und function-expressions verfügen beide über den Zweck wiederverwendbare Code-Einheiten zu schaffen. Der Unterschied ist nun folgender: function-statements werden vom JavaScript parser sozusagen vor eingelesen und können deshalb auch schon aufgerufen werden, bevor sie im Quellcode definiert sind. Wie unser Test gezeigt hat geht das mit einem function-expression nicht. Tatsächlich haben wir bei unserem Beispiel auch nach dem function-expression nicht die Möglichkeit die Funktion aufzurufen, was uns natürlich zu der Frage bringt wozu man function-expression überhaupt braucht. Nun ja, wir können die expression-Variante zum Beispiel nutzen, um Methoden auf einem Objekt zu definieren:

foo.bar = function(){  
   console.log('foo.bar invoked');  
};

Oder wir können anonyme Funktionen definieren und sie als Callback-Funkktion an andere Funktionen übergeben:

[1,2,3].reduce( function( previsous, next){  
   return previous + next;  
},0);

Hier zeigt sich eine weitere Besonderheit der function-expressions: Sie müssen im Gegensatz zu statements keinen Namen haben. Müssen nicht, dürfen aber, das ist zum Beispiel nützlich, wenn eine Funktion sich rekursiv selbst aufrufen können soll.

Funktionen sind bis dato auch die einzige Möglichkeit einen neuen Gültigkeitsberecih (scope) für Variablen zu schaffen, deshalb benutzt man häufig einen function expression und ruft die Funktion sofort auf (sogenannter Immediately invoked function expression [IIFE]):

(function (){  
   var local = 'foo';  
   // ...  
})();

Die runden Klammern um function(){} teilen dem JavaScript-Interpreter mit, dass es sich hier um einen function-expression und nicht -statment handelt. Die folgenden Klammern () rufen die Funktion dann einfach nur noch auf.

Wie du an anderer Stelle im Thread schon richtig erkannt hast, möchte man aber auch häufig auch mit dem Wert eines Funktions-Aufrufs weiterrechnen, was auch nicht weiter schwierig ist:

var five = (function(){ return 5;})();  
var sumOfOneAndTwo = (function(a){ return 1 + a; })(2);  
// Besonders cool: Funktionen können Funktionen zurückgeben:  
var addFive = (function(){  
   return function ( a ) {  
      return a + 5;  
   };  
});  
var seven = addFive( 2 );

Sogenannte Modul-Loader machen erheblichen Gebrauch von dieser Technik.

Und nun zurück zu deinem eigentlichen Problem:

$(function(){  
  
});

Hier wird also eine anonyme Funktion an die jQuery-Funktion übergeben. jQuery nimmt die Funktion und führt sie automatisch aus, wenn das load-Event der Seite eintritt, es ist also nur eine andere schreibweise für:

$(document).ready( function() {  
  
});  
  
// oder auch mit einem statement  
$(document).ready( readyCallback );  
  
function readyCallback(){  
  
}