In dieser Rubrik möchte ich euch gerne in einfachen Worten bestimmte Sachen der Programmiersprache JavaScript näher bringen, denn viele reduzieren ihre Kenntnisse leider nur noch auf Frameworks wie z.B. jQuery und wissen fast nichts über die Feinheiten der Sprache selbst.
In diesem Artikel geht es um: void, undefined und null.
undefined, null
Diese beiden Typen sind schnell erklärt, deshalb ziehe ich diese eben vor, dann fällt auch void ein wenig leichter.
undefined
steht für „Nicht definiert“, was soviel heißt wie „Das Objekt wurde nicht definiert, halt also keinen Wert oder Typen“.
Spricht man ein undefiniertes Objekt lesend an (man möchte den Wert wissen), wird der Browser dir den Sachverhalt meist recht unsanft mitteilen in dem er dir eine „Exception“ vor die Füße wirft und nachfolgenden Code einfach ignoriert.
Weist man einer zuvor definierten Variablen der Wert undefined zu, entspricht das einem delete – das Objekt ist ist dann zwar noch im aktuellen Stack vorhanden und der Browser wird dir nicht auf die Finger hauen wenn du es ansprichst, doch sein Wert ist weg und der refcount (die Anzahl an Referenzen zu seinem vorherigem Wert) wird um 1 verringert.
Weist man einer Variablen über das Schlüsselwort var den „Wert“ undefined zu, wird die Variable zwar deklariert, aber nicht definiert – was auch passieren würde wenn keinerlei Zuweisung erfolgt.
Beispiel:
var a; // a ist undefined var b = undefined; // entspricht `a`
null
sieht das Ganze ein wenig lockerer. Es steht für „Das Objekt ist zwar definiert, hat aber (noch?) keinen Wert.“.
Bitte vergesst nicht, dass null (anders als undefined) selbst ein Objekt darstellt.
typeof undefined; // undefined typeof null; // object
Kommen wir also zu
void
Anders als undefined und null ist void KEIN „Wert“ den man anderen Variablen zuweisen kann, sondern ein Sprachkonstrukt.
Mit diesem Schlüsselwort verwirft man das Ergebnis eines Ausdrucks und erzwingt als Rückgabe undefined, was bei allen Browsern das gleiche Verhalten auslöst:
„Ich weiß nicht was ich damit machen soll, also mach ich gar nichts.“
Ein Beispiel:
var i = 1; var o = ++i; alert(o); // 2 alert(i); // 2
Der Ausdruck ++i hat also nicht nur den Wert der Variable i um 1 erhöht, er hat diesen Wert auch zurückgegeben und in der Variable o gespeichert. Im Grunde genau das, was man erwarten würde.
Jetzt das Gleiche noch einmal mit dem Schlüsselwort void:
var i = 1; var o = void ++i; alert(o); // undefined alert(i); // 2
Wie man sieht wurde durch ein Voranstellen des Schlüsselwortes void der Rückgabewert des Ausdrucks verworfen und mit undefined ersetzt. Der Ausdruck selbst, also ++i wurde aber ganz normal verarbeitet, wie man im Zweiten alert sehen kann.
Jetzt fragt sich der ein oder andere vielleicht, was genau der Sinn dahinter ist einen Rückgabewert zu verwerfen?
Das ist schnell erklärt:
Wenn man in die Adressleiste des Browsers über das javascript:-Präfix Code ausführt, nimmt dieser den Rückgabewert des Ausdrucks und versucht diesen im Fenster anzuzeigen. Ist aber kein Rückgabewert vorhanden, verfällt der Browser in das oben erwähnte „Ich mach einfach gar nichts“-Schema und verweilt im aktuellen Fenster.
Dieses Verhalten trifft auch auf alle Elemente oder Funktionen zu, die den Inhalt der Adresszeile (bzw. window.location.href) ändern wollen, also auch Links.
Beispiel:
<a href="javascript:var i = 1; ++i;">Klick mich</a>
Würde man diesen Link anklicken, dann würde der Browser zunächst den Ausdruck var i = 1; ++i; auswerten und anschließend versuchen diesen im aktuellen Fenster anzuzeigen. Das Ergebnis wäre eine einsame „2“ in einem sonst leeren Browserfenster.
Das wollen wir verhindern:
<a href="javascript:var i = 1; void ++i;">Klick mich</a>
Nun stößt der Browser nach dem auswerten des Ausdrucks auf ein undefined und macht, wie wir es erwartet haben, gar nichts mit dem Ergebnis.
Mit dieser Methode ist es also möglich, Code in der Adresszeile des Browsers auszuführen ohne anschließend auf eine andere Seite zu wechseln, was sonst im Normalfall geschehen würde.
Nutzt man dieses Verhalten in Bookmarks aus, so spricht man von einem „Bookmarklet“. Damit ist es möglich jeden beliebigen Code per klick auf einen Bookmark in der aktuellen angezeigten Seite auszuführen.
Ich würde euch gerne einen Link erstellen, mit dem Ihr das Ganze mal testen könnt, aber leider erlaubt WordPress keine javascript:-Links in Artikeln ohne entsprechende Plugins und Geöns.