Sprachelemente
Datentypen
JavaScript ist dynamisch typisiert. Das bedeutet, dass die Zuweisung von Werten an Variablen keinen typbasierten Einschränkungen unterliegt. Allerdings gibt es diverse Erweiterungen von JavaScript, die eine statische Typisierung optional beziehungsweise zwingend erfordern, zum Beispiel TypeScript von Microsoft.[43]
Aufgrund der dynamischen Typisierung ist der Datentyp keine Eigenschaft einer Variablen, sondern Laufzeit-bezogen die Eigenschaft ihres aktuellen Wertes (oder auch die Eigenschaft eines Literals). Der Datentyp eines Wertes lässt sich mit dem unären Operator typeof ermitteln.
Primitive Datentypen
Zu den primitiven Datentypen gehören Werte für Zahlen, Zeichenketten, boolesche Werte und Symbole. Zeichenketten haben den Typ String (typeof liefert "string"), numerische Werte den Typ Number (typeof liefert "number"), boolesche Werte den Typ Boolean (typeof liefert "boolean"). Ein weiterer, allerdings seltener gebrauchter primitiver Datentyp ist Symbol, der als Identifier (siehe auch Stichwort Symbol) fungiert (typeof liefert "symbol").
Ein Sonderfall ist der Typ Undefined mit undefined als einzigem Wert (typeof liefert "undefined").
Nicht primitive Datentypen
Funktionen sind kein primitiver Typ; typeof liefert "function". Für alle anderen Werte – reguläre Ausdrücke, Arrays und den Wert null inbegriffen – liefert typeof den Zeichenketten-Wert "object" zurück. Im Gegensatz zu anderen Programmiersprachen gibt es in JavaScript keine echten assoziativen Arrays.[44]
Mit den vordefinierten Konstruktorfunktionen String(), Number() und Boolean() erzeugte Objekte verhalten sich wie Werte der entsprechenden Datentypen – der typeof-Operator gibt jedoch "object" zurück. Solche Objekte werden als Wrapper-Objekte bezeichnet. Zum Datentyp Symbol existiert keine gleichnamige Konstruktorfunktion. Nachfolgend ein Beispiel für eine Variable und das entsprechende Wrapper-Objekt:
let variable = "Beispieltext";
// Die Funktion "alert" gibt das Ergebnis "string" in einem Fenster aus.
alert(typeof variable);
variable = new String("Beispieltext");
alert(typeof variable); // ergibt "object"
Umgekehrt werden Werte der primitiven Typen Number, Boolean und String bei Bedarf automatisch in Objekte der entsprechenden Konstruktorfunktion umgewandelt:
let variable = "Beispieltext";
alert(variable.length); // ergibt 12
Kontrollstrukturen
JavaScript kennt die üblichen Kontrollstrukturen. Sollen diese mehr als eine Anweisung enthalten, so muss ein in geschweifte Klammern eingeschlossener Block eingesetzt werden. Anweisungen werden mit einem Semikolon abgeschlossen. Dies ist aber in den meisten Fällen optional; durch die automatic semicolon insertion wird es meist automatisch ergänzt.
if-else (Bedingte Anweisung)
if (bedingung) {
anweisungen;
} else {
anweisungen;
}
Kurzschreibweise für bedingte Wertzuweisungen:
variable = bedingung ? wertWennWahr : wertWennFalsch;
switch-Kontrollstruktur
switch (variable) {
case wert1:
anweisungen;
break;
case wert2:
anweisungen;
break;
default:
anweisungen;
}
while-Schleife
while (bedingung) {
anweisungen;
}
do-while-Schleife
do {
anweisungen;
} while (bedingung);
for-Schleife
for (startausdruck; bedingung; iterationsausdruck) {
anweisungen;
}
for … in-Schleife
Mit dieser Anweisung werden alle eigenen und ererbten Eigenschaften eines Objektes durchlaufen, die das interne Attribut Enumerable aufweisen.[45] Dieses Attribut wurde in ECMA Script 5 eingeführt und ist für bestimmte eingebaute Eigenschaften (wie z. B. die Funktion toString des Prototyps Object) nicht gesetzt, es kann allerdings im Regelfall vom Benutzer gesetzt (und entfernt) werden.[46] Bei jedem Schleifendurchgang wird einer angegebenen Variable der Eigenschaftsname zugewiesen.
for (let eigenschaftsname in objekt) {
anweisungen;
}
for … of-Schleife
Diese Kontrollstruktur funktioniert wie eine for … in-Schleife, mit dem Unterschied, dass hier der angegebenen Variable nicht der Eigenschaftsname, sondern der Eigenschaftswert zugewiesen wird.[47]
for (let wert of objekt) {
anweisungen;
}
Variablen
Variablen sollten in JavaScript mit let oder var deklariert werden und sind dann innerhalb des Scopes gültig, in dem sie deklariert wurden, wobei let den Scope weiter eingrenzt als var.[48] Verwendet man Variablen ohne sie vorher explizit zu deklarieren, werden diese implizit als Eigenschaften des globalen Objekts (im Browser window) deklariert; dieses Verhalten kann man durch die Anweisung "use strict"; unterbinden. Eine Besonderheit von JavaScript ist das Hoisting von Variablen, das dafür sorgt, dass sämtliche in einem Codeabschnitt deklarierten Variablen und Funktionen bei der Abarbeitung automatisch direkt an den Anfang vorgezogen werden (nur die Deklaration, nicht aber deren Wertzuweisung).
Geltungsbereich von Variablen
Innerhalb von Funktionen oder als Funktionsparameter deklarierte Variablen haben eine lokale Gültigkeit; außerhalb von Funktionen deklarierte Variablen sind global gültig. Global bedeutet bei JavaScript in Browsern, dass derart deklarierte Variablen auf der ganzen Webseite und bei allen aktiven JavaScripts gültig sind. Da dies zu ungewollten Nebeneffekten mit anderen in der Seite eingebunden Scripts (wie Drittanbieter-Plugins, Web Analytics oder Werbebannern) führen kann, sollten globale Variablen so weit wie möglich vermieden werden.
let a, b; // explizite Deklaration einer globalen Variable
a = 1; // Definition einer Variable
console.log(a); // ergibt 1
c = 2; // implizite Deklaration ohne let - es entsteht keine Variable, sondern ...
console.log(c); // ergibt 2
console.log(window.c); // ... dem globalen Objekt (Window) wurde eine Eigenschaft zugewiesen
console.log(window.a); // Fehler
function foo(e) { // saubere Deklaration eines Funktionsparameters
let f, g = 5; // saubere Deklaration und Definition einer lokalen Variablen
console.log(a); // globale Variablen sind überall gültig
console.log(c); // Eigenschaften des globalen Objektes auch
console.log(e); // Funktionsparameter haben denselben Gültigkeitsbereich wie lokale Variablen
h = 7; // das implizit deklarierte h ist eine globale Variable
}
foo(a);
console.log(e); // Fehler, da der Funktionsparameter e nur innerhalb der Funktion gültig ist
console.log(f); // Fehler, da die Variable f nur innerhalb der Funktion gültig ist
console.log(h); // ergibt 7 - (s.o.)
console.log(window.h); // ergibt 7 - die globale Variable ist eine Eigenschaft von window
Konstanten
Konstanten sollen mit const deklariert werden, bei der Initialisierung muss ihnen ein Wert zugewiesen werden. Für den Gültigkeitsbereich gelten dieselben Bedingungen wie bei Variablendeklarationen mit let. Konstanten können nicht durch erneute Zuweisung verändert werden, allerdings können – wenn es sich bei der Konstanten um Objekte handelt – einzelne Eigenschaften der Konstanten geändert werden.[49]
Funktionen
Funktionen sind in JavaScript vollwertige Objekte. Sie haben Methoden und Eigenschaften, können erstellt und überschrieben, als Argumente an Funktionen übergeben und von ihnen erzeugt und zurückgegeben werden.
Im letzteren Fall entsteht eine Closure, auch Funktionsabschluss genannt, mit der beispielsweise Datenkapselung umgesetzt werden kann:
let nachricht = function() {
let geheim = 42;
return function() {
return geheim;
};
};
// botschaft ist eine von nachricht zurückgegebene Funktion
let botschaft = nachricht();
alert(typeof geheim); // undefined
alert(botschaft()); // 42
Nicht jedes Argument einer Funktion muss beim Aufruf angegeben werden. Für fehlende Argumente wird der Wert undefined gesetzt; seit ECMAScript 2015 können Parameter auch mit default-Wert definiert werden. Außerdem kann innerhalb der Funktion auch über das arguments-Objekt auf die Argumente zugegriffen werden.
Erzeugung
Es gibt mehrere Möglichkeiten, in JavaScript Funktionen zu erzeugen:[50]
- Funktionsdeklarationen („Function Declarations“):
function f(x, y) {
return x + y;
}
- Funktionsausdrücke („Function Expressions“):
let f = function(x, y) {
return x + y;
};
- Sofort ausgeführte Funktionsausdrücke („Immediately-Invoked Function Expressions“):
Anonyme Funktionen können auch direkt ausgeführt werden, ohne sie vorher einer Variable zuzuweisen. Das kann zur Kapselung des Gültigkeitsbereichs von Variablen verwendet werden.
(function(x, y) {
return x + y;
})(2, 3);
- Benannte Funktionsausdrücke („Named Function Expressions“):
Der Variablen f wird eine Funktion mit Bezeichner g zugewiesen. Außerhalb der Funktion ist sie mit f ansprechbar, innerhalb mit f und g.
let f = function g(x, y) {
return x + y;
};
- Funktionskonstruktor („Function Constructors“):
let f = new Function('x', 'y', 'return x + y;');
- Pfeilfunktionen („Arrow Functions“):
Die runden Klammern sind optional, falls die Funktion genau ein Argument hat. Werden die geschweiften Klammern weggelassen, muss man genau einen Ausdruck ohne return als Rückgabewert angeben. Mit geschweiften Klammern kann man beliebigen Code angeben, muss aber für Rückgabewerte return verwenden.
(x, y) => x + y;
(x, y) => { return x + y; };
x => x + 1;
x => { return x + 1; };
// Eine so erzeugte Funktion kann man natürlich auch einer Variablen zuweisen
let f = (x, y) => x + y;
Beispiel
Eine funktionale und rekursive Implementierung des Euklidischen Algorithmus mit zwei Argumenten sieht folgendermaßen aus:
function euklid(a, b) {
if (b === 0)
return a;
return euklid(b, a % b);
}
Implementierung des Euklidischen Algorithmus mit beliebig vielen Argumenten:
function ggT(...numbers) {
if (numbers.length === 0) // (1.)
return 0;
if (numbers.length === 1) // (2.)
return numbers[0];
return numbers.reduce(euklid); // (3.)
}
console.log(ggT()); // 0
console.log(ggT(4)); // 4
console.log(ggT(24, 36, 84)); // 12
- Falls
ggT ohne Argument aufgerufen wird, dann wird Null zurückgegeben.
- Falls
ggT mit genau einem Argument aufgerufen wird, dann wird das Argument selbst zurückgegeben. Dies wird auch als Identität bezeichnet.
- Reduziert
numbers auf einen einzigen Wert, indem jeweils zwei Elemente von links nach rechts mit reduce und euklid reduziert werden.
Implementierung des Euklidischen Algorithmus mit partieller Anwendung:
function ggT(first) {
if (first === undefined)
return 0;
return function(second) {
if (second === undefined)
return first;
return ggT(euklid(first, second));
};
}
console.log(ggT()); // 0
console.log(ggT(4)()); // 4
console.log(ggT(24)(36)(84)()); // 12
Objekte
Objekte in JavaScript bestehen aus Eigenschaften, die als Name/Wert-Paar realisiert werden. Dabei wird nicht zwischen Attributen und Methoden des Objektes unterschieden (eine Eigenschaft, deren Wert den Typ Function besitzt, fungiert als Methode). Jedes Objekt – auch durch Literale erzeugte Objekte – erbt vom Prototyp des globalen Objekt-Konstruktors.
Vordefinierte Objekte
JavaScript kennt mehrere eingebaute Objekte und Objekttypen, die im Standard ECMAScript definiert sind. Dabei wird ein Objekttyp durch eine namensgleiche Konstruktorfunktionen repräsentiert, die zur Erzeugung von Objekten des entsprechenden Typs verwendet werden kann und zugleich einen Verweis auf den Prototyp des Objekttyps beinhaltet.
- Das namenlose globale Objekt, das alle Variablen und Objekte enthält.
- Der Objekttyp
Object, von dem alle Objekte abgeleitet sind.
- Der Objekttyp
Function von Funktionen.
- Der Objekttyp
Array von Arrays.
- Der Objekttyp
String von Zeichenketten.
- Der Objekttyp
Boolean von boolesche Variablen.
- Der Objekttyp
Number von Zahlen (64-Bit-Gleitkommazahlen gemäß IEEE 754).
- Der Objekttyp
Date für Datumsformate (Daten bzw. Zeitpunkte).
- Der Objekttyp
RegExp für reguläre Ausdrücke.
- Der Objekttyp
Error zur Charakterisierung (und ggf. nachfolgenden Auslösung mittels throw) von Laufzeitfehlern.
- Das Objekt
Math stellt Konstanten und Methoden für mathematische Operationen bereit.
- Das Objekt
JSON stellt zwei Methoden für die Serialisierung von Objekten ins JSON-Format und umgekehrt bereit.
- Das Objekt
Reflect stellt Methoden für die Ermittlung und Änderung der Metadaten eines Objekts bereit.
Weitere Objekte, die beim clientseitigen JavaScript verwendet werden, entstanden historisch vor allem durch die Netscape-Spezifikationen (window, document usw.). Das window-Objekt selbst ist dabei de facto das globale Objekt, indem einfach einer Variablen window das globale Objekt zugewiesen wurde. Zahlreiche Unterobjekte von document wurden mittlerweile durch DOM HTML standardisiert (title, images, links, forms usw.). Aktuelle Browser unterstützen zudem DOM Core und andere W3C-DOM-Standards sowie Erweiterungen von Microsoft JScript.
Zugriff auf Objekteigenschaften und -methoden
Eigenschaften von Objekten (auch Methoden sind Eigenschaften) können wie folgt angesprochen werden:
- Punkt-Notation (mit statischen Bezeichnern)
objekt.eigenschaft;
objekt.methode(parameter1, parameter2);
- Klammer-Notation (mit dynamischen Bezeichnern)
objekt["eigenschaft"];
objekt["methode"](parameter1, parameter2);
// Eigenschaftsname, der in Punktnotation illegal wäre
objekt["methode 1"]();
// So können auch alle Eigenschaften des Objekts durchlaufen werden
for (let eigenschaftsName in objekt) {
console.log(eigenschaftsName, " = ", objekt[eigenschaftsName]);
}
Zu allen Objekten können zur Laufzeit neue Eigenschaften hinzugefügt oder mit delete bestehende entfernt werden:
// Statisch bzw. dynamisch benannte Eigenschaften hinzufügen:
objekt.eigenschaftA = "ein Wert";
objekt["eigenschaftB"] = "ein anderer Wert";
// Statisch bzw. dynamisch benannte Eigenschaften entfernen:
delete objekt.eigenschaftA;
delete objekt["eigenschaftB"];
Objektliterale
Objekte können in JavaScript direkt anhand ihrer Eigenschaften definiert werden:
let meinObjekt = {
zahl: 42,
gibZahl: function() {
return this.zahl;
}
};
alert(meinObjekt.gibZahl()); // 42
Eine spezielle Notation gibt es für reguläre Ausdrücke:
// mit Konstruktorfunktion
(new RegExp("a")).test("ab"); // true
// als Literal
/a/.test("ab"); // true
Konstruktor-Funktionen
Eine Funktion kann dazu genutzt werden, um ein mit new erstelltes Objekt zu initialisieren. In diesem Fall spricht man von einem Konstruktor oder einer Konstruktor-Funktion. Innerhalb dieser Funktion kann das neue Objekt über die Variable this angesprochen werden.
function MeinObjekt(x) { // Konstruktor
this.zahl = x;
}
let objekt = new MeinObjekt(3); // Instanz erzeugen
alert(objekt.zahl); // per Meldefenster ausgeben (3)
„Private“ Eigenschaften
Private Eigenschaften und Methoden sind nicht explizit Teil der Sprache.
Mit Hilfe von Closures (siehe Funktionen) lassen sich dennoch private Eigenschaften von Objekten realisieren:
let erschaffeKatze = function() {
let lebensZahl = 7;
let maunz = function() {
return (lebensZahl > 0) ? "miau" : "örks";
};
// gibt neues Objekt zurück
return {
toeten: function() {
lebensZahl -= 1;
alert(maunz());
}
};
};
let otto = erschaffeKatze();
otto.toeten(); // miau
Lediglich die toeten-Methode von otto kennt die Variable lebensZahl.
Der Effekt gleicht dem einer privaten Eigenschaft, wenn alle Methoden der Katze in der erzeugenden Funktion erschaffeKatze definiert werden. lebensZahl ist dann für alle Methoden (privilegierte Methoden, im Beispiel toeten) und inneren Funktionen der erzeugenden Funktion (private Methoden, im Beispiel maunz) sichtbar, nicht jedoch von außen oder von nachträglich an das Objekt gehängten Methoden.
Vererbung über Prototypen
Vererbung kann in JavaScript durch Prototypen realisiert werden.
Dies erfordert, dass der prototype-Eigenschaft einer Konstruktor-Funktion ein als Prototyp dienendes Objekt zugewiesen wird.
Wenn mit der Konstruktor-Funktion nun ein Objekt erzeugt wird, wird beim Zugriff auf eine nicht-existierende Eigenschaft des neuen Objekts die entsprechende Eigenschaft des Prototyps (wenn vorhanden) zurückgegeben.
Beispiel:
let fisch = {
augen: 2
};
let Mutantenfisch = function() {
this.augen = 3;
};
Mutantenfisch.prototype = fisch;
let blinky = new Mutantenfisch();
// eigene Eigenschaft von blinky
alert(blinky.augen); // 3
// blinkys eigene Eigenschaft wird gelöscht
delete blinky.augen;
// blinky hat die Eigenschaft selbst nicht mehr,
// es schimmert die Eigenschaft des Prototyps durch
alert(blinky.augen); // 2
Um festzustellen, ob ein Objekt eine Eigenschaft selbst besitzt oder vom Prototyp geerbt hat, hat jedes Objekt (automatisch durch Vererbung von Object) die hasOwnProperty-Methode:
blinky.hasOwnProperty('augen'); // false
Fixierung von Objektstruktur und -inhalten
Die in JavaScript im Regelfall völlig dynamische Struktur eines Objekts obj kann in verschiedener Hinsicht fixiert werden: Nach dem Methodenaufruf Object.preventExtensions(obj) können keine weiteren Attribute und Methoden mehr ergänzt werden. Object.seal(obj) verhindert sowohl die Erweiterung wie die Streichung von Attributen und Methoden. Der Aufruf Object.freeze(obj) fixiert sowohl die Objektstruktur wie auch die Attributwerte inklusive der Methoden gegen nachfolgende Veränderungen. Die betreffenden Status eines Objekts obj können mit Object.isExtensible(obj), Object.isSealed(obj) und Object.isFrozen(obj) ermittelt werden.
Es ist auch möglich, nur ein einzelnes Attribut eines Objekts obj zu fixieren. Beispielsweise wird mit dem Aufruf
Object.defineProperty(obj, "vorname", {writable:false});
das Attribut obj.vorname schreibgeschützt.[51]
Delegationsprinzipien
JavaScript ist eine Delegationssprache mit sowohl selbstausführendem als auch direktem Delegationsmechanismus.
- Funktionsobjekte als Rollen (Traits und Mixins)
- JavaScript unterstützt schon auf der Ebene des Sprachkerns verschiedene auf Funktionsobjekten aufbauende Implementierungen des Rollen-Musters[52] wie z. B. Traits[53][54] und Mixins.[55][56] Zusätzliches Verhalten wird bereitgestellt, indem mindestens eine Methode über das Schlüsselwort
this im Rumpf eines function-Objekts gebunden wird. Benötigt ein Objekt zusätzliches Verhalten, welches ihm nicht über die Prototypenkette zur Verfügung gestellt werden kann, lässt sich eine Rolle direkt über call bzw. apply an dieses Objekt delegieren.
- Objektkomposition und Vererbung durch Delegation
- Während Komposition in JavaScript über diese direkte Delegation abgedeckt werden kann, kommt automatische Delegation immer dann zur Anwendung, wenn der Interpreter die Prototypenkette eines Objekts nach oben hin abwandern muss, um z. B. eine mit diesem Objekt assoziierte Methode zu finden, die diesem nicht unmittelbar gehört. Sobald die Methode gefunden ist, wird sie im Kontext dieses Objekts aufgerufen. Demzufolge wird Vererbung in JavaScript über einen selbstausführenden Delegationsmechanismus abgebildet, der an die
prototype-Eigenschaft von Konstruktorfunktionen gebunden ist.
Fehlerbehandlung
Ab Version 3 verfügt ECMAScript über eine von Java übernommene Fehlerbehandlung. Die Anweisung try … catch … finally fängt Ausnahmen (exceptions) ab, die aufgrund eines Fehlers oder einer throw-Anweisung auftreten. Die Syntax lautet:
try {
// Anweisungen, in denen Ausnahmen auftreten oder ausgelöst werden können
} catch (exception) {
// Anweisungsfolge, die im Ausnahmefall ausgeführt wird.
// In diesem Teil kann die Fehlerbehandlung erfolgen.
} finally {
// Anweisungsfolge, die anschließend in jedem Fall ausgeführt wird.
}
throw "sample exception"; // wenn verfügbar, besser: Error-Objekt (siehe unten)
Zu Beginn werden die Anweisungen im try-Block ausgeführt. Falls eine Ausnahme auftritt, wird der Kontrollfluss sofort zum catch-Block mit dem Ausnahmeobjekt als Parameter umgeleitet.
Im Normalfall wird der Ausnahmeblock übersprungen. Nach der Ausführung des try-Blocks (auch teilweise) und gegebenenfalls des catch-Blocks werden in jedem Fall die Anweisungen im finally-Block ausgeführt. Der finally-Teil kann weggelassen werden, alternativ der catch-Teil.
Einige Laufzeitumgebungen wie V8 (und somit Node.js) und auch viele Webbrowser stellen gesonderte Error-Objekte zur Verfügung, die neben der Fehlermeldung auch einen Stacktrace und weitere Zusatzinformationen transportieren können.[57][58][59]
Um diese Vorteile zu nutzen, ändert man im einfachsten Anwendungsfall den throw-Befehl von throw "Meldungstext"; zu throw new Error("Meldungstext");.[60]
Klammern um den Parameter des throw-Befehls sind im Allgemeinen nicht notwendig.[51] Sollten sie in Ausnahmefällen benötigt werden, um beispielsweise einen auf mehrere Zeilen verteilten Parameter zusammenzufassen, kann die mögliche Verwechslung mit einem Funktionsaufruf dennoch vermieden werden, indem man ein Leerzeichen zwischen throw und die öffnende Klammer einfügt.
