JavaScript

Diese Bändchen beschreibt kompakt und übersichtlich die Sprache des Web – JavaScript. Der erste Teil erklärt die Grundlagen und Sprachmerkmale. Danach wird objektorientierte Programmierung behandelt. Behandelt wird weiterhin alles bis zur Version ECMAScript 2020.

Zielgruppe

Diese Buchreihe wendet sich an Anfänger und an Webentwickler, die sich intensiver mit JavaScript auseinandersetzen möchten und weg wollen vom einfachen Copy und Paste irgendwelcher Skriptteile. Vielleicht wollen Sie sich auch mit der MEAN-Welt beschäftigen. MEAN steht für “MongoDb Express Angular Node” und bezeichnet eine komplett auf JavaScript basierendes Entwicklungs-Ökosystem. Aber auch als Grundlage zum Programmieren von Web Components ist dieses Buch perfekt. Ebenso als Fundament für TypeScript, der nächste logische Schritt nach ECMAScript.

Vielleicht sind Sie aber auch ein Webdesigner, der JavaScript als eine hervorragende Möglichkeit entdeckt hat, seine Webseiten mit dynamischen Elementen aufzuwerten. Dabei haben Sie mit Texten zu tun, mit Formularen, mit der Darstellung von Datenbankinhalten, also alles, was eine dynamische Website ausmacht. Dann wird Ihnen dieses Bändchen einen der Teilaspekte, nämlich das Erzeugen des HTML auf dem Server, in besonders übersichtlicher Form zeigen.

Auf alle Fälle habe ich mich bemüht, keine Voraussetzungen an den Leser zu stellen. Sie müssen kein Informatiker sein, keine Programmiersprache perfekt beherrschen, keine höhere Mathematik kennen. Egal in welchem Zusammenhang Sie auf JavaScript gestoßen sind, Sie werden diesen Text lesen können.

Wie Sie diesen Text lesen können

Ich will Ihnen nicht vorschreiben, wie Sie diesen Text lesen sollten. Beim ersten Entwurf der Struktur habe ich mehrere Varianten ausprobiert und dabei festgestellt, dass es die ideale Form nicht gibt. Wenn ich mich an den verschiedenen Anwendungsarten orientiere, zerfällt der Text in mehrere Kapitel, die nicht im Zusammenhang miteinander stehen. Der eine oder andere Leser würde sich dann ärgern, dass er viel Geld für ein Buch ausgibt, das nur zu einem Fünftel verwendbar ist. Diese Bändchen löst das Problem, indem es auf ein sehr kleines Thema fokussiert ist und kein “bla-bla” zur Aufblähung des Umfangs dabei ist.

Anfänger sollten den Text als Erzählung lesen, von der ersten bis zur letzten Seite. Wer sich schon etwas auskennt, kann die für ihn weniger interessanten Abschnitte gefahrlos überspringen. Falls Bezüge notwendig sind, habe ich entsprechende Querverweise eingefügt.

Schreibweisen

Das Thema ist satztechnisch nicht einfach zu beherrschen, denn Skripte sind oft umfangreich und es wäre schön, wenn man die beste Leseform optisch unterstützen könnte. Ich habe deshalb an einige Stellen zusätzliche Zeilenumbrüche benutzt, die der Lesbarkeit dienen, im Editor Ihrer Entwicklungsumgebung aber nichts zu suchen haben.

Generell wird jeder Programmcode mit einer nicht proportionalen Schrift gesetzt. Außerdem verfügen Skripte über Zeilennummern:

1 function test(d){
2   return (d != undefined);
3 }

Oft werde ich die Verwendung bestimmter Zeichen in einem solchen Ausdruck genau erläutern. Dann werden die “wichtigen” Zeichen durch Zeilenumbrüchen alleingestellt und auch in diesem Fall werden Zeilennummern dazu dienen, das betroffene Symbol im Text exakt zu referenzieren (Beachten Sie undefined-Zeichen in Zeile 3):

1 (function (window,
2            document,
3            undefined) {
4 
5     /* ... */
6 
7 })(window, document);

Symbole

Um die Orientierung bei der Suche nach einer Lösung zu erleichtern, gibt es einige Symbole, die im Text genutzt werden.

Online-Unterstützung

JavaScript lernen können Sie mit jedem Browser. Aber manchmal ist es lästig, von Hand HTML, JavaScript und Hilfsdateien zusammenzubauen. Dann helfen Online-Editoren, sogenannte REPL-Umgebungen. Hier eine Auswahl:

• JustRun.It (http://justrun.it)

  Unterstützt auch React und Angular, ideal für die nächsten Schritte. Integrierte Konsole.

• JsFiddle (https://jsfiddle.net/)

  Kompakt, nur drei Dateien (HTML, CSS, JS). Viele Bibliotheken und Versionen. Online speichern und bereitstellen.

• Plunker (http://plnkr.co/)

  Für größere Projekte mit vielen JS-Dateien. Herunterladen als ZIP.

Über den Autor

Jörg arbeitet als Trainer, Berater und Softwareentwickler für große Unternehmen weltweit. Bauen Sie auf die Erfahrung aus 25 Jahren Arbeit mit Web-Umgebungen und vielen, vielen großen und kleinen Projekten.

Ihm vor allem solide Grundlagen wichtig. Statt immer dem neuesten Framework hinterher zu rennen wären viele Entwickler besser beraten, sich eine robuste Grundlage zu schaffen. Wer dies kompakt und schnell lernen will ist hier richtig. Auf seiner Website https://www.joergkrause.de sind viele weitere Informationen zu finden.

Er hat über 60 Titel bei renommierten Fachverlagen in Deutsch und Englisch verfasst, darunter einige Bestseller.

Kontakt zum Autor

Neben der Website können Sie auch direkten Kontakt über www.IT-Visions.de aufnehmen. Wenn Sie für Ihr Unternehmen eine professionelle Beratung zu Web-Themen oder eine Weiterbildungsveranstaltung für Softwareentwickler planen, kontaktieren Sie Jörg über seine Website oder buchen Sie direkt über http://www.IT-Visions.de.

1 Grundlagen

Dieses Buch beschreibt die Grundlagen und Entwurfsmuster von JavaScript. Dies ist eine kompakte Einführung, die dabei helfen soll, Beispiele zu Umgebungen wie Node.js oder diverse JavaScript-Frameworks zu verstehen und eigene Entwicklungen umzusetzen. Das Kapitel verzichtet auf umfassende geschichtliche Ausflüge zugunsten relevanter Inhalte. Behandelt wird hier der grundlegende Sprachumfang von ECMAScript bis Version ES2020.

1.1 Einführung

JavaScript ist eine relativ kompakte und mächtige Skriptsprache, welche um das Jahr 1995 von Netscape eingeführt wurde, um Webseiten mit Interaktionen ausstatten zu können. Seitdem sind 25 Jahre vergangen und JavaScript ist aus so gut wie keiner Webanwendung mehr weg zu denken. Dabei spielt es keine Rolle, mit welcher Technologie diese Webanwendung realisiert wurde. Je nach Hersteller des Browsers kann die Sprachimplementierung leicht variieren. Die häufigste Implementierung ist jedoch in Browsern zu finden, wo die Sprache die Grundlage für die interaktiven Elemente von HTML 5 liefert. Grundsätzlich ist JavaScript aber unabhängig vom Browser. Die Benutzung in Node ist eine vom Browser vollständig entkoppelte Implementierung der Sprache basierend auf der V8-Engine von Google, die auch den Browser Chrome antreibt.

Trotz des sehr ähnlich klingenden Namens und der teilweisen syntaktischen Ähnlichkeit zu JAVA ist JavaScript eher nicht mit der Programmiersprache JAVA verwandt. Bis auf die Ausnahme, dass beide Programmiersprachen sich in ihrer Syntax sehr an der Programmiersprache C orientiert haben.

Ursprünglich war JavaScript ausschließlich zu dem Zweck gedacht, den DOM-Baum (Document Object Model) des Browsers zur Laufzeit zu manipulieren. Jedoch entwickelten sich mit der Zeit immer mehr Anwendungsgebiete für diese universelle Skriptsprache. So gibt es bereits erste Referenzimplementierungen ganzer Anwendungsprogramme in JavaScript, beispielsweise basierend auf nw.js.

Laufzeiten

JavaScript wird von mehreren Laufzeitumgebungen unterstützt. In jedem Browser gibt es eine, aber mit verschiedenen Implementierungen und auf dem Server als Node.js. Es gibt einige weitere Versuche, JavaScript-Engines zu etablieren, aber keine konnte sich am Markt durchsetzen. Der neueste Versuch, Deno, hat bislang nur wenig Resonanz gefunden. Microsofts Alternative Chakra wurde wieder abgekündigt.

1.2 Sprachmerkmale

JavaScript als Programmiersprache wurde von einem der Erfinder folgendermaßen beschrieben:

Was ist das Problem mit JavaScript? Einige Zitate (im Original) helfen beim Verständnis:

• JavaScript was a initially introduced in Netscape 2.0B3 in Dec 1995, a.k.a. Mocha, LiveScript, Jscript, however, it’s official name is ECMAScript
• JavaScript is a C-family, world’s worst named, extremely powerful language (not a script), totally unrelated to Java
• JavaScript is a weakly typed, classless, prototype based OO language, that can also be used outside the browser. It is not a browser DOM.
• The world’s most misunderstood programming language. Douglas Crockford

Vergleich mit andern Sprachen

Die Kernideen von JavaScript sind:

• Eine funktionale Programmiersprache mit C-ähnlichen Syntax ( {} und ; )
• Dynamisch typisiert (Loose typing)
• Sichtbereiche (scope) funktionsorientiert
• Objektorientiert, aber klassenlos
• Auf Prototypen basierende Vererbung

Die Sprachelemente umfassen:

• Werte / Literale
• Variablen
• Operatoren
• Kontrollstrukturen
• Funktionen
• Objekte
• Typen

1.3 JavaScript-Syntax

Die Namen für Variablen und Funktionen beginnen mit einem Buchstaben, _ oder $ (In “Regex-Speak”: [a-zA-Z_$]), gefolgt von keinem oder mehreren Buchstaben, Zahlen, _ oder $. Das $ hat keine spezielle Bedeutung, es sollte generiertem oder Bibliotheks-Code vorbehalten bleiben. Alle Variablen, Parameter oder Mitglieder werden klein geschrieben (meinVariablenName). Einzige Ausnahme: Konstruktoren beginnen mit einem großen Buchstaben (MeinKlassenKonstruktor). Das _-Zeichen (Unterstrich) am Beginn eines Schlüsselwortes wird für private Mitglieder verwendet (privat per Konvention).

Einbetten in HTML

Das einfachste Beispiel für Browser (Listing 1.1), “Hallo JavaScript”, zeigt die Nutzung auf einer einfachen HTML-Seite:

 1 <html>
 2 <head>
 3 <title>Hallo JavaScript</title>
 4 <script type="text/javascript">
 5 function sayHelloTo(name) {
 6   document.write("Hallo " + name + " !");
 7 }
 8 </script>
 9 </head>
10 <body>
11 
12 <script type="text/javascript">
13 document.write("Hallo  JavaScript !\n");
14 sayHelloTo("Joerg");
15 </script>
16 
17 </body>
18 </html>

JavaScript-Code kann an den unterschiedlichsten Stellen einer Webseite verwendet werden. Die zwei gebräuchlichsten davon sind der Kopfbereich (Zeile 4) als Codeblock, welcher meistens für die Definition von Funktionen verwendet wird, sowie innerhalb des Body einer Seite am Ende (Zeile 12ff.).

Grundsätzlich wird der auszuführende Code von einem entsprechenden Script-Tag eingeschlossen. Seit HTML 5 ist der Typ text/javascript als Mime-Typ für den Inhalt freiwillig, weil dies der Standardwert ist, der angenommen wird, wenn keine Angabe erfolgt.

Kommentare

Ein kommentierter Bereich sieht folgendermaßen aus:

1 /*
2 Ein mehrzeiliger Kommentarblock
3 Kann mit den aus C/C++/C#/Java bekannten Blockkommentarzeichen
4 erstellt werden.
5 */

Der Zeilenkommentar steht alleine auf einer Zeile oder am Ende:

1 // Dies tut das:
2 var i = 42; // Zuweisung

Literale

Tabelle 1.1. zeigt einige Literale für Sonderzeichen. Daraus lässt sich ableiten, dass Sie den umgedrehten Schrägstrich (Backslash) in Zeichenfolgenausdrücken maskieren müssen (\\).

Ein Beispiel dazu:

'Das ist eine mehrzeilige\r\nZeichenkette'

Umgang mit Umlauten

Eine Besonderheit ist beim Umgang mit Umlauten zu beachten. Es ist nicht sichergestellt, dass die Ausgabe mit den Sonderzeichen umgehen kann (in der Praxis heutzutage schon, aber ein Test ist sinnvoll). Aus diesem Grund ist es im Zweifelsfall empfehlenswert, auf die Funktion unescape zurückzugreifen. Eine Ausgabe mit Umlauten sieht möglicherweise folgendermaßen aus:

alert("über"));

Schreiben Sie jedoch folgendes, wenn Umlaute benutzt werden und die Fähigkeiten der Zielumgebung unklar sind:

alert(unescape("%FCber"));

Damit stellen Sie sicher, dass die Umlaute immer korrekt interpretiert und angezeigt werden können. Die Codierung ist das URL-Encoding, bei dem Sonderzeichen durch den hexadezimalen Wert des ASCII-Zeichens ersetzt werden, maskiert mit den %-Zeichen.

URL-Encoding kann ein wenig konfus sein, weil keine Angabe des Zeichensatzes erfolgt. URL-Zeichen verlangen Oktets, also 7 Bit, und ASCII hat einen Umfang von 8 Bit. Alle 127 Zeichen im oberen Block müssen also encoded werden. JavaScript benutzt für Zeichen aber den erweiterten Satz UCS-2, der auch asiatische Schriftzeichen und tausende Symbole enthält. Das hat aber nichts mit URL-Encoding zu tun. Die benutzte JavaScript-Funktion unescape (und das Pendant escape) verhält sich deshalb bei Werten bis 255 (0x100) konform zum URL-Encoding (%HH) und darüber konform zum Encoding nach UTF-8 (%HHHH). UTF-8 ist das Encoding-Verfahren (welche Bits stellen welches Zeichen dar) für den Zeichensatz UCS-2 (welche Zeichen gibt es überhaupt, egal wie codiert).

Numerische und Boolesche Literale

Ferner gibt es noch die numerischen Literale. JavaScript unterscheidet im Wesentlichen in Ganzzahlen und Gleitkommazahlen bei den Literalen. Intern werden nur Gleitkommazahlen abgebildet. Ganzzahlen können in folgenden Formen vorkommen:

• Hexadezimale Konstanten: beginnen mit einem 0x vor der Zahl, gefolgt von den Zahlen 1…9, 0 oder den Buchstaben a..f, beispielsweise 0x12affe.
• Dezimale Ganzzahlenkonstanten: Beispielsweise 4711, also nur die Ziffern ohne Präfix.

Für binäre Zahlen (b) und oktale Zahlen (o) gibt es zwei weitere Literale. Diese Möglichkeiten sind neu in ECMAScript 2015.

var bin = 0b111110111;
var oct = 0o767;

Gleitkommazahlen können in zwei Schreibweisen vorkommen:

• Einfache Schreibweise: mit Punkt (.) getrennte Ziffern, beispielsweise: 12.56
• Exponentialschreibweise: mit Punkt (.) getrennte Ziffern mit einem Exponenten, beispielsweise 12.56e2

Ferner gibt es zur Darstellung von Wahrheitswerten noch boolesche Literale:

• Wahr: true
• Falsch: false

Sonstige Literale

Reguläre Ausdrücke werden in / (slash) geschrieben. Das Array-Literal [] wird für Arrays benutzt. Das Objekt-Literal {} erzeugt ein neues, leeres Objekt. Mehr dazu in den entsprechenden Abschnitten, die diese Typen behandeln.

Operatoren

Das Zeichen + dient sowohl der Addition als auch der Verknüpfung von Zeichenketten. Wenn beide Operanden Zahlen sind, werden diese addiert, sonst erfolgt immer eine Umwandlung in Zeichenketten, welche zusammengesetzt werden.

1.4 Native Typen

JavaScript ist “schwach typisiert” (loosely typed). Keineswegs kann man hier von einer untypisierten Sprache sprechen. Wird einer Eigenschaft oder einer Variablen ein Wert zugewiesen, so bekommt die Variable den Typ des jeweiligen Wertes. Intern werden Typen unterschieden. Elementare Typen sind:

• Number: Zahlen
• String: Zeichenketten
• Boolean: Logische Werte
• Function: Funktion (auch wenn als Klasse definiert)
• Symbol: Global eindeutige Symbolbezeichner
• Object: Alles andere

Dazu kommen die folgenden speziellen Zustände, die Variablen annehmen können:

• null
• undefined

Diese werden weiter unten noch genauer vorgestellt.

Globale Objekte

Des Weiteren sind einige Typen eingebaut, um alltägliche Aufgaben zu erleichtern. Dies sind technisch globale Objekte mit statischen Eigenschaften und Methoden. Von einige lassen sich jedoch auch Instanzen anlegen. Die wichtigsten sind:

• Math: Berechnungen
• NaN, Infinity: Not a Number, dazu mehr weiter unten
• BigInt: Große Zahlen
• Date: Datum und Zeit
• RegExp: Reguläre Ausdrücke (Suchmuster)
• JSON: Umgang mit JavaScript Object Notation

Diese Typen basieren alle auf Object. Für den Umgang mit Daten sind folgende Typen geeignet:

• Array: Allgemeine Arrays. Dazu gibt es spezialisierte Formen:
  • Float32Array
  • Float64Array
  • BigInt64Array
  • BigUint64Array
  • Int16Array
  • Int32Array
  • Int8Array
  • TypedArray
  • Uint16Array
  • Uint32Array
  • Uint8Array
  • Uint8ClampedArray
  • SharedArrayBuffer, Atomics
  • Map
  • Set
  • WeakMap
  • WeakSet
  • ArrayBuffer, DataView
• Fehlerobjekte:
  • Error, EvalError, InternalError, RangeError, ReferenceError, SyntaxError, TypeError, URIError
• Intl: Globalisierungsunterstützung
• Generator-Funktionen:
  • AsyncIterator
  • GeneratorFunction
  • Generator
  • Iterator
• Promise: Asynchrone Rückruffunktionen
• Proxy: Stellvertreterobjekte mit Zugriffsbenachrichtigung
• Reflect: Informationen über Objektinterna
• WebAssembly: Zugriff auf Web-Assembly-Code

Automatische Typkonvertierung

Wird die Konvertierung nicht explizit angegeben, versucht JavaScript den am besten passendsten Typ zu ermitteln. Durch verschiedene Operatoren können Umwandlungen elegant erzwungen werden. Dazu mehr im Abschnitt Operatoren.

Number

Number ist der einzige Zahlentyp, ein 64Bit Gleitkomma (floating point).

Nach IEEE-754 ist der Zahlentyp in JavaScript double.

Ein Spezialwert für Zahlen ist NaN – Not a Number. Dieser entsteht als Ergebnis fehlerhafter oder unmöglicher Berechnungen. Jede Berechnung mit einem Parameter NaN ergibt NaN. NaN ist ungleich zu allem, auch zu NaN selbst. Der folgende Vergleich ergibt immer false:

if (NaN == NaN) {
  // Dieser Teil wird niemals erreicht
}

Testen kann man auf diesen Wert mit der folgenden statischen Methode:

Number.isNaN(value)

Die Klasse Number bietet einige solche explizite Funktionen. Eine Instanz wird folgendermaßen erstellt:

var n = Number(value);

Dies konvertiert einen Wert in eine Zahl. Im Fehlerfall entsteht NaN. Konvertiert werden Zahlen besser durch Operatoren. Mit + sieht das dann folgendermaßen aus:

var z = "23";
var n = +z;

Das Plus-Zeichen wird hier als nicht verändernder Präfix-Operator benutzt. Damit erzwingt man die Umwandlung in eine Zahl.

Alternativ gibt es noch die globale Funktion isNaN() (ohne Number davor). Diese prüft nur, ohne vorherige Konvertierung. Zusammenfassend gilt:

• isNaN(): Prüfe und gib das Ergebnis zurück.
• Number.isNaN(): Mach eine Zahl draus und prüfe dann, was dabei herausgekommen ist.

Das ist oft gleich, aber eben nicht immer.

var a = isNaN(undefined);        // true (undefined nicht sinnvol\
l)
var b = Number.isNaN(undefined); // false (undefined == 0, ist ok)

Die Funktion parseInt(value, radix) verwandelt in eine Ganzzahl mit einer definierten Zahlenbasis (bei Dezimalzahlen ist die Basis 10). Im Fehlerfall entsteht wieder NaN:

var i = parseInt("1F", 16); // entspricht 31

Falls eine Gleitkommazahl als Eingabe erwartet wird, eignet sich parseFloat(value)`, hier natürlich ohne Zahlenbasis:

var f = parseFloat("100.42"); // entspricht 100.42

Bei Berechnungen kann der Wert Infinity entstehen. Die Funktion zum Testen heißt isFinite(). Das ist bemerkenswert, denn man würde als Test eigentlich so etwas was wie isInfinite erwarten, in Analogie zu NaN. Noch bemerkenswerter ist in diesem Zusammenhang, dass das Objekt Number zwei statische Eigenschaften besitzt, Number.POSITIVE_INFINITY und Number.NEGATIVE_INFINITY. Hier wird also strenger nach mathematischen Regeln unterschieden. Zum Testen gibt es wieder Number.isFinite(), was analog zum vorherigen Beispiel erst konvertiert und dann testet, während die global Funktion lediglich eine bestehende Tatsache feststellt.

Manche scheinbar einfache Zahlen lassen sich nicht im bestehenden Zahlenraum abbilden. Es gilt beispielsweise folgendes:

0.1 + 0.2 == 0.3; // false

Das Problem ist die Zahl 0,2, die im binären Zahlenraum nicht abbildbar ist. Abbildung 1.1 zeigt die Herleitung der dezimalen Zahlen aus den binären. Bei 0.2 müsste für eine präzise Darstellung der Rest weitergeführt werden, ws aber endlos ist.

Irgendwann ist die Mantisse erschöpft und damit ist die Genauigkeit begrenzt. Die Anzahl der signifikanten Stellen ist dabei entscheidend.

• 0.000000234 = 2.34 × 10⁻⁷: 3 signifikante Stellen: 234
• 1.000000234 = 1.000000234 × 100: 10 signifikante Stellen: 1000000234

Dadurch, das im ersten Beispiel der Exponent benutzt wird, kann eine viel höhere Genauigkeit erreicht werden.

Das gilt auch bei großen Zahlen.

console.log(9007199254740993); // 9007199254740992

Das wird der Zahlenwert richtig verändert. Das kann fatale Folgen haben. Der Grund ist, dass der Zahlenraum die Zahl 9007199254740993 nicht kennt und die nächstbeste binäre Darstellung bei der Umwandlung nach Dezimal eine andere Zahl ergibt. Der Zahlenraum bis 2⁵³ gilt als sicher. Die folgende Funktion udn zwei Eigenschaften können zum Testen benutzt werden, ob Sie sich noch im sicheren Bereich bewegen.

1 Number.isSafeInteger(number)
2 Number.MIN_SAFE_INTEGER
3 Number.MAX_SAFE_INTEGER

Außerhalb sollte entweder eine passende Bibliothek benutzt werden oder die Berechnungen werden entsprechend modifiziert.

Berechnungen mit Math

Das Math-Objekt enthält Konstanten und Funktionen zur Berechnung. Es können auch komplexe Berechnungen wissenschaftlicher oder kaufmännischer Art durchgeführt werden. Die Sprachspezifikation sollte als Referenz zusätzlich benutzt werden.

Eine Instanz von Math braucht nicht eigens erzeugt werden. Eigenschaften und Methoden von Math sind statisch und können direkt verwendet werden. Das Schema sieht folgendermaßen aus (Pseudocode mit Platzhaltern):

const x = Math.<Eigenschaft>;
const x = Math.<Methode(<Parameter>)>;

Mit z = 10 * Math.PI beispielsweise steht in der Variablen z nach der Zuweisung das Produkt aus der Zahl π und 10. Mit w = Math.sqrt(10) steht in der Variablen w hinterher das Ergebnis der Quadratwurzel aus 10. Vor jedem Aufruf einer Eigenschaft oder Methode des Math-Objekts wird Math benutzt (großgeschrieben).

Bei jedem Zahlen-Parameter, den Sie einer Methode von Math übergeben, kann es sich um eine explizite Zahl (beispielsweise 25 oder 0.123) handeln, um eine numerische Variable (beispielsweise x) oder um einen Rechenausdruck (beispielsweise 7 * 5 + 0.3). Auch Rechenausdrücke mit Variablen sind erlaubt (beispielsweise x * i + 1).

Alle typischen trigonometrischen Funktionen steht zur Verfügung. Diese werden mit dem Bogenmaß durchgeführt oder geben das Ergebnis in Bogenmaß zurück. Um vom Bogenmaß in das Winkelmaß umzurechnen, dividieren Sie diesen einfach durch (Math.PI / 180). Eine Multiplikation mit diesem Wert sorgt für die Umrechnung von Grad- in Bogenmaß.

1 function toDegrees (angle) {
2   return angle * (180 / Math.PI);
3 }
4 
5 function toRadians (angle) {
6   return angle * (Math.PI / 180);
7 }

Die trigonometrischen Funktionen sind:

• acos() (Arcuscosinus)
• asin() (Arcussinus)
• atan() (Arcustangens)
• cos() (Cosinus)
• sin() (Sinus)
• tan() (Tangens)

Der hauptsächliche Einsatzzweck sind Animationen und Effekte. Auch zum Zeichnen von Kreisen sind sin und cos gut geeignet.

Die folgende Funktion (Listing 1.2) zeichnet einen Viertelkreis:

 1 var canvas = document.getElementById('canvas')
 2 var ctx = canvas.getContext("2d");
 3 
 4 var step = 2 * Math.PI / 40; // Schritte
 5 var h = 150;
 6 var k = 150;
 7 var r = 50;
 8 
 9 ctx.beginPath();
10 
11 for (var theta = 0; theta < 2 * Math.PI; theta += step) {
12   var x = h + r * Math.cos(theta);
13   var y = k - r * Math.sin(theta);
14   ctx.lineTo(x, y);
15 }
16 
17 ctx.closePath();
18 ctx.stroke();

Das dazu passende HTML-Element sieht folgendermaßen aus:

<canvas id="canvas" width="150" height="150"></canvas>

Weitere Funktionen

Einige weitere typische Funktionen sind:

• abs(): absoluter (positiver) Wert einer Zahl
• ceil(): die nächsthöhere ganze Zahl
• exp(): Exponentialwert
• floor(): die nächstniedrigere ganze Zahl
• log(): der natürlichen Logarithmus
• max(): die größere zweier Zahlen
• min(): die kleinere zweier Zahlen
• pow(): Potenz
• random(): Auswahl zwischen 0 bis 1 per Zufall
• round(): kaufmännische Rundung einer Zahl auf die nächste Ganzzahl
• sqrt(): die Quadratwurzel

Wichtig sind in der Praxis oft ceil und manchmal floor. Ein typisches Beispiel ist die Ermittlung der Anzahl der Seiten beim Blättern durch Datensätze. Wenn man 83 Elemente in Gruppen zu zehn anzeigt, benötigt man neun Seiten.

let pages = Math.ceil(83 / 10);

Die Variable pages hat nun den Wert 9.

Die Rundungsfunktion hat keine Option, auf eine bestimmte Anzahl von Stellen zu runden. Sie rundet immer auf ganze Zahlen. Listing 1.3 zeigt eine sinnvolle Funktion dafür (mit einer Standardrundung auf 2 Stellen):

1 var roundNumber = function(number, decimals) {
2   decimals = decimals || 2;
3   return Math.round(number * Math.pow(10, decimals))
4        / Math.pow(10, decimals);
5 };

Konstanten

Die wichtigsten Konstanten lauten:

• E: Eulersche Konstante
• LN2: natürlicher Logarithmus von 2
• LN10: natürlicher Logarithmus von 10
• LOG2E: konstanter Logarithmus von 2
• LOG10E: konstanter Logarithmus von 10
• PI: Konstante PI
• SQRT1_2: Konstante für Quadratwurzel aus 0,5
• SQRT2: Konstante für Quadratwurzel aus 2

Die Zahlenwerte in der gezeigten Reihenfolge und mit der erreichbaren Genauigkeit zeigt Abbildung 1.4:

Zeichenkette (String)

Ein Zeichenkette ist eine Sequenz von 0 oder mehr 16Bit-Zeichen. In ECMAScript wurde ursprünglich UCS-2 benutzt, wobei einige Implementierungen UTF-16 benutzen. Die Ausgabe sollte immer in UCS-2 erfolgen, intern wird meist UTF-16 eingesetzt. Der Unterschied macht sich bemerkbar, wenn die Anzahl der Bytes ermittelt wird, aus denen ein Zeichen besteht.

Es gibt keinen speziellen Typ für ein Zeichen (kein char-Typ). Ein Zeichen wird durch einen String der Länge 1 repräsentiert. Zeichenketten sind unveränderlich (immutable), wie in den meisten anderen Sprachen auch. Zeichenketten gleichen Inhalts sind gleich (==), auch wenn es sich um verschiedene Objekte handelt. Dies entspricht der intuitiven Lesbarkeit.

Zeichenkettenliterale können " oder ' verwenden. Die Benutzung ist gleichwertig. Dadurch sind Verschachtelungen möglich wie "Hallo 'Welt' " oder 'Hallo "Welt"'.

Die Länge der Zeichenkette wird mit string.length ermittelt. String(value) wandelt einen Wert in eine Zeichenkettendarstellung um.

Vorlagenzeichenfolgen

Vorlagenzeichenfolgen (template strings) sind eine syntaktische Vereinfachung zum Bauen von Zeichenketten mit variablem Anteil. Sie benutzen ein neues Zeichenkettenliteral, das Backtick “`”.

 1 var s;
 2 // Einfache Zeichenkette
 3 s = `Dies ist eine Vorlagenzeichenfolge`;
 4 console.log(s);
 5 // Mehrzeilig ist erlaubt
 6 s = `In ES5 ist dies
 7      nicht erlaubt.`;
 8 console.log(s);
 9 // Interpolation von Variablen
10 var name = "Jörg", time = "heute";
11 s = `Hallo ${name}, wie geht es dir ${time}?`
12 
13 // Sonderzeichen sind möglich
14 s = String.raw`In ES ist "\n" ein Umbruch.`
15 console.log(s);
16 
17 s = `In ES ist "\n" ein Umbruch.`
18 console.log(s);

Der Aufruf von String.raw mit der unmittelbar anschließenden Zeichenkette ohne Klammern (Zeile 14 in Listing 1.4) ist kein Fehler. Dies sind markierte (tagged) Vorlagen. Jede Funktion kann so aufgerufen werden. Es findet eine Konvertierung in ein Array mit den statischen Teilen und den Argumenten als nachgestellte Parameter statt:

1 function html(){
2   [...arguments].forEach(a => console.log(a));
3 }
4 let title = "Joerg Krause";
5 let you = "Joerg";
6 html`<p title="${title}">Hello ${you}!</p>`;

Die Ausgabe sieht dann folgendermaßen aus:

[ '<p title="', '">Hello ', '!</p>' ]
Joerg Krause
Joerg

Die Tag-Funktionen, die benutzt werden, sind völlig frei wählbar. Sie müssen auch keinen Wert zurückgeben. Meist erscheint dies jedoch sinnvoll.

Die String-Methoden

Zeichenketten in JavaScript sind 0-basiert, das heißt das erste Zeichen hat den Index 0. Dies gilt für alle Zeichenkettenmethoden, die mit Indizes arbeiten. Zeichenketten sind wie bereits erwähnt unveränderlich (immutable). Methoden, die Änderungen vornehmen, geben immer eine neue Instanz einer Zeichenkette zurück. Mehrfach Manipulationen sind dadurch zwar sehr schnell, führen aber auch dazu, dass dieselben Zeichen möglicherweise mehrfach im Speicher liegen. Bei großen Zeichenketten sollten Sie sehr sorgfältig mit den Datenmengen umgehen.

indexOf()

Mit dieser Methode wird die Position einer Zeichenkette in einer anderen Zeichenkette gefunden. Wird nichts gefunden, wird -1 zurückgegeben.

var str = "Bitte legen Sie 'Produkte' weg!";
var pos = str.indexOf("Produkte");

lastIndexOf()

Wenn mehrere Vorkommen einer Zeichenkette in einer anderen existieren, wird die die letzte Fundstelle zurückgegeben. Wird nichts gefunden, wird -1 zurückgegeben.

var str = "Bitte legen Sie 'Produkte' weg!";
var pos = str.lastIndexOf("Produkte");

search()

Mit dieser Methode wird die Position einer Zeichenkette in einer anderen Zeichenkette gefunden. Wird nichts gefunden, wird -1 zurückgegeben. Im Gegensatz zu indexOf akzeptiert search auch reguläre Ausdrücke als Argument.

var str = "Bitte legen Sie 'Produkte' weg!";
var pos = str.search(/Produkte/);

Drei Methoden dienen dazu, Teile von Zeichenketten zu bilden:

slice(start, end)

Extrahiert einen Teil einer Zeichenkette von Position start bis Position end. Wenn das Argument negativ ist, wird die Position vom Ende gezählt.

substring(start, end)

Extrahiert einen Teil einer Zeichenkette von Position start bis Position end. Negative Argumente sind nicht erlaubt. Wird das Ende end weggelassen, wird bis zum Ende der Zeichenkette extrahiert.

substr(start, length)

Extrahiert einen Teil einer Zeichenkette von Position start und dann eine Anzahl Zeichen length.

var str = "Apfel, Banane, Kiwi";
var res = str.slice(7,13);

var str = "Apfel, Banane, Kiwi";
var res = str.slice(-12,-6);

Die Ausgabe ist in beiden Fällen ‘Banane’.

var str = "Apfel, Banane, Kiwi";
var res = str.substring(7,13);

var str = "Apfel, Banane, Kiwi";
var res = str.substr(7,6);

Die Ausgabe ist auch in diesen beiden Fällen ‘Banane’.

replace(search, replace)

Diese Methode ersetzt Teile einer Zeichenkette durch eine andere:

str = "Bitte benutze Node!";
var n = str.replace("Node","AngularJS");

toUpperCase

Wandelt alle Zeichen in Großbuchstaben um.

toLowerCase

Wandelt alle Zeichen in Kleinbuchstaben um.

1 var text1 = "Hallo JavaScript!";
2 var text2 = text1.toUpperCase();
3 console.log(text2);
4 var text2 = text1.toLowerCase();
5 console.log(text2);

concat()

Diese Methode kann mehrere Argumente annehmen und kombiniert diese zu einer Zeichenkette.

1 var text1 = "Hallo";
2 var text2 = "JavaScript";
3 text3 = text1.concat("	",text2);

Manipulationen einzelner Zeichen vermeiden den Umgang mit großen Zeichenketten in manchen Fällen.

charAt(position), charCodeAt(position)

Die Methoden geben das Zeichen an der gewählten Position zurück. charCodeAt gibt dabei den Unicode des Zeichens an.

1 var str = "HELLO WORLD";
2 str.charAt(0);            // Ergibt: H
3 str.charCodeAt(0);        // Ergibt: 72

Da JavaScript keinen expliziten Zeichentyp kennt, ist die Interpretation einer Zeichenkette als Array unzulässig. Es ist zwar syntaktisch möglich, kann aber unvorhersehbare Fehler produzieren. Schreibweisen wie str[0] gelten deshalb als sogenanntes Antipattern. Sollten Arrayfunktionen sinnvoll erscheinen, konvertieren Sie die Zeichenkette zuerst explizit in ein Array-Objekt. Am einfachsten geht das mit der Methode split.

1 var txt = "a,b,c,d,e";   // String
2 txt.split(",");          // An Komma teilen
3 txt.split(" ");          // An Leerzeichen teilen
4 txt.split("|");          // Am Pipe-Symbol teilen

Beachten Sie die Funktion des Trennzeichens. Wenn kein Trennzeichen angegeben wird, steht die gesamte Zeichenkette im Index 0 des Arrays. Um eine Zeichenkette zeichenweise zu zerlegen und dabei keine expliziten Trennstellen zu definieren, nutzen Sie eine leere Zeichenkette "".

1 var txt = "Hello";       // String
2 txt.split("");           // In Array umwandeln

Nicht standardkonforme String-Methoden

Einige Methoden sind nicht vom Standard abgedeckt, werden aber von praktisch allen Browsern unterstützt. Umgebungen außerhalb des Browsers, wie beispielsweise Node.js, unterstützen diese Funktionen nicht.

Der Inhalt des Elements ist jeweils die Zeichenkette, auf die die Methode angewendet wurde.

Um direkt zuzugreifen, benötigt man eine String-Instanz oder den String-Prototypen, der die Grundlage der Instanz ist. Mit Prototype sieht es folgendermaßen aus:

let html = String.prototype.sup();

Eine String-Instanz ist nicht effektiver, aber effektiver zu beschaffen:

let html = "".sup();

Boolean

Boolesche Werte können true (Wahr, Ja) oder false (Unwahr, Nein) sein. Beides sind Literale in JavaScript.

Die Konstruktorfunktion Boolean(value) ermittelt, ob der Wert true oder false ist. Werte, die als false interpretiert werden, sind:

• false
• null
• undefined
• "" (leere Zeichenkette)
• 0
• NaN

Alle anderen Werte sind true, einschließlich "0" und "false" (in Anführungszeichen), was manchmal zu Verwirrung führt.

Bei automatischen Typumwandlungen, beispielsweise bei Benutzung mit der Anweisung if, kommen dieselben Regeln zur Anwendung.

1.5 Objekte

Objekte in JavaScript sind dynamisch. Dies ist eine Mischung aus einem Objekt und einem Dictionary (Map). Mit new Object() erzeugen Sie einen leeren Container für Name/Wert-Paare. Alternativ kann auch das Literal für ein Objekt {} verwendet werden. Der Name kann jede Zeichenkette sein, der Wert darf alles außer undefined sein. Auf Mitglieder kann über die Dot-Notation (Objekt.Member) oder die Index-Notation (subscript) zugegriffen werden. Die Dot-Notation ist nur zulässig, wenn der Name des Mitglieds ein gültiger Bezeichner ist. Er muss dazu mit einem Buchstaben, dem Unterstrich oder dem $-Zeichen beginnen und darf keine Leerzeichen enthalten.

Folgende Definition ist möglich:

1 var Person = {}; // dies ist erforderlich
2 Person.Vorname = "Joerg";
3 console.log(Person.Vorname);

Neben der Punktschreibweise kann noch die Index-Schreibweise benutzt werden. Auch hier handelt es sich nur um eine Eigenschaft (Zeile 2):

1 var Person = {}; // dies ist erforderlich
2 Person["Meine Spezialeigenschaft"] = "Spezial Wert";
3 console.log(Person["Meine Spezialeigenschaft"])

Das ist insofern bemerkenswert, weil dadurch auch Namen benutzt werden können, die andernfalls syntaktisch unzulässig wären, also mit Leer- oder Sonderzeichen.

Spezielle Typen

Speziell ist der Umgang mit nicht definierten Variablen. Prinzipiell ist keine Deklaration nötig, weil der Typ erst bei der Benutzung festgelegt wird. Deshalb wird häufig der Zustand explizit abgefragt. Ein Variable kann undefiniert sein, das heißt dann undefined. Sie kann auch existieren, aber völlig leer sein. Das ist dann null.

null versus undefined

null ist ein Wert, welcher “Nichts” repräsentiert. Es ist ein Objekt mit dem Typ null. undefined ist dagegen kein Wert, er zeigt eine undefinierte Variable oder einen fehlenden Rückgabewert an. Es ist kein Objekt, eben gar nichts. Der Standard für nicht definierte Variablen und nicht vorhandene Member ist undefined.

Die Abfrage von null ist relativ häufig und dies immer mit if zu tun ist aufwändig. Deshalb gibt es den Null-Operator ??.

const value = nullable ?? 0;

Ist die Variable links tatsächlich null oder undefined, wird der Ausdruck rechts ausgewertet.

Beim Verketten von Ausdrücken ist ein ähnlicher Operator mit derselben Funktion einsetzbar:

const value = objMightBeNull?.propertyMightBeNull?.Property;

Statt einer Ausnahme wird hier einfach undefined zurückgegeben. Durch die Verkettung kann erheblich Code eingespart werden.

1.6 Symbole

Symbole erzeugen eindeutige Token. Sie können als Namen benutzt werden und sind robuster als Zeichenketten.

Das Erzeugen erfolgt immer mit der Symbol-Fabrikfunktion, nicht mit dem Operator new.

1 let token = Symbol('Foo');

Die Zeichenfolge ist optional und dient nur der Dokumentation. Deshalb gilt:

1 Symbol('Foo') !== Symbol('Foo')

Prüfen Sie den Typ mit typeof, wird symbol zurückgegeben. Es handelt sich also um einen nativen Typ.

Der typische Einsatzzweck sind eindeutige Bezeichner wie im folgenden Beispiel:

1 const MY_KEY = Symbol();
2 let obj = {
3    [MY_KEY]: 123
4 };

Absolute Eindeutigkeit

Auf den ersten Blick mag, vor allem im Hinblick auf das letzte Beispiel, eine Zeichenkettenkonstante ausreichend sein. Schauen Sie sich dazu folgenden Code an:

1 const COLOR_BLUE = 'COLOR_BLUE';
2 function colorName(c) {
3   switch(c) {
4     case COLOR_BLUE:
5       return 'blue'
6     …
7   }
8 }
9 let cName = colorName('COLOR_BLUE');

Zeile 9 zeigt, dass der Zugriff gelingt, indem eine Zeichenkette benutzt wird anstatt der Konstanten. Das passiert wegen einer Unachtsamkeit, aus Unkenntnis oder absichtlich zur Umgehung von Programmierpfaden. Es gibt viele “Gründe”, warum ein Entwickler undiszipliniert ist. Wird nun die Konstante umbenannt, verlässt sich derjenige auf die Wirkung der Umbenennung. Die Zeichenfolge wird davon nicht erfasst, ein Programmierfehler entsteht und möglicherweise sehr weit von der Stelle entfernt, wo die Änderung vorgenommen wurde.

Symbole üben hier einen gewissen Zwang aus, der die Benutzung von Zeichenketten verhindert oder zumindest deren Benutzung zuverlässig erkennt.

 1 const COLOR_RED = Symbol();
 2 const COLOR_GREEN = Symbol();
 3 const COLOR_BLUE = Symbol();
 4 function colorName(c) {
 5   switch(c){
 6     case COLOR_BLUE:
 7       return 'blue'
 8     default:
 9       throw new Error('Unknown color option');
10   }
11 }
12 let cName = colorName(COLOR_BLUE);

Wir nun eine Zeichenkette benutzt, oder auch nur ein anderes Symbol, wirft der Code zuverlässig eine Ausnahme. Die Benutzung der Konstanten wird durch die Symbole effektiv erzwungen.

1.7 Arrays

Arrays sind ebenfalls Objekte. Sie können diese mit dem Konstruktor Array oder dem []-Literal anlegen:

• Konstruktor mit Daten: new Array(elm1, elm2, elm3, …)
• Konstruktor ohne Daten: new Array(length)
• Literal: [elm1, elm2, elm3]

Einige Methoden für Arrays

Es gibt Methoden, die ein existierendes Array verändern:

push(e)

Fügt ein Element am Ende ein und gibt die neue Länge zurück.

pop()

Entfernt das Element am Ende und gibt es zurück.

reverse()

Dreht die Reihenfolge der Elemente im Array um.

shift()

Entfernt das Element am Anfang und gibt es zurück.

sort()

Sortiert das Array und gibt das neue Array zurück.

splice(start, entfernen, neu...)

Entfernt Elemente und fügt neue ein. Die zu entfernenden werden ab start gezählt und die Anzahl mit entfernen angegeben. Alle weiteren Parameter werden als neue Elemente ab start eingefügt.

unshift(neu...)

Fügt Elemente am Anfang ein und gibt die neue Länge zurück.

Es gibt weiterhin solche Funktionen, die etwas zurückgeben, jedoch am Array selbst keine Änderungen vornehmen:

join(sep)

Verbindet alle Elemente eines Arrays zu einer Zeichenkette. Als Trennzeichen – welches optional ist – wird das oder werden die Zeichen sep benutzt.

slice(start, ende)

Extrahiert den Teil eines Arrays von start bis ende.

concat

Verbindet Arrays zu einem neuen Array.

indexOf(s)

Index der ersten Fundstelle der Zeichen s oder -1, falls nichts gefunden wurde.

lastIndexOf

Index der letzten Fundstelle der Zeichen s oder -1, falls nichts gefunden wurde.

Methode, die auf Iteratoren aufsetzen, eignen sich zum Durchlaufen von Arrays:

forEach(callback, this)

Ruft eine Funktion callback für jedes Element des Arrays auf. Der Parameter this kann benutzt werden, um der Funktion den Wert für this vorzugeben.

every(callback, this)

Gibt true zurück, wenn jedes Element eines Arrays einer in der Rückruffunktion benannten Bedingung gehorcht.

some(callback, this)

Gibt true zurück, wenn mindestens ein Element eines Arrays einer in der Rückruffunktion benannten Bedingung gehorcht.

filter(callback, this)

Gibt ´die Elemente zurück, die der in der Rückruffunktion benannten Bedingung gehorchen.

map(callback, this)

Gibt die Elemente zurück, die die Rückruffunktion für jedes Element zurückgibt.

reduce(callback, init)

Reduziert ein Array, indem alle Werte gelesen werden. Der vorherige Wert wird mittels Rückruffunktion weitergereicht, sodass man addieren, subtrahieren oder sonstwas mit den Werten anstellen kann. Am Ende wird ein skalarer Wert zurückgegeben. Die Funktion beginnt links, am Index 0.

reduceRight(callback, init)

Reduziert ein Array, indem alle Werte gelesen werden. Der vorherige Wert wird mittels Rückruffunktion weitergereicht, sodass man addieren, subtrahieren oder sonstwas mit den Werten anstellen kann. Am Ende wird ein skalarer Wert zurückgegeben. Die Funktion beginnt rechts, am letzten Index.

1.8 Operatoren

Die Operatoren in JavaScript sind unspektakulär. Es ist eher der Einsatz, der einige interessant macht.

Operatoren für Objekte

Es gibt einige spezielle Operatoren, die vor allem dem Umgang mit Objekten dienen:

• new: Erstellt eine Instanz eines Objekts
• instanceof: Prüft ob ein Objekt eine Instanz eines Typs ist
• typeof: Gibt den Typ eines Objekts zurück
• in: Testet, ob ein Objekt eine Eigenschaft enthält
• delete: Löscht eine Instanz eines Objekts

1 if (this instanceof Person) {
2    // Aktion, wenn passender Objekttyp
3 }

Im Kapitel zu Objekten folgen dazu weitere Informationen. An dieser Stelle nur der Hinweis, das new tatsächlich ein Operator ist und eine Aktion auf einer Funktion ausführt.

Zu delete ist anzumerken, dass JavaScript als verwaltete Sprache einen Garbage Collector besitzt und verwaiste Variablen selbst entsorgt. Normalerweise wird der Aufruf nicht benötigt. Will man Objekte aber vorher oder vorsorglich loswerden, ist der Einsatz sinnvoll.

Spread-Operator

Etwas speziell ist der Spread-Operator .... Er dient der Expansion von Objekten in Variablen oder in Array-Elemente. Angenommen eine Funktion erwartet einzelne Argumente, aber Sie haben ein Array. Dann geht folgendes:

1 function myFunction(a, b, c) { }
2 var args = [10, 20, 30];
3 myFunction(...args);

In Zeile 3 wird der Spread-Operator dem Wert vorangestellt, um die Auflösung zu erzwingen. Das gilt auch, wenn Elemente eines Arrays erreicht werden sollen:

1 var parts = ['shoulders', 'knees'];
2 var more = ['head', ...parts, 'foot', 'toes'];

Die Variable parts wird erst in einzelne Elemente zerlegt und dann werden diese eingefügt.

Vergleichsoperatoren

Die logischen Vergleichsoperatoren sind folgende:

• ==: Vergleich auf Wert-Gleichheit
• !=: Vergleich auf Wert-Ungleichheit
• ===: Vergleich auf Wert- und Typ-Gleichheit
• !==: Vergleich auf Wert- und Typ-Ungleichheit
• &&: Logisches “und”
• ||: Logisches “oder”

Guard

&& ist das logische UND, aber auch der guard-Operator. Wenn der erste Operand true ergibt, dann ist das Ergebnis der zweite Operand, sonst wird der erste Operand zurückgegeben. Das können Sie nutzen, um null-Referenzen zu vermeiden. Ohne Operator würde dafür ein if zum Einsatz kommen:

1 if (a) {
2   return a.member;
3 } else {
4   return a;
5 }

Die folgende Kurzschreibweise mit guard-Operator ist weitaus einprägsamer:

return a && a.member;

Der Nullkettenoperator, der mit ES2020 eingeführt wurde, vereinfacht diesen Aufruf nochmals:

return a?.member;

Beachten Sie hier, dass nicht alle Umgebungen dies bereits unterstützen. Die Einführung erfolgte in folgenden Versionen:

• Chrome 80
• Edge mit Chromium 80
• Firefox 74
• Safari 13.1
• Node.js 14

Das heißt, der alte Edge und IE können das nicht. Es gibt Polyfills oder die Option, Babel oder TypeScript zu nutzen.

Default

|| ist das logische ODER und auch der default-Operator. Wenn der erste Operand true ergibt, dann ist das Resultat der erste Operand, sonst ist das Resultat der zweite Operand. Dies können Sie verwenden, um Standardwerte zu setzen. Ohne Operator würde dafür ein if zum Einsatz kommen:

1 var meinString;
2 if (meinString == undefined || meinString.length == 0) {    
3    meinString = "mein wert"; 
4 } 

Die Kurzschreibweise mit default-Operator ist weitaus einprägsamer:

var meinString; 
meinString = meinString || "mein wert";

Das !-Zeichen ist das logische Nein (not). Wenn der Operand true ist oder ergibt, ist das Resultat false. Sonst ist das Resultat immer true. Trickreich ist !!, das benutzt werden kann, um einen Ausdruck in ein Boolean zu konvertieren:

var someExpression = 14;
var someBoolean = !!someExpression;

Dieser Ausdruck ergibt true.

1.9 Anweisungen – Statements

Folgende Anweisungen stehen als Schlüsselwörter zur Verfügung:

• if, else
• switch
• while, do
• for, for in, for of
• break
• continue
• return
• try/catch/throw
• function
• var, let, const

Kontrollstrukturen: if – else

Die if-Anweisung ist eine einfache Fallunterscheidung. Der if-Ausdruck muss vom Typ Boolean sein oder er wird in ein Boolean umgewandelt. Der else-Teil kann entfallen.

1 if (Bedingung) {
2   Anweisung1;
3   Anweisung2;
4 } else {
5   Anweisung3;
6 }

Kontrollstrukturen: switch – else – default

Der Befehl switch dient der Fallunterscheidung. Als Ausdruck im switch und den case-Marken können Number, String und andere Typen gleichzeitig verwendet werden. Die case-Marken sollten von einem break beendet werden. Wird ein explizites case nicht gefunden, wird der default-Block angesprungen. Der default-Block kann entfallen.

Kontrollstrukturen: Schleifen

Die Schleifen in JavaScript nutzen die Schlüsselwörter for, while und do-while.

while

Eine while-Schleife wird, wie auch die for-Schleife, so lange ausgeführt wie die Bedingung wahr (true) ist. Die Bedingung wird vor dem Schleifendurchlauf getestet. Es kann also passieren, dass der Inhalt der Schleife nie erreicht wird.

1 while (Bedingung) {
2   Anweisungen ;
3 }

do

Alternativ zur while-Schleife kann die do-Schleife verwendet werden, wenn die Bedingung am Ende eines jeden Schleifendurchlaufs geprüft werden soll. Wenn die Bedingung nicht zutrifft wird die Schleife dennoch mindestens einmal durchlaufen.

1 do {
2   Anweisungen ;
3 } while (Bedingung);

for

Für Schleifen, welche im weitesten Sinne einer Aufzählung entsprechen, kommt die for-Schleife zum Einsatz, welche aus einem Anfangswert, einer Bedingung und einem Iterator besteht.

Solange die Bedingung wahr (true) ist, wird die Ausführung der Schleife fortgesetzt. Dabei ist zu beachten, dass wenn die Bedingung beim Betreten bereits falsch (false) ist, die Anweisungen innerhalb der Schleife nicht durchlaufen werden. Nach jedem Schleifendurchlauf wird die Iterationsanweisung ausgeführt und die Bedingung erneut geprüft.

Allgemein sieht das folgendermaßen aus:

1 for (Anfangswert; Bedingung; Iterationsanweisung) {
2   // Anweisungen;
3 }

Ein praktisches Beispiel zeigt das folgende Listing 1.6.

1 for (i = 1; i < 11; i++) {
2   console.log("I = " + i + " I*I = " + (i*i) + "<br />");
3 }

Zunächst wird die Variable i deklariert und mit dem Wert 1 initialisiert. Bitte beachten Sie, dass hier die Verwendung des Schlüsselwortes var nicht erforderlich ist (Scope ist immer lokal).

In der Bedingung wird überprüft, ob i kleiner 11 ist, das bedeutet, die Schleife wird 10 Mal durchlaufen. In der Iterationsanweisung wird i mit Hilfe des unären Inkrement-Operators ++ um Eins erhöht. An dieser Stelle können Sie auch i+=1 oder i=i+1 verwenden, um gegebenenfalls andere Schrittweiten vorzugeben.

Eine Variante der for-Schleife kann verwendet werden, um die Eigenschaften eines Objekts zu durchlaufen: die for in-Schleife (hier mit Ausgabe ins Dokument):

1 var ausgabe = "";
2 for (var eigenschaft in document) {
3     ausgabe = ausgabe + "document." + eigenschaft + ": " +
4        document[eigenschaft] + "<br>";
5 }
6 document.write("<h1>Eigenschaften des Objekts " +
7                "<i>document</i></h1>");
8 document.write(ausgabe);

Das Beispiel zeigt, wie die Eigenschaften des Objekts document durchlaufen werden können, um beispielsweise die Fähigkeiten des jeweiligen Browsers zu ermitteln.

Schleifenkontrolle

Mitunter kommt es vor, dass eine Schleife vorzeitig abgebrochen werden soll. Hierfür wird das Schlüsselwort break verwendet. Mit Hilfe des Schlüsselwortes continue ist es möglich, die Abarbeitung mit dem nächsten Schleifendurchlauf fortzusetzen und alle folgenden Anweisungen im Anweisungsblock auszulassen.

1 for (i = 1; i < 11; i++) {
2   if (i == 5) continue;
3   console.log("I = " + i + " I*I = " + (i * i));
4   if (i == 9) {
5     break;
6   }
7 }

Wenn i gleich 5 ist, wird die Abarbeitung der Schleife bei 6 fortgesetzt und alle weiteren Anweisungen werden übersprungen. Wenn i gleich 9 ist, wird die Schleife verlassen und keine weiteren Durchläufe ausgeführt. break und continue können sowohl für for als auch für while- und do-Schleifen verwendet werden.

Verschachteln von Schleifen

Um bei geschachtelten Schleifen genauer festlegen zu können, welche der Schleifen mit einem continue fortgesetzt wird, wird auf eine Marke (label) mit einem Namen und einem Doppelpunkt verwiesen.

1 let i, j;
2 outer: for (i = 0; i < 10; i++) {
3     inner: for (j = 0; j < 10; j++) {
4        if (j==3) continue inner;
5        if (j==6) continue outer;
6       document.write(i + " * " + j + " = " + (i * j) +
7                      "<br />");
8     }
9   }

Den Schleifen wurden jeweils die Label inner und outer zugeordnet, um später bei der Verwendung gezielt die innere oder die äußere Schleife ansprechen zu können. So wird für alle j gleich 3 die innere Schleife fortgesetzt und für alle j gleich 6 die äußere Schleife.

Schleifen mit for..in

Diese Anweisung dient dazu, ein Objekt zu durchlaufen. Objekte sind intern Maps, also Gebilde, die eine Struktur mit Schlüssel-/Werte-Paaren enthalten. Diese Schleife durchläuft alle Mitglieder eines Objekts. Dabei spielt es keine Rolle, ob es sich um Eigenschaften oder Methoden handelt. Dies ist oft nicht genau das, was gesucht wird und deshalb wird häufiger die neue Version for..of benutzt.

Schleifen mit for..of

Die Iteratoren in ES2015 ermöglichen es, eigene aufzählbare Objekte zu erstellen. Dazu ist nicht unbedingt ein Array erforderlich. Zum Durchlaufen gibt es die neue Schleifenform for..of.

 1 let fibonacci = {
 2   [Symbol.iterator]() {
 3     let pre = 0, cur = 1;
 4     return {
 5       next() {
 6         [pre, cur] = [cur, pre + cur];
 7         return { done: false, value: cur }
 8       }
 9     }
10   }
11 }
12 
13 for (var n of fibonacci) {
14   // Ende bei 1000
15   if (n > 1000)
16     break;
17   console.log(n);
18 }

Der Code nutzt eine bestimmte Objektstruktur, die vorgegeben ist. Deklariert muss sie nicht werden. Würde man denselben Code in TypeScript erstellen, könnten die Typ-Beschreibungen folgendermaßen aussehen:

 1 interface IteratorResult {
 2   done: boolean;
 3   value: any;
 4 }
 5 interface Iterator {
 6   next(): IteratorResult;
 7 }
 8 interface Iterable {
 9   [Symbol.iterator](): Iterator
10 }

In ES2015 ist es nicht möglich, derartige Typ-Beschreibungen zu hinterlegen. Die Darstellung dient nur der Erläuterung des inneren Verhaltens.

Polyfill erforderlich

Derzeit wird diese Technik nicht überall unterstützt. Setzen Sie gegebenenfalls ein Polyfill ein – eine Bibliothek, die bei Bedarf die fehlenden Funktionen nachbildet.

Fehlerbehandlung

Ausnahmen sind Fehlerbedingungen, welche sich nicht ohne weiteres vorhersehen lassen. Eine Ausnahme wäre beispielsweise zu erwarten, wenn versucht wird, etwas auf eine Festplatte zu schreiben, diese jedoch voll ist.

Ausnahmen (Exceptions)

Folgende Schlüsselwörter stehen zur Verfügung:

• try: Abgesicherter Block
• catch: Fanganweisung
• finally: Unbedingt ausgeführter Anteil (mit oder ohne Fehler)
• throw: Weiterleiten oder Werfen einer Ausnahme

Im Falle eines Fehlers kann eine Ausnahme geworfen werden. Vereinfacht ausgedrückt wird mit dem “Werfen” einer Ausnahme der Programmfluss unterbrochen und an der Stelle fortgesetzt, wo diese Ausnahme mit einem try/catch-Block abgefangen wurde. Grundsätzlich kann jedes Objekt geworfen werden, dabei spielt es keine Rolle, ob Sie eine Zeichenkette oder ein selbstdefiniertes Objekt verwenden. Wichtig ist das Fangen einer Ausnahme.

 1 function ZeroDivError (msg) {
 2 
 3   this.name = 'ZeroDivError';
 4   this.message = msg === 'string' && msg.length != 0 ? msg :
 5        'Division durch Null!';
 6 
 7   this.toString = function () { return this.name + ': ' +
 8        this.message }
 9 }
10 
11 // Demo-Funktion
12 function div (a, b) {
13   if (b == 0)
14       throw new ZeroDivError ();
15   return a / b;
16 }
17 
18 // Abfangen von Exceptions
19 try {
20 
21   document.write ('10 / 2 = ' + div (10, 2) + '<br>');
22   document.write ('5 / 0 = ' + div (5, 0) + '<br>');
23 } catch (e) {
24   document.write ('Exception aufgetreten: ' + e);
25 }

Um eine benutzerdefinierte Ausnahme werfen zu können, ist es erforderlich, eine entsprechende Instanz zu erzeugen. In diesem Beispiel heißt diese ZeroDivError. Die Objektorientierung unter JavaScript wird unter Abschnitt Objektorientierung noch genauer betrachtet werden. Mit Hilfe des this-Zeigers werden Eigenschaften wie der Name name und die Nachricht msg festgelegt. Soll keine Nachricht angegeben werden, kommt eine Standardnachricht zur Anwendung. Die Methode toString wird erstellt. Immer wenn ein Objekt in eine Zeichenkette zu wandeln ist, wird diese Methode automatisch aufgerufen. In der Funktion div wird überprüft, ob der zweite Parameter für die Division null ist. Für den Fall, dass der Parameter b==0 ist, wird eine entsprechende Ausnahme erzeugt und geworfen.

Mögliche Programmteile, welche eine Ausnahme werfen könnten, werden mit einem try-Block umschlossen, welcher immer von einem catch-Block gefolgt wird. Tritt jetzt eine Ausnahme auf, wird die Abarbeitung in dem try-Block abgebrochen und in dem catch-Block fortgesetzt. Ferner wird die geworfene Ausnahme innerhalb des catch-Blocks zur weiteren Verarbeitung bereitgestellt.

Optional kann der catch-Block noch von einem finally-Block gefolgt werden. Unabhängig davon, ob eine Ausnahme aufgetreten ist oder nicht, wird der finally-Block immer als letzter Block durchlaufen.

Standardausnahmeobjekte

Folgende Fehlerklassen sind für die Benutzung mit throw eingebaut:

• Error
• EvalError
• InternalError
• RangeError
• ReferenceError
• SyntaxError
• TypeError
• URIError

Den Namenskonventionen folgend sollte man eigene Fehlerklassen auch mit dem Suffix Error belegen.

1.10 Variablen und Scope

Globale Variablen können an jeder Stelle durch Zuweisen eines Wertes angelegt werden. Lokale Variablen werden innerhalb einer Funktion mit Hilfe des Schlüsselwortes var angelegt. Initiale Werte können Sie sofort angeben. Mehrere Variablen können durch Komma getrennt werden.

Plattform Global

Variablen sind intern Eigenschaften eines globalen Objekts. Dies ist abhängig von der gewählten Plattform. Normalerweise läuft die Suche nach einer Variablen im Scope ab und damit bei globalem Scope in das globale Objekt. Soweit es sich um selbst definierte Variablen handelt, ist das das natürliche Verhalten und muss nicht weiter beachtet werden. Wenn es aber um den Zugriff auf globale Eigenschaften geht, die gesucht werden, muss man den Namen des globalen Objekts kennen:

• window: Browser
• global: Node.js
• self: Web Worker

Skripte zu schreiben, der plattformunabhängig sind, kann deshalb aufwändig sein. Ab ES2020 steht deshalb ein neues Objekt zur Verfügung: globalThis. Wenn also die Spezifizierung des globalen Objekts notwendig ist, benutzen Sie immer dieses.

Abgesehen davon ist es immer besser mit einem eingeschränkten Sichtbarkeitbereich zu arbeiten. Dies erklärt der nächste Abschnitt.

Scope – der Sichtbarkeitbereich

In ES 5 hatten Blöcke (in {}) keinen eigenen Scope. Nur Funktionen hatten einen Scope. Variablendefinitionen innerhalb einer Funktion sind außerhalb der Funktion nicht sichtbar – sie sind im Funktions-Scope (auch als Gültigkeitsbereich bezeichnet).

Dieses Verhalten wird mit var erzeugt. Wird es benutzt, ist die Variable lokal im Scope einer Funktion. Gibt es keine Funktion, ist die Variable global. Weitere Schutzebenen existieren nicht.

Variablen mit let und const

Die Schlüsselwörter let und const vereinbaren Variablen, nutzen aber einen anderen Scope als bei der Verwendung von var. Statt der Bekanntmachung innerhalb einer Funktion wird die Variable nun für einen Block deklariert. ECMAScript 2015 verfügt also über einen Block-Scope. Der Scope entsteht durch ein Paar geschweifte Klammern.

 1 function f() {
 2   {
 3     let x;
 4     {
 5       // Ein innerer (Block)-Scope
 6       const x = "sneaky";
 7       // Fehler, wegen `const` unveränderlich
 8       x = "foo";
 9     }
10     // Möglich, weil im Scope und durch `let` veränderlich
11     x = "bar";
12     // Fehler, erneute Deklaration im Scope unzulässig
13     let x = "inner";
14   }
15 }

Die Werte, die mit const zugewiesen wurden, sind überdies unveränderlich. Ansonsten verhält sich const wie let. Beachten Sie allerdings, dass const keinen Schutz für Eigenschaften eines Objekts beinhaltet. Objektmitglieder lassen sich weiter ändern.

Das return-Schlüsselwort

Mit return weisen Sie das Verlassen der aktuelle Funktion an. Es kann mit oder ohne Rückgabewert verwendet werden:

return expression;
return;

Ohne Ausdruck gibt return den Wert undefined zurück. Die Ausnahme hier: Konstruktoren geben die Instanz des Objekts zurück. Dazu finden Sie mehr im Kapitel zu objektorientierter Programmierung.

2 Objektorientierung

JavaScript verfügt über eine sehr einfache Unterstützung für objektorientierte Programmierung. Es wird nicht explizit von Klassen gesprochen, da sich die abstrakte Definition eines Objekts nur sehr gering von der konkreten Implementierung einer Funktion unterscheidet. JavaScript-Objekte verfügen über Eigenschaften (Attribute) und Funktionen (Methoden).

2.1 Erstellen von Objekten

Im Wesentlichen gibt es drei Möglichkeiten, ein Objekt in JavaScript zu erstellen. Im Folgenden sollen diese kurz vorgestellt werden.

Deklaration mit new

Die einfachste Methode Objekte zu erstellen, ist die Verwendung des Operators new. Dies ist eine Referenz an die Sprache Java, tatsächlich verhält sich new etwas anders in JavaScript, denn in Java ist es ein Schlüsselwort, kein Operator.

1 const person = new Object();
2 person.name = "Jörg Krause";
3 person.height = "180cm";
4 
5 person.run = function() {
6   this.state = "running";
7   this.speed = "4m/s";
8 }

Ein benutzerdefiniertes Objekt person wird erstellt. Dem Objekt werden zwei Eigenschaften zugewiesen (name und height). Ferner wird eine Mitgliedsfunktion run erstellt, welche wiederum zwei neue Eigenschaften dem Objekt hinzufügt. Statt der Schreibweise new Object() kann auch das Objektliteral {} benutzt werden. Wegen seiner Kürze wird es meist bevorzugt.

Deklaration mit der Literalnotation

Die Literalnotation ist eine implizite Schreibweise.

 1 const myObject = {
 2   property1: "Hello",
 3   property2: "World",
 4   property3: ["start", 1, 2, 3, "ende"],
 5 
 6   method1: function(){
 7               console.log("Methode wurde aufgerufen: " +
 8                            this.property1);
 9             }
10 };
11 myObject.method1();

Zunächst wird myObject angelegt und die Eigenschaften property1 bis property3 werden mit Werten belegt (Zeile 2 bis 4). Dann wird eine Mitgliedsfunktion method1 (Zeile 6) deklariert. Folgende Ausgabe ergibt sich hier:

JSON

Beachten Sie, dass gültiges JSON (JavaScript Object Notation), so wie es viele Dienste im Web erzeugen, ein gültiges Objektformat in JavaScript ist. Umgekehrt gilt dies nicht, von allen in JavaScript syntaktisch gültigen Schreibweisen eines Objekts sind nur wenige Kombinationen gültiges JSON.

Tatsächlich wird JSON auch mit anderen Sprachen benutzt und ist trotz des unglücklich gewählten Namens keinesfalls eng mit JavaScript verbunden.

JSON wird explizit durch das Objekt JSON unterstützt, mit dem Zeichenketten geparst oder erzeugt (serialisiert) werden können. Nur zwei statische Methoden existieren:

• JSON.parse(): Parst eine Zeichenketten und erzeugt ein Objekt. Ein weiteres Argument liefert eine optionale Steuerfunktion.
• JSON.stringify(): Serialisiert ein Objekt in eine Zeichenkette. Es gibt zwei weitere optionale Argumente, die den Vorgang steuern und das benutzte Leerzeichen bestimmen.

Der Konstruktor

Die bisher gezeigten Varianten ein Objekt anzulegen sind etwas eingeschränkt, da keine Möglichkeit besteht, mehrere Instanzen des gleichen Objekts anzulegen. Ferner ist es auch nicht möglich, beim Anlegen Parameter für die Initialisierung des Objekts mitzugeben.

Klassische Konstruktorfunktionen

Aus diesem Grund soll an diese Stelle die dritte Variante für das Erstellen eines Objekts mittels Prototyping gezeigt werden. Zunächst wird ein abstraktes Objekt deklariert und anschließend wird dieses mit einem konkreten Parameter instanziiert.

 1 function Cat(name) {
 2    this.name = name;
 3    this.talk = function() {
 4       alert( this.name + " macht miau!" )
 5    }
 6 }
 7 
 8 // Verwendung
 9 const cat1 = new Cat("Juri");
10 cat1.talk(); //zeigt "Juri macht miau!"
11 
12 cat2 = new Cat("Wanja");
13 cat2.talk(); //zeigt "Wanja macht miau!"

Die abstrakte Deklaration des Konstruktors des Objekts unterscheidet sich zunächst nicht von der Deklaration einer Funktion. Der Unterschied liegt in der Benutzung von new. Folgender Ablauf passiert intern:

• Erzeuge zuerst ein neues leeres Objekt { }
• Setze dann die constructor-Eigenschaft auf die Konstruktorfunktion
• Setze die Basisklasse Object auf den Prototype der Funktion myObject.prototoype = { }
• Rufe die Konstruktorfunktion im Kontext des neuen Objekts auf, das heißt mit this als Verweis auf das Objekt.

Wird nun das Schlüsselwort this zusammen mit einer Eigenschaft oder einer Methode verwendet, wird auf das neue Objekt verwiesen, nicht auf die Deklaration. Praktisch hat man so eine Unterscheidung zwischen der Deklaration (lies: Klasse) und der Instanz.

Nachdem der Prototyp des Objekts angepasst wurde, kann wieder eine Instanz unter Verwendung des Schlüsselwortes new erstellt werden. Die Instanz wird verwendet, indem die Eigenschaft oder Methode mit einem Punkt “.” getrennt aufgerufen wird. Alternativ ist auch hier die Schreibweise mit der Index-Notation möglich: cat["talk"]().

Besonders hervorzuheben ist die Funktion, das bereits existierende Objekt von den per Prototyp hinzugefügten Funktionen und Eigenschaften profitieren. Dies ist aber nur dann der Fall, wenn bei der Deklaration keine Definition erfolgte. Im folgenden Beispiel “lernen” die Instanzen die Funktion talk erst später:

 1 function Cat(name) {
 2    this.name = name;
 3 }
 4 
 5 // Instanzen erstellen
 6 cat1 = new Cat("Juri");
 7 cat2 = new Cat("Wanja");
 8 
 9 Cat.prototype.talk = function() {
10    alert( this.name + " macht miau!" );
11 };
12 
13 cat1.talk(); //zeigt "Juri macht miau!"
14 cat2.talk(); //zeigt "Wanja macht miau!"

Anders sieht es aus, wenn es die Funktion bereits gibt:

 1 function Cat(name) {
 2    this.name = name;
 3    this.talk = function () { alert('stumm'); };
 4 }
 5 
 6 // Instanzen erstellen
 7 cat1 = new Cat("Juri");
 8 cat2 = new Cat("Wanja");
 9 
10 Cat.prototype.talk = function() {
11    alert( this.name + " macht miau!" );
12 };
13 
14 cat1.talk(); //zeigt "stumm"
15 cat2.talk(); //zeigt "stumm"

Der Prototyp wird zwar geändert, aber die Instanz-Funktion ist davor erstellt und deshalb im Suchbaum zuerst dran. Der Interpreter findet diese Stelle erst und führt sie aus. Der Prototyp wird nicht mehr erreicht – er wurde überdeckt¹. Das ist das normale Verhalten, denn der Prototyp dient lediglich dazu, eine Standarddefinition bereitzustellen, für den Fall, dass es keine explizite Definition gibt. Gibt es diese aber, ist es nicht mehr notwendig, im Prototyp nachzuschauen. Die folgende Grafik zeigt den Suchbaum.

Object.prototype.talk
|
+----Cat.prototype.talk ('macht miau')
     |
     +----cat1.talk ('stumm')

Die Ausgabe von ‘stumm’ ist im finalen Objekt und der Suchbaum kommt nicht mehr zur Anwendung.

Methoden und Eigenschaften

Das Hinzufügen von Methoden und Eigenschaften zu Laufzeit ist der primäre Zweck der Eigenschaft prototype. Sie bekommen nachträglich Zugriff auf die Definition des Objekts. Auf diese Weise kann das vorletzte Beispiel schnell um eine Funktion zum Umbenennen erweitert werden.

1 Cat.prototype.changeName = function(name) {
2       this.name = name;
3 }
4 
5 const firstCat = new Cat("Juri");
6 firstCat.changeName("Wanja");
7 // zeigt "Wanja sagt miau!"
8 firstCat.talk();

Der Eigenschaft prototype des Objekts Cat wird eine Funktion changeName (Zeile 1) hinzugefügt, indem diese einfach zugewiesen wird. Auf diese Weise wäre es denkbar, einem Browser, welcher Objekte enthält, denen Funktionen oder Eigenschaften fehlen, diese quasi nachzurüsten.

Umgang mit Eigenschaften

ECMAScript erlaubt die Deklaration von getrennten Get- und Set-Methoden für Eigenschaften. Das folgende Listing 2.2 zeigt eine solche Deklaration:

 1 var Rectangle = function (width, height) {
 2   this._width = width;
 3   this._height = height;
 4 };
 5 
 6 Rectangle.prototype = {
 7   set width (width) {
 8      this._width = width;
 9   },
10   get width () {
11     return this._width;
12   },
13   set height (height) {
14     this._height = height;
15   },
16   get height () {
17     return this._height;
18   },
19   get area () { return this._width * this._height; }
20 };
21 var r = new Rectangle(50, 20);
22 console.log(r.area);

Erfolgt nun der Aufruf der Eigenschaft area, so wird 1000 ausgegeben. Tatsächlich handelt es sich hier – wie bei vielen anderen Programmiersprachen auch – um Eigenschaftsmethoden. Die Funktionsklammern () werden weggelassen, wenn die Schlüsselwörter set beziehungsweise get benutzt worden sind.

Private Variablen und Funktionen

In JavaScript sind alle Mitglieder öffentlich. Jede Funktion kann auf diese Mitglieder zugreifen, weitere hinzufügen, diese verändern oder entfernen. Jedoch gibt es die Möglichkeit, private Mitglieder zu erzeugen, auf die nur von privilegierten Funktionen zugegriffen werden kann. Dazu wird die Eigenschaft von JavaScript benutzt, dass Variablen in Funktionen nur in diesem Gültigkeitsbereich sichtbar sind.

Private Mitglieder werden innerhalb des Konstruktors deklariert. Eigenschaften werden mit Hilfe des Schlüsselwortes var angelegt. Funktionen werden innerhalb des Konstruktors definiert.

 1 function SomeObject(param) {
 2 
 3   function dec() {
 4     if (this.member > 0) {
 5       this.member -= 1;
 6       return true;
 7     } else {
 8       return false;
 9     }
10   }
11 
12   this.member = param;
13   dec();
14   dec();
15   return this;
16 }
17 
18 var o = SomeObject(10);
19 
20 console.log(o.member);

Der Konstruktor für das Objekt SomeObject wird definiert (Zeile 1). Innerhalb des Konstruktors wird eine Variable für die Instanzen des Objekts festgelegt, member. Der Parameter param wird der öffentlichen Variablen member (Zeile 11) zugewiesen. Die Methode dec ist privat.

Die private Methode dec (Zeile 3) kann auf die privaten Eigenschaften zugreifen, weil diese innerhalb der gleichen Funktion (dem Konstruktor) deklariert sind. Öffentliche (public) Funktionen können nicht direkt auf private Funktionen und Variablen zugreifen. Hierfür sind sogenannte privilegierte Funktionen erforderlich. So führt folgender Aufruf zu einem Fehler:

o.dec();

Privilegierte Funktionen

Eine privilegierte Funktion kann auf private Eigenschaften und Funktionen zugreifen, ist jedoch selbst öffentlich zugreifbar. Alle Funktionen, welche innerhalb des Konstruktors mit Hilfe des this-Operators zugewiesen werden, sind privilegierte Funktionen.

 1 function SomeObject(param) {
 2 
 3   function dec() {
 4     if (secret > 0) {
 5         secret -= 1;
 6         return true;
 7     } else {
 8         return false;
 9     }
10   }
11 
12   this.member = param;
13   var secret = 3;
14   var that = this;
15 
16   this.privileged = function () {
17     if (dec()) {
18         return that.member;
19     } else {
20         return null;
21     }
22   };
23 }
24 
25 var o = new SomeObject(10);
26 console.log(o.privileged());
27 console.log(o.privileged());
28 console.log(o.privileged());
29 console.log(o.privileged());

Die privilegierte Funktion (Zeile 16) kann sowohl auf die privaten Funktionen (Zeile 12) und Eigenschaften als auch auf öffentliche Mitglieder (Zeile 17) zugreifen. Sie selbst ist als Teil des Prototypen öffentlich. Die Ausgabe dieses Beispiels zeigt internes deterministisches Verhalten. Es wird dreimal der Wert ausgegeben, der im Konstruktor übergeben wurde, danach null.

2.2 Vererbung

Vererbung in JavaScript basiert generell auf Prototypen, auch wenn das neue Schlüsselwort extends in Klassen benutzt wird.

Prototypische Vererbung

Prototyping ist in JavaScript die Technik, die beim Umgang mit Objekten die fehlenden Vererbungsfunktionen ersetzt. Zuvor jedoch eine kurze Wiederholung der Eigenschaften von Objekten.

Objekte sind Dictionaries (Maps) und können sehr flexibel erstellt werden. Die interne Umsetzung erlaubt alternativ zur intuitiven Objektschreibweise auch die Nutzung einer Art Array-Syntax. Hier ein einfaches Objekt:

1 var o1 = {};
2 o1.x = 3;
3 o1.y = 4;

Alternativ kann die Zuweisung der Eigenschaften auch sofort erfolgen:

1 var o2 = {
2   x : 3
3 };
4 
5 var o3 = {
6   first: o2,
7   second: function() { return 5; }
8 }

Das letzte Beispiel definiert second() als Methode. Alternativ zum Punkt kann auch folgende Schreibweise benutzt werden:

1 o2.x === 3;
2 o2["x"] === 3;
3 o2["the answer!"] = 42;

Der Vorteil der Array-Schreibweise liegt in der Möglichkeit, das Argument durch eine Variable zu ersetzen und Eigenschaften und Methoden so dynamisch nutzen und erzeugen zu können.

Objektabstammung

Alle Objekte stammen von Object ab. Betrachten Sie ein weiteres Objekt und eine Methode:

1 var o1 = { };
2 o1.valueOf() // Ausgabe: "[object Object]"

Dies funktioniert, obwohl hier vorab die Methode valueOf() nicht definiert wurde. Das liegt daran, dass jedes Objekt von der internen Klasse Object erbt und diese bringt die Methode valueOf() mit – valueOf() ist im Prototyp der Klasse Object definiert.

Prototypisch geerbte Methoden können überdeckt werden:

1 var o2 = {
2   valueOf: function() {
3     return 10;
4   }
5 };
6 o2.valueOf() // 10

Das Überdecken führt dazu, dass nun die eigene Definition ausgeführt wird.

Die Basismethoden

Folgende eingebaute Methoden stehen für alle Objekte zur Verfügung:

• create: Eine weitere Instanz aus dem Objekt ableiten (clonen)
• defineProperties: Einige Eigenschaften erstellen
• defineProperty: Eine Eigenschaft erstellen
• freeze: Ein Objekt “einfrieren”, um künftige Änderungen zu verhindern
• isFrozen: Gibt an, ob eine Objekt dynamisch erweitert werden kann (true zeigt an, dass dies nicht der Fall ist)
• hasOwnProperty: Feststellen, ob eine Eigenschaft geerbt oder im Objekt deklariert wurde
• toString: Zeichenkettenform ausgeben

Folgende eingebaute Eigenschaft existiert:

• prototype: Zugriff auf den Prototypen – die Standarddefinition

Objektvererbung

Schauen Sie zuerst auf eine Objektdefinition. Von dieser wird sodann eine Instanz angelegt, die unmittelbar erbt:

1 var point2d = { x:10, y:20 };
2 var point3d = Object.create(point2d);
3 point3d.z = 30;

Das Anlegen von Instanzen erfolgt mit Object.create. Der Prototyp des Objekts, der die zu erbenden Elemente enthält, wird dabei quasi nebenbei erzeugt. Dies erlaubt freilich nicht die Nutzung einer Konstruktor-Funktion, die das Objekt mit Stammeigenschaften versehen könnte. Das Objekt point3d enthält deshalb nicht, wie vielleicht erwartet, die Eigenschaften x und y. Um dies zu erreichen, kann folgendes Pattern helfen:

1 function create(parent) {
2   var F = function() {};
3   F.prototype = parent;
4   return new F();
5 }

Mit einer Konstruktorfunktion sieht das dagegen folgendermaßen aus:

1 function SomeConstructor() {
2 }
3 
4 var o = new SomeConstructor();

Hier wird als “Erbmasse” der Inhalt der Eigenschaft prototype der Funktion SomeConstructor benutzt. Die ist vorhanden, weil function selbst ein Objekt ist und dieses Verhalten von Object geerbt hat. Das Schlüsselwort new greift also auf SomeConstructor.prototype zu.

2.3 Exkurs Objekthierarchie

In diesem Abschnitt sollen einige Aspekte der objektorientierten Programmierung anhand eingebauter Funktionen vertieft werden.

Umgang mit this

Die Funktion call, die jedes Funktionsobjekt kennt, ruft die Funktion auf und übergibt ein Objekt als this in den Sichtbereich dieser Funktion. Optional werden Argumente übergeben.

function.call(obj, arg, arg, arg)

Die Funktion apply funktioniert wie call, aber die Argumente args sind ein Objekt vom Typ Array.

function.apply(obj, args)

 1 var obj = {
 2   sum: function(x,y) { return x + y; }
 3 }
 4 obj.sum(3,4);
 5 
 6 var obj2 = {
 7   offset: 7,
 8   sum: function(x, y) {
 9 	return x + y + this.offset;
10   }
11 }
12 
13 obj2.sum(3,4);
14 
15 var f = obj2.sum;
16 f(3,4) // NaN;
17 
18 f.call(obj2, 3, 4);

Im Beispiel manipuliert der Aufruf in Zeile 18 das this in Zeile 9. Der Aufruf in Zeile 16 gibt NaN (not a number) zurück, weil this bei der Benutzung von Referenzen – dies passiert durch die Zuweisung in Zeile 15, auf undefined gesetzt wird.

Des weiteren kommt die Methode bind zum Einsatz, die das Referenzobjekt this einmalig fest bindet und künftige Manipulationen unterdrückt.

 1 var Button = function(content) {
 2   this.content = content;
 3 };
 4 Button.prototype.click = function() {
 5   console.log(this.content);
 6 }
 7 
 8 var myButton = new Button('OK');
 9 myButton.click();
10 
11 var looseClick = myButton.click;
12 looseClick();
13 
14 var boundClick = myButton.click.bind(myButton);
15 boundClick();

Die Ausgabe ist: “OK”, “undefined”, “OK”. Die Ausgabe “undefined” kommt zustande, weil beim Aufruf von looseClick keine Referenz auf this vorhanden ist. Bei boundClick dagegen wurde diese zuvor mit bind festgelegt. Der nächste Abschnitt “Vertiefung zu Bindungen” geht weiter darauf ein.

Bindungen

Als Bindung ist in Programmiersprachen der Zeitpunkt der Bereitstellung von Variablen in Abhängigkeit vom Programmfluss gemeint. Normalerweise müssen Sie sich als Entwickler selten um die Bindung kümmern. Dies erledigt der Compiler oder Interpreter. Die Reihenfolge der Definition spielt keine Rolle. Darüber hinaus ist es üblich, dass Zugriffe ohne explizite Angabe des Sichtbereiches immer das aktuelle Objekt adressieren. Die explizite Angabe einer Zugriffsform mit einem Schlüsselwort wie this ist meist möglich, aber nicht notwendig. Wenn Sie von einer anderen Programmiersprache auf JavaScript wechseln, sollten Sie unbedingt beachten, das JavaScript (neben PHP übrigens), die große Ausnahme von dieser Regel ist. JavaScript erfordert eine explizite Angabe des Sichtbereiches, auch wenn es sich lediglich um die aktuelle Methode handelt.

Das liegt im Wesentlichen daran, dass JavaScript im traditionellen Sinne keine rein objektorientierte Sprache ist. Die prototypische Vererbung, die zuvor bereits vorgestellt wurde, ist eine andere Art des Umgangs mit Objekten. Damit einher geht ein anderes Bindungsverhalten – die Bindung ist immer explizit. Die explizite Bindung bezieht mit ein, dass das aktuelle Objekt nicht das ist, was man als Entwickler intuitiv erwartet. Dies wurde bereits bei der Vorstellung der Methode call gezeigt.

Das folgende Beispiel zeigt, was passiert, wenn dieses Verhalten nicht beachtet wird.

1 var john = {
2   name: 'Joerg',
3   greet: function(person) {
4     alert("Hallo " + person + ", ich bin " + name);
5   }
6 };
7 john.greet("Clemens");
8 // Ergibt: "Hallo Joerg, ich bin "

Da ist sicher nicht das erwartete Verhalten. Der Name erscheint nicht wie gedacht. Das Problem ist der Zugriff auf die Objekteigenschaft name in Zeile 4. Hier fehlt die Bindungsreferenz. Die Annahme, es würde schon das aktuelle Objekt sein (Joerg aus Zeile 1), ist schlicht falsch. Hier geht JavaScript einfach auf Suche nach dem Namen oberhalb der Definition. Das Ende ist das Objekt window, das keine Eigenschaft name hat und deshalb ist der Name leer (der Fehler wirkt sich nicht drastischer aus, weil der Rückgabewert undefined hier in eine leere Zeichenkette konvertiert wird).

Nun ein weiterer Versuch:

 1 // Global, entspricht: window.name = 'Uwe';
 2 name = 'Uwe';
 3 let john = {
 4   name: 'Joerg',
 5   greet: function(person) {
 6     alert("Hallo " + person + ", ich bin " + name);
 7   }
 8 };
 9 john.greet("Clemens");
10 // => "Hallo Clemens, ich bin Uwe"

Das funktioniert nur scheinbar richtig. Denn nun wurde tatsächlich dynamisch eine neue Eigenschaft name dem window-Objekt hinzugefügt. Globale Namen auf dieser Ebene sind aber ein Antipattern – vermeiden Sie das, wann immer es geht.

Korrekt ist die Benutzung von this:

1 var jk = {
2   name: 'Joerg',
3   greet: function(person) {
4     alert("Hallo " + person + ", ich bin " + this.name);
5   }
6 };
7 jk.greet("Clemens");
8 // => "Hallo Clemens, ich bin Joerg"

Das Schlüsselwort this ist hier die explizite Bindung an einen bestimmten Kontext – nämlich den des Aufrufers – was in diesem Fall das aktuelle Objekt ist.

Ein weiteres Beispiel zeigt, wie schnell auch this tückisch werden kann. Typisch sind Referenzen auf Funktionen, wie hier in Zeile 7:

1 var jk = {
2   name: 'Joerg',
3   greet: function(person) {
4     alert("Hallo " + person + ", ich bin " + this.name);
5   }
6 };
7 var fx = jk.greet;
8 fx("Clemens");
9 // Ergibt: "Hallo Clemens, ich bin "

Trotz der Angabe der expliziten Bindung funktioniert das nicht wie erwartet. this hat hier offensichtlich eine andere Bedeutung bekommen. Bei Referenzen geht die Bindung verloren, this weiß nicht, wo es herkommt. Hier hilft nur, die Bindung beim Aufruf explizit zu steuern. Ansonsten sucht JavaScript wieder den Objektbaum aufwärts und endet erneut bei window (im Browser) oder global (in Node).

Bindungen berücksichtigen

Code sollte die Bindungen explizit berücksichtigen. Wenn Sie eine Methode als Argument einer anderen Methode übergeben, dann gelangt die ausführende Instanz in den Kontext des Aufrufers und kann dann lokal binden. Hier ein Beispiel, zuerst mit einer Klassendefinition:

 1 function Person(first, last, age) {
 2   this.first = first;
 3   this.last = last;
 4   this.age = age;
 5 }
 6 Person.prototype = {
 7   getFullName: function() {
 8     alert(this.first + ' ' + this.last);
 9   },
10   greet: function(other) {
11     alert("Hallo " + other.first + ", ich bin " +
12     this.first + ".");
13   }
14 };

Nun wird dieser Code benutzt:

1 var jk = new Person('Joerg', 'Krause', 50);
2 var ck = new Person('Clemens', 'Krause', 25);
3 ck.greet(jk);

Das funktioniert soweit gut. Nun erfolgt eine Erweiterung:

1 function times(n, fx, arg) {
2   for (var index = 0; index < n; ++index) {
3     fx(arg);
4   }
5 }
6 times(3, ck.greet, jk); //
7 
8 times(1, jk.getFullName);

Hier ging die Bindung wieder verloren – JavaScript liest undefined. Nun kann das Problem leicht gelöst werden. Wenn der Aufruf jedoch in ein Framework geht und die Bindung nicht sichtbar ist, kann es sehr schwer sein, die Ursache für die Fehlfunktion zu finden. Hier ein Beispiel:

1 this.items.each(function(item) {
2   // Verarbeitung
3   this.markItemAsProcessed(item);
4 });

Dies funktioniert nicht, weil markItemAsProcessed über this nicht gefunden wird. Die Methode each stammt aus einer Bibliothek, auf die per Referenz verwiesen wird. Diese Referenz “bricht” den Zugriff (die Bindung) auf das aktuelle Objekt, indem die Methode markItemAsProcessed definiert wurde. Der Aufrufer bestimmt hier, was this tatsächlich ist. Das kann funktionieren, muss aber nicht. Meist wird this in der Tat manipuliert, um einen bequemen Zugriff auf einen Kontext oder eine Ereignisquelle zu erhalten.

Explizite Bindungen

Das explizite Binden erfolgt über die Methoden apply, call und bind. Jedes Funktionsobjekt (lies: Funktion), verfügt über diese Methode – sie werden vom Funktionsprototypen geliefert.

1 var fx = ck.greet;
2 fx.apply(ck, [jk]);

Der Aufruf (Zeile 2) erfolgt hier über apply. Der Kontext für die Bindung ist das erste Argument. Danach folgt ein Array mit allen anderen Argumenten der indirekt aufgerufenen Methode – egal wie viele das sind.

Die Methode call unterscheidet sich nur insofern, als dass hier die Argumente explizit angegeben werden und passen müssen.

1 var fx = ck.greet;
2 fx.call(ck, jk);

Besonders tückisch ist die Tatsache, dass nach dem Verlust der Bindung die explizite Bindung jedes Objekt akzeptiert. Es muss überhaupt kein Zusammenhang mit dem aktuellen Code bestehen. Das kann zu komplett unwartbarem und vor allem auch unlesbarem Code führen. Disziplin ist hier unerlässlich.

Solche freien Bindungen sind selten sinnvoll. Besser wäre es, man könnte die Bindung beschränken. Das geht nur über das Verschachteln von Funktionen, bei denen das durchgereichte Kontextobjekt unter Kontrolle ist:

1 function createBoundedWrapper(object, method) {
2   return function() {
3     return method.apply(object, arguments);
4   };
5 }

Das wird benutzt wie nachfolgend gezeigt:

1 var ckGreet = createBoundedWrapper(ck, ck.greet);
2 ckGreet(jk);

Das funktioniert, die Referenz ist festgelegt. Sie kann von außen auch nicht gestört werden.

2.4 Klassen

Klassen in ES2015 sind lediglich syntaktischer Zucker über dem Prototyp-Pattern, das bereits beschrieben wurde. Wenn Prototypen nicht verstanden wurden, helfen Klassen nicht wirklich weiter, weil sie sich nicht wie in anderen Sprachen verhalten (das gilt übrigens auch für TypeScript).

Unterstützt werden neben Prototypen auch Aufrufe der Basisklasse mittels super, die Bildung von Instanzen mit new und statische Methoden sowie Konstruktoren.

 1 class Person {
 2   constructor(name){
 3     this.name = name;
 4   }
 5 }
 6 class Student extends Person {
 7   constructor(course, name) {
 8     super(name);
 9 
10     this.course = course;
11     //...
12   }
13   show() {
14     return `${this.name} ist im Kurs ${this.course}`;
15   }
16   static defaultStudent() {
17     return new Student('Unbekannt', 'Steven Student');
18   }
19 }
20 var p = Student.defaultStudent();
21 console.log(p.show());

Mehr Details zu dieser Syntax folgt in diesem Kapitel, nachdem einige Grundlagen gelegt werden, die zum Verständnis sehr sinnvoll sind.

Der Konstruktor constructor

Zur Vereinfachung der Syntax steht das Schlüsselwort constructor zur Verfügung:

1 class Polygon {
2   constructor() {
3     this.name = "Polygon";
4   }
5 }
6 
7 var poly1 = new Polygon();
8 
9 console.log(poly1.name);

Es kann Argumente haben. Es muss in einer Klasse class benutzt werden.

Statische Mitglieder

Klassen können statische Mitglieder enthalten. Diese können aufgerufen werden, ohne das erst eine Instanz der Klasse erstellt wird. Erreicht wird dies mit dem Schlüsselwort static (Listing 2.6).

 1 class StaticMethodCall {
 2   static staticMethod() {
 3     return 'Statische Methode';
 4   }
 5   static anotherStaticMethod() {
 6     return this.staticMethod() + ' intern gerufen';
 7   }
 8 }
 9 StaticMethodCall.staticMethod();
10 
11 StaticMethodCall.anotherStaticMethod();

Der Zugriff kann auch im Konstruktor erfolgen.

 1 class StaticMethodCall {
 2   constructor() {
 3     console.log(StaticMethodCall.staticMethod());
 4 
 5     console.log(this.constructor.staticMethod());
 6   }
 7 
 8   static staticMethod() {
 9     return 'Statische Methode';
10   }
11 }

Vererbung mit extends

Wird das Objektkonstrukt mit class erstellt, so kann von einer anderen Klasse mit extends geerbt werden.

 1 class Polygon {
 2     constructor() {
 3         this.name = "Polygon";
 4     }
 5 }
 6 
 7 class Square extends Polygon {
 8   constructor(length) {
 9     super(length, length);
10     this.name = 'Square';
11   }
12 
13   get area() {
14     return this.height * this.width;
15   }
16 
17   set area(value) {
18     this.area = value;
19   }
20 }

Der Konstruktor der geerbten Klasse muss explizit aufgerufen werden. Dazu dient das Schlüsselwort super (Zeile 9).

Ein anderes Beispiel (Listing 2.9) zeigt, wie der Prototyp überschrieben werden kann.

 1 class Polygon {
 2     constructor() {
 3         this.name = "Polygon";
 4     }
 5 }
 6 
 7 class Square extends Polygon {
 8     constructor() {
 9         super();
10     }
11 }
12 
13 class Rectangle {}
14 
15 Object.setPrototypeOf(Square.prototype, Rectangle.prototype);
16 
17 console.log(Object.getPrototypeOf(Square.prototype) === Polygon.p\
18 rototype);
19 console.log(Object.getPrototypeOf(Square.prototype) === Rectangle\
20 .prototype);
21 
22 let newInstance = new Square();
23 console.log(newInstance.name);

Dies ist quasi eine Mischung aus der protypischen Vererbung und dem syntaktischen Zucker mit class.

2.5 Internes

Intern sind noch ein paar Techniken im Einsatz, deren Kenntnis hilfreich zum Verständnis sein kann. In der Praxis wird man damit nicht zwingend arbeiten, vor allem weil es hier Unterschiede zwischen verschiedenen JavaScript-Laufzeitumgebungen gibt.

Umgang __proto__

Die Eigenschaft prototype ist nur für Funktionen definiert:

Function.prototype

Dies ist eine Funktion zum Anlegen von Prototyp-Mitgliedern, also vererbbaren Elementen. __proto__ dagegen ist der interne via prototype geerbte Bestand an Mitgliedern. __proto__ ist daher immer verfügbar, egal ob Funktion oder nicht.

Die Objektvererbung mittels __proto__-Prototype

Schauen Sie sich folgendes Listing 2.10 an:

 1 var a = {
 2   x: 10,
 3   calculate: function (z) {
 4     return this.x + this.y + z;
 5   }
 6 };
 7 
 8 var b = {
 9   y: 20,
10   __proto__: a
11 };
12 
13 var c = {
14   y: 30,
15   __proto__: a
16 };
17 
18 // Aufruf der geerbten Funktionen
19 b.calculate(30); // 60
20 c.calculate(40); // 80

Das interne Mitglied __proto__ liefert die final ererbten Elemente. Wird es überschrieben, ergibt der zugewiesene Inhalt den finalen Bestand an Mitgliedern.

2.6 Ableiten interner Typen

Einige interne Klassen, wie Date und Array, können als Basisklassen für eigene Konstrukte benutzt werden.

1 class MyArray extends Array {
2   constructor(...args) {
3     super(...args);
4   }
5 }
6 
7 var arr = new MyArray();
8 arr[1] = 12;
9 arr.length == 2

Der Aufruf von super hängt vom Basistyp ab. Der Spread-Operator ist ein bequemes Mittel, flexibel mit Argumentlisten zu arbeiten.

2.7 Tipps

Ein paar allgemeine Regeln zum Umgang mit objektorientierten Techniken sollen dazu dienen, JavaScript hier besser einordnen zu können:

• Keine tiefen Hierarchien
• Die Dynamik ist die Stärke, nicht tiefe Klassenmodelle
• Vererbung ist eine Option, es gibt andere Pattern
• Klassen vor allem zu Steuerung des Scope
• Private versus Öffentlich ist essenziell
• Weniger ist mehr

3 Globale Standardfunktionen

Zu den Standardfunktionen gehören einige global verfügbare Methoden, die universell benutzt werden können. Sie sind im Browser in window definiert, in Node dagegen in global, sodass man davon ausgehen kann, dass sie immer verfügbar sind.

3.1 Zeitgeberfunktionen

Folgende Methoden stehen zur Verfügung:

• setTimeout
• clearTimeout
• setInterval
• clearInterval

Einsatzfälle

Die Funktionen führen eine andere Funktion nach einer bestimmten Zeitspanne aus, beim Intervall wiederholt sich dies bis zum Löschen regelmäßig.

Bei der Timer-Funktion kann der Wert 0 sein, sodass die aufgerufene Funktion sofort startet. Der Trick ist hier, dass dies quasi asynchron, in einem neuen Thread passiert. JavaScript hat selbst keine Thread-Verwaltung und es müssen immer Hilfsfunktionen benutzt werden, um Aktionen außerhalb des Haupt-Threads auszuführen. Notwendig und sinnvoll ist das, damit die Oberfläche bei Aktionen die länger als 50ms sind, nicht blockiert. 50ms ist eine Dauer, so ein Benutzer bereits Verzögerungen spürt (als ruckeln beispielsweise).

Viele Bibliotheken, die asynchrone Aufrufe anbieten, nutzen setTimeout intern.

Anwendung

Nutzen Sie immer Funktionen für den Aufruf, nie Zeichenketten. Zeichenketten sind langsam und unsicher. Folgendes geht, ist aber nicht so gut:

1 setInterval('doSomethingPeriodically()', 1000);
2 setTimeout('doSomethingAfterFiveSeconds()', 5000);

Das Problem ist hier vor allem, dass im Laufe der Zeit sich Änderungen am Code ergeben, die in Zeichenketten jedoch nicht von Werkzeugen ausgewertet werden können. So entstehen Fehlerquellen. Minifier, die JavaScript verdichten, werden Zeichenketten nie anfassen (es könnte Text sein, der ausgegeben wird). Damit sind lange Funktionsnamen von der Optimierung ausgeschlossen.

Folgendes ist besser:

1 setInterval(doSomethingPeriodically, 1000);
2 setTimeout(doSomethingAfterFiveSeconds, 5000);

Hier ist zu beachten, dass der Funktionsname ohne Klammern geschrieben wird. Es handelt sich dabei um einen Funktionszeiger (pointer), nicht um den eigentliche Aufruf (um den kümmert sich die JavaScript-Engine später).

Noch einfacher ist es, die Funktion gleich anonym zu benutzen:

1 setInterval(function() {
2    // tu was jede Sekunde
3 }
4 , 1000);
5 
6 setTimeout(function() {
7    // tu was nach 5 Sekunden
8 }, 5000);

3.2 Funktionen für Zahlen

Funktionen für numerische Werte helfen die Mängel bei den Typen zu kompensieren.

Prüf-Funktionen

Zwei Tests für Zahlen können direkt ausgeführt werden:

* isFinite(): Test auf gültigen Zahlenbereich
* isNaN(): Test auf NaN – Not a Number

1 var Zahl = Number.MAX_VALUE;
2 if (!isFinite(Zahl * 2)) {
3   alert("Die Zahl ist nicht zu verarbeiten.");
4 }

Parser-Funktionen

Parser-Funktionen für Zahlen sind folgende:

* parseFloat(): Erkennt Gleitkommazahlen aus einer Zeichenkette
* parseInt(): Erkennt Integer aus einer Zeichenkette

3.3 Konverter-Funktionen

Hier ist der Umgang mit einem URI wichtig, weil dort spezielle Zeichen nicht erlaubt sind und kodiert werden müssen.

• decodeURI()
• decodeURIComponent()
• encodeURI()
• encodeURIComponent()

1 var uri = 'https://somewebsite.de?p=First Param&q=Last Param';
2 var encoded = encodeURI(uri);
3 console.log(encoded);

Die Ausgabe berücksichtigt, dass Leerzeichen nicht erlaubt sind und durch %20 ersetzt werden:

https://somewebsite.de?p=First%20Param&q=Last%20Param

Die Schreibweise %HH ist der Hexcode in der erweiterten ASCII-Tabelle. Für Zeichen nach UTF-8 wird gegebenenfalls %HHHH benutzt.

4 Module

JavaScript ist eine Sprache, die nicht durch besonders viele Schlüsselwörter glänzt. Die Einfachheit hat seinen Preis, wenn umfangreichere Applikationen entstehen. Damit trotz der Beschränkungen eine hohe Code-Qualität möglich wird, sind viele Entwurfsmuster (pattern) entstanden, die die fehlenden sprachlichen Ausdrucksmöglichkeiten ersetzen.

4.1 Modul-Entwurfsmuster

Das Modul-Entwurfsmuster ist eines der am häufigsten eingesetzten. Mangels Namensräumen ist die Isolation von Code von herausragender Bedeutung. Mit dem Modul-Entwurfsmuster wird genau das erreicht. Darüber hinaus kann hier auch eine Aufteilung des Modulcodes auf verschiedene Dateien erfolgen. Dies erleichtert die Übersichtlichkeit und Wartbarkeit durch Modularisierung – daher der Name.

Zum Vergleich soll hier ein Blick auf ein klassisches unstrukturiertes Skript erfolgen. Zahlreiche Skripte, die Sie im Netz finden können, liegen in einer gesonderten Datei vor und sind darüber hinaus unstrukturiert. Es handelt sich um eine lose Sammlung von globalen Variablen und Funktionen:

 1 var cnt = 0;
 2 function increment() {
 3   return cnt++;
 4 }
 5 function reset() {
 6   cnt = 0;
 7 }
 8 function show() {
 9   console.log(cnt);
10 }
11 reset();
12 increment();
13 increment();
14 show();

Diese Organisation führt dazu, dass das Skript nicht gut konfigurierbar, anpassbar und erweiterbar ist. Am schwersten wiegt jedoch, dass es sich um eine große Zahl von Objekten im globalen Sichtbarkeitbereich handelt. Globale Variablen und Funktionen sind Eigenschaften des window-Objektes, wenn JavaScript im Browser läuft, bzw. global in Node. Ein schwaches Hilfsmittel besteht oft darin, benutzerspezifische Präfixe zu benutzen:

 1 var jk_cnt = 0;
 2 function jk_increment() {
 3   return jk_cnt++;
 4 }
 5 function jk_reset() {
 6   jk_cnt = 0;
 7 }
 8 function jk_show() {
 9   console.log(jk_cnt);
10 }
11 jk_reset();
12 jk_increment();
13 jk_increment();
14 jk_show();

Unstrukturierte Skripte sind schlecht zu warten und kollidieren mit anderen Skripten. Die Namensgebung ist in der Regel ein schwacher und unsicherer Schutz. Es ist naheliegend, das globale Variablen – sorgfältig benannt oder nicht – vermieden werden sollten. Insbesondere ist dies deshalb beachtenswert, weil der globale Adressraum im Browser auch das Objektmodell der HTML-Seite enthält und Konflikte sich unmittelbar schädlich auf das Browserverhalten und die Anzeige auswirken können.

Der Kapselung der eigenen Codes kommt also große Bedeutung zu. Darum geht es im Modul-Entwurfsmuster. Datenkapselung bedeutet, dass das Erweitern des globalen Objekts sowie der DOM-Objekte auf ein Minimum reduziert wird. Sie sollten nur dann Objekte im window-Objekt speichern, wenn der Zugriff von außen unbedingt notwendig sind.

Die öffentliche API Ihres Skriptes benötigt nur ein globales Objekt, über welches die restlichen Funktionen zugänglich sind. Bei manchen Aufgaben ist es möglich, ein Skript konsequent zu kapseln, sodass es das globale window-Objekt überhaupt nicht antastet. In anderen Fällen ist es nötig, zumindest ein Objekt global verfügbar zu machen. Große Bibliotheken dienen hier oft als Vorbild. Das große jQuery-Framework definiert standardmäßig nur zwei globale Variablen: window.jQuery() und als Alias window.$(). Das YUI-Framework definiert lediglich window.YUI().

Einfache Module

Ausgangspunkt für ein Modul ist ein Objekt, dass meist durch das Objekt-Literal erstellt wird. Alle Variablen und Funktionen eines Skripts werden in einer solchen Objektstruktur untergebracht. Im globalen Geltungsbereich taucht dann nur noch diese eine Objektstruktur auf, andere globale Variablen oder Funktionen werden nicht belegt. Das Skript ist in der Objektstruktur in sich abgeschlossen. Damit sind Wechselwirkungen mit anderen Skripten ausgeschlossen, solange der Bezeichner der Objektstruktur eindeutig ist.

Ein JavaScript-Objekt ist also nichts anderes als ein Container für weitere Daten. Ein Objekt ist eine Liste, in der unter einem Bezeichner Unterobjekte gespeichert sind.

 1 var jk_obj = { };
 2 jk_obj.cnt = 0; 
 3 jk_obj.increment = function () {
 4   return this.cnt++;
 5 };
 6 jk_obj.reset = function () {
 7   this.cnt = 0;
 8 };
 9 jk_obj.show = function () {
10   console.log(this.cnt);
11 };
12 jk_obj.increment();
13 jk_obj.increment();
14 jk_obj.show();
15 jk_obj.cnt = -100; // fatal

Hier ist nun nur noch das Objekt jk_obj im globalen Gültigkeitsbereich. Das ist schon sehr gut, allerdings zeigt der Code auf Zeile 14, das es keinen Schutz der intern benutzten Eigenschaften gibt. Eine ungewollte Manipulation kann fatale Folgen haben.

Privater Funktions-Scope

Eine Kapselung erreichen Sie mit einer Funktion, die Ihre Variablen einschließt und nur wenige Objekte nach außen verfügbar macht.

Beim Objekt-Literal wird ein globales Objekt als Namensraum benutzt, um darin eigene Objekte unterzubringen. Diese Objekte sind über das Containerobjekt für andere Skripte zugänglich. Es gibt also keine Trennung zwischen öffentlichen und privaten Daten. Während es sinnvoll ist, dass beispielsweise eine Methode Modul.methode() von außen aufrufbar ist, ist es unnötig und potenziell problematisch, dass jede Objekteigenschaft gelesen und manipuliert werden kann.

Der nächste Schritt ist daher, eine wirksame Kapselung zu implementieren. Das Mittel dazu ist ein eigener, privater Variablen-Gültigkeitsbereich. Darin können beliebig viele lokale Variablen und Methoden definiert werden. Die einzige Möglichkeit, in JavaScript einen solchen Gültigkeitsbereich zu erzeugen, ist eine Funktion. Sie definieren also zuerst eine Funktion, um darin das gesamte Skript zu kapseln. Solange durchgehend lokale Variablen und Funktionen verwendet werden, wird der globale Gültigkeitsbereich nicht angetastet.

Schließen Sie Ihren Code in einen Funktionsausdruck ein, der sofort ausgeführt wird. Folgendes Fragment zeigt, wie dies aussieht:

1 (function () {
2     /* ... */
3 })();

Hier wird eine namenlose Funktion per Funktionsausdruck erzeugt (Zeile 1). Diese wird mit Klammern umschlossen. Auf diesen Ausdruck wird der Call-Operator ausgeführt (Zeile 3) – die runden Klammern am Ende (). Die Anweisung wird mit einem Semikolon abgeschlossen.

Diese anonyme Funktion wird nur notiert, um einen Gültigkeitsbereich zu erzeugen, und sie wird sofort ausgeführt, ohne dass sie irgendwo gespeichert wird. Innerhalb der Funktion wird nun der gewünschte Code untergebracht:

 1 (function() {   
 2   var cnt = 0; 
 3   function increment() {
 4     return cnt++;
 5   }
 6   function reset() {  
 7     cnt = 0;
 8   }
 9   function show() {
10     console.log(cnt);
11   }
12   reset();
13   increment();
14   increment();
15   show();
16 })();

Im Beispiel finden sich Variablendeklarationen und eine Funktionsdeklarationen. Beide sind lokal, sind also nur innerhalb der Kapselfunktion zugänglich. Sie können auf die Variablen und Funktionen intern direkt zugreifen.

Vergessen Sie nicht, Variablen mit var oder let als lokal zu deklarieren. Andernfalls werden sie automatisch global, also Eigenschaften von globalThis.

Öffentliche Schnittstellen

Auch das letzte Muster ist nicht perfekt. Denn die Funktion wird genau einmal ausgeführt und dann besteht keine Zugriffsmöglichkeit mehr. Das kann ausreichend sein – meist reicht es jedoch nicht.

Das Schnittstellen-Entwurfsmuster (Revealing Module Pattern) erlaubt öffentliche und private Objekte und eignet sich ideal, um API und interne Implementierung sauber zu trennen. Diesen Kompromiss erreichen Sie durch eine Kombination aus Objekt-Literalen und einer Kapselfunktion.

Die grundlegende Struktur sieht folgendermaßen aus:

 1 var Modul = (function () {
 2 
 3     /* ... private Objekte ... */
 4 
 5     /* Gebe öffentliche API zurück: */
 6     return {
 7         öffentlicheMethode : function () { ... }
 8     };
 9 
10 })();

Auf das vorherige Beispiel angewendet sieht das nun folgendermaßen aus:

 1 var jk = function() {
 2   var cnt = 0;
 3   function reset() {
 4     cnt = 0;
 5   }
 6   reset();
 7 
 8   return {
 9     increment: function () {           
10       return cnt++;
11     },        
12     show:  function () {          
13       console.log(cnt);
14     } 
15   };
16 }();
17 
18 jk.increment();
19 jk.increment();
20 jk.show();

In diesem Beispiel wird genau ein globales Objekt belegt, sodass der Zugriff wiederholt erfolgen kann. Darüber hinaus wird eine Art Schnittstelle – ein Interface – definiert, dass die Zugriffsform regelt. Dies wird durch die return-Anweisung in Zeile 8 erreicht. Hier wird ein weiteres Objekt mittels Objekt-Literal erstellt, in dem zwei Methoden erstellt werden, die ihrerseits auf private Mitglieder des Moduls zugreifen. Nach außen sind jetzt nur die Methoden show und increment sichtbar.

Instanzen von Modul-Objekten

Nun kann es passieren, dass ein Modul nicht nur eine statische Umgebung liefert, sondern mehrere Instanzen davon abstammen, die unabhängig voneinander sind. Die im Abschnitt Objektorientierung gezeigte Form der Nutzung von Funktionen als Konstruktor wird nun mit dem Modul-Entwurfsmuster kombiniert.

 1 var jk = function() {    
 2   var counterInitialValue = 0;
 3   var counterConstructor = function() { 
 4      this.cnt = counterInitialValue;     
 5   };
 6   counterConstructor.prototype.increment = function() {       
 7      this.cnt++;
 8   };
 9   counterConstructor.prototype.show = function() {      
10     console.log(this.cnt);
11   };
12   return {
13     Counter : counterConstructor   
14   };
15 }();

Erneut wird nur ein einziges Objekt im globalen Namensraum benötigt. Die Variable counterInitialValue ist intern und geschützt (Zeile 2). Auch der Konstruktor (Zeile 3) ist intern. Damit Instanzen die Methoden erben, werden diese auf dem Prototypen des Konstruktors definiert (Zeilen 6 und 9). Die Konstruktorfunktion liefert also alles, was benötigt wird. Und nur diese ist auch öffentlich (Zeile 13).

Die Benutzung dieses Moduls – wo auch immer – sieht nun folgendermaßen aus:

1 var mycnt = new jk.Counter();
2 mycnt.increment();
3 mycnt.increment();
4 mycnt.show();

Globale Objekte

Das Übergeben von Objekten in die Kapselfunktion verkürzt die Gültigkeitskette und beschleunigt den Zugriff auf diese Objekte. Ohne diese Übergabe wäre JavaScript gezwungen, immer alle erreichbaren Gültigkeitsbereich abzusuchen, ob das gewünschte Objekt nicht irgendwo erreicht werden kann. Ein Wert, der als Parameter übergeben wurde, ist in der Suchliste weit oben und wird sehr schnell gefunden.

Aus diesem Grund hat es sich eingebürgert, das window-Objekt sowie weitere häufig benutzte Objekte wie document mittels Parametern in den Funktions-Gültigkeitsbereich zu übergeben:

1 (function (window, document, undefined) {
2 
3     /* ... */
4 
5 })(window, document);

Gleichzeitig wird hier sichergestellt, dass innerhalb der Funktion der Bezeichner undefined immer den Typ undefined besitzt. Wir definieren einen solchen Parameter, aber übergeben keinen Wert dafür –- sodass eine lokale Variable namens undefined mit einem leeren Wert angelegt wird. Das ist andernfalls nicht garantiert, denn window.undefined ist durch Skripte überschreibbar.

Erweiterbare Module

Eigene Module werden genauso übergeben und können damit leicht erreicht werden. Zugleich erlaubt diese Technik das Aufteilen des Skripts auf mehrere Dateien. Module nachträglich zu erweitern ist ebenso sinnvoll und häufig benötigt, allerdings haben die einzelnen Teile keinen Zugriff auf die privaten Objekte der anderen Teilmodule.

Ein selbst definiertes Modul könnte nun folgendermaßen aussehen:

 1 var MODULE = (function () {
 2    var my = {},
 3    privateVariable = 1;
 4    function privateMethod() {
 5      // ...
 6    }
 7    my.moduleProperty = 1;
 8    my.moduleMethod = function () {
 9      // ...
10    };
11    return my;
12 }());

In einem weiteren Skript kann dieses Modul erweitert werden:

1 var MODULE = (function (my) {
2 
3   my.anotherMethod = function () {
4     // neue (weitere) Methode
5   };
6 
7   return my;
8 
9 } (MODULE));

Problematisch ist hier, dass die Reihenfolge der Definition entscheidend ist. Beim Laden der Skripte via HTTP kann die Reihenfolge aber nicht garantiert werden. Deshalb soll der default-Operator || benutzt werden, um einen beliebigen Anfangspunkt zu erlauben:

1 var MODULE = (function (my) {
2 
3   // Mehr Funktionen
4 
5   return my;
6 } (MODULE || {}));

Dieses Verfahren wird auch als “lose Augmentierung” bezeichnet. Die Funktionsweise ist einfach. Jedes Modul wird gleichartig definiert. Das zuerst ausgeführte Skript – egal welches – findet die Variable MODULE im Zustand undefined vor. Damit ist der erste Teil des Ausdrucks in Zeile 6 false. Dadurch wird der zweite Teil ausgeführt – ein leeres Objekt. Dies wird in der Kette der Modulbausteine als Parameter übergeben und dann mit Eigenschaften und Methoden sukzessive angereichert (daher der Name “Augmentierung”).

Die lose Augmentierung ist nicht immer sinnvoll, denn sie schränkt die Möglichkeiten objektorientierter Techniken etwas ein. Eine feste Augmentierung – mit definierter Reihenfolge – kann beispielsweise benutzt werden, um bereits definierte Funktionen unter bestimmten Umständen gezielt zu überschreiben oder zu verdecken.

Namensräume

Module können Sie mit einem Objekt in einem Namensraum gruppieren. Es gibt zwar keine nativen Namensräume in JavaScript, aber gekapselte, verschachtelte Objekte erfüllen denselben Zweck – ganz ohne ein weiteres Schlüsselwort.

1 var Namensraum = {};
2 Namensraum.Modul1 = (function () { ... })();
3 Namensraum.Modul2 = (function () { ... })();

Zusammenfassung

Entwurfsmuster sind essenziell in JavaScript. Die Programmierung erfordert Disziplin, ohne die schnell unwartbarer Code entsteht. Auf dem Weg zu gutem Code helfen Entwurfsmuster. Nutzen Sie diese auch bei kleinen und trivialen Projekten, um schnell Sicherheit zu gewinnen.

Die Techniken dienen vor allem dazu, die fehlenden sprachlichen Merkmale von JavaScript auszugleichen. Sie zeigen auch, das komplexe Sprachen mit vielen Schlüsselwörtern nicht zwingend erforderlich sind, um große Projekt umzusetzen.

4.2 Native Module

Native Module werden seit ES2015 direkt auf Sprachebene unterstützt. Damit sind Standard-Loader wie AMD und CommonJS direkt einsetzbar. Das Laden der Module erfolgt asynchron und das Verarbeiten implizit synchron, sodass das Laden effektiv und die Verarbeitung intuitiv ist.

1 export function sum(x, y) {
2   return x + y;
3 }
4 export var pi = 3.141593;

1 import * as math from "lib/math";
2 console.log("2π = " + math.sum(math.pi, math.pi));

1 import {sum, pi} from "lib/math";
2 console.log("2π = " + sum(pi, pi));

Das Exportieren (Bereitstellen) eines Moduls erfolgt mit export:

1 export * from "lib/math";
2 export var e = 2.71828182846;
3 export default function(x) {
4     return Math.exp(x);
5 }

Beim Import erfolgt die Angabe in geschweiften Klammern für die exportierten Mitglieder. Wird ein Name direkt – ohne Klammern – benutzt, so wie im folgenden Beispiel der Name exp, so wird das mit default gekennzeichnete Mitglied geladen. Es darf immer nur ein Mitglied einer Datei so bezeichnet werden.

1 import exp, {pi, e} from "lib/mathplusplus";
2 console.log("e^π = " + exp(pi));

5 Funktionen

Dieses Kapitel behandelt die vielfältigen Einsatzmöglichkeiten von Funktionen und anonymen Funktionsaufrufen.

5.1 Funktionsargumente

Bei der Arbeit mit Funktionsargumenten gibt es einige Besonderheiten im Vergleich zu anderen Sprachen.

Standardargumente

Argumente lassen sich mit Standardwerten belegen, die angewendet werden, wenn der Aufrufer keine Werte liefert.

1 function f(x, y = 12) {
2   // y ist 12, wenn das Argument entfällt oder undefined ist
3   return x + y;
4 }
5 f(3) == 15;

Argument-Arrays

Eine beliebige Anzahl Argumente lässt sich mit dem ...-Operator an ein Array binden.

1 function f(x, ...y) {
2   // y ist nun ein Array
3   return x * y.length;
4 }
5 f(3, 'hello', true) == 6;

Das lässt sich auch umdrehen und beim Aufruf benutzen:

1 function f(x, y, z) {
2   return x + y + z;
3 }
4 // Das Array wird den Argumenten zugewiesen
5 f(...[1, 2, 3]) == 6;

Rest-Parameter

Der Parameter-Operator ... (auch Rest-Operator) stellt die Parameter als Array bereit.

 1 function sum(...theArgs) {
 2   return theArgs.reduce((previous, current) => {
 3     return previous + current;
 4   });
 5 }
 6 
 7 console.log(sum(1, 2, 3));
 8 // Ausgabe: 6
 9 
10 console.log(sum(1, 2, 3, 4));
11 // Ausgabe: 10

Es gibt Unterschiede zum bereits gezeigten arguments-Objekt:

• Nur namenlose Argumente werden erfasst, bei arguments sind es immer alle
• arguments ist kein echtes Array, sondern ein spezielles Objekt; der Rest-Operator erzeugt aber ein echtes Array
• arguments verfügt über spezielle Funktionen, die ein Standard-Array nicht hat

5.2 Lambda-Funktionen

Lambda-Funktionen sind anonyme Funktionsaufrufe, die den Operator =>¹ nutzen, um den Schreibaufwand zu reduzieren. Das ist ähnlich zur Syntax in C# oder Java 8. Der Zeiger this hat denselben Scope wie der umliegende Code, nicht einen eigenen, funktionsspezifischen wie bei der Benutzung von function. Auch das spezielle Argument-Array arguments wird aus der umgebenden Funktion übernommen und es wird kein Neues gebildet.

Hier ein paar Beispiele:

 1 // Ausdrücke
 2 var odds = evens.map((v) => v + 1);
 3 var nums = evens.map((v, i) => v + i);
 4 
 5 // Anweisungen
 6 nums.forEach((v) => {
 7   if (v % 5 === 0) fives.push(v);
 8 });
 9 
10 // Benutzung von this
11 var bob = {
12   _name: 'Bob',
13   _friends: [],
14   printFriends() {
15     this._friends.forEach((f) => console.log(this._name + ' knows\
16  ' + f));
17   },
18 };
19 
20 // Argumente
21 function square() {
22   let example = () => {
23     let numbers = [];
24     for (let number of arguments) {
25       numbers.push(number * number);
26     }
27 
28     return numbers;
29   };
30 
31   return example();
32 }
33 
34 // Ausgabe: [4, 16, 56.25, 64, 132.25, 441]
35 square(2, 4, 7.5, 8, 11.5, 21);

Eine Lambda-Funktion bindet kein eigenes this, arguments, super, oder new.target. Lambda-Funktionen sind immer anonym.

Funktionsrumpf

Lambda-Funktionen können entweder einen kurzen oder einen Block-Rumpf haben.

In einem kurzen Rumpf ist lediglich ein Ausdruck nötig und eine implizite Rückgabe wird angehängt. In einem Block-Rumpf muss eine explizite Rückgabeanweisung verwendet werden.

1 // knappe Syntax, implizierte Rückgabe
2 var func = (x) => x * x;
3 // mit Block-Rumpf, explizite Rückgabe wird benötigt
4 var func = (x, y) => {
5   return x + y;
6 };