Inhaltsverzeichnis

1. Einen JavaScript Constructor erstellen

Dafür schreiben wir zunächst das Wort constructor, gefolgt von runden Parameterklammern und zwei geschweiften Klammern:

2. Wofür benötigen wir den Konstruktor?

Vielleicht kennst du den Konstruktor bereits aus anderen Programmiersprachen, wie beispielsweise C#. Wenn wir Instanzen von einer Klasse erstellen, wie zum Beispiel eine Person, dann kann es beim Erstellen der Instanz manchmal sehr nützlich sein, bestimmte Informationen mit zu übergeben.

Das bedeutet, dass wir zunächst die folgende Zeile Code schreiben, um eine Instanz zu erzeugen:

Jetzt ist es allerdings so, dass in der objektorientierten Programmierung beim Erstellen von Objekten oft Bedingungen existieren, sodass beispielsweise eine Person kein leeres Objekt darstellt, sondern einen Namen, eine Körpergröße und möglicherweise noch weitere Informationen besitzt.

Bei einem Auto könnte das die maximale Geschwindigkeit sein und dessen Modell. Diese Informationen sind nicht optional, sondern notwendig.

Das heißt auf unser Beispiel bezogen, dass wir zumindest bei der Person Namen und Alter benötigen. Diese sind die Mindestanforderungen, die wir immer haben müssen, um mit dem Codeabschnitt arbeiten und sicherstellen zu können, dass diese Informationen gegeben sind.

3. Im JavaScript Constructor Informationen übergeben

Während der Instanziierung, die unter class Person mit dem Keyword new beginnt, möchten wir also Informationen übergeben, die wir in den JavaScript Constructor schreiben.

Dafür wählen wir name und age:

Du kannst zwischen die Klammern beliebig viele Informationen schreiben, sodass es keine Rolle spielt, ob es eine oder mehrere sind. In unserem Beispiel sind das name und age, allerdings könnten es auch noch einige mehr sein.

4. Properties erstellen

Im Konstruktor verwenden wir dann die beiden gewählten Parameter und schreiben Folgendes:

Damit erstellen wir eine Property für die Person und weisen dann den Wert aus dem Parameter name vom Constructor zu.

Anschließend schreiben wir mit this.age eine neue Property in unsere Person und weisen ebenfalls den Wert aus dem Konstruktor zu:

Wenn wir die Maus über this.name bewegen, sehen wir auch schon, dass wir eine Property, also eine Eigenschaft erstellt haben:

Das Gleiche zeigt uns das Programm auch bei age an, da es sich dabei ebenfalls um eine Property handelt, die wir auf der Person erstellt und deren Wert wir aus dem Konstruktor zugewiesen haben.

Wenn wir an dieser Stelle mit new Person eine neue Person erstellen würden, wären unsere Werte undefined und wir könnten dann mit einer eigenen Logik überprüfen, ob name und age überhaupt existieren und andernfalls eine Fehlermeldung ausgeben.

Allerdings ist noch besser, dass wir zum Beispiel in der Codedokumentation anderen Entwicklern mitteilen können, dass wir bei Person im Konstruktor name und age übergeben können, um das Objekt zu initialisieren.

5. Die Properties initialisieren

Nun schreiben wir also beispielhaft zwischen die runden Klammern „John“ und für age legen wir den Wert 30 fest:

Danach loggen wir das Ganze in die Konsole und öffnen das Terminal, um uns das Ergebnis ansehen zu können:

Darin schreiben wir anschließend node main.js:

Um das Programm mit dem Befehl node main.js auszuführen, benötigst du Node.js, das ganz einfach von der Webseite nodejs.org installiert werden kann. Nach node folgt main.js, weil das der Name der Datei ist.

Anschließend drücken wir die Enter-Taste und sehen dann in der Konsole ein Objekt der Klasse Person mit den initialisierten Properties:

6. Zusammenfassung

Das hat funktioniert, ohne dass wir noch etwas bei der Erstellung des Objekts hinzufügen mussten. Wenn wir an dieser Stelle keinen Constructor hätten, würden wir mit new Person eine neue Person erstellen und dann die Werte manuell zuweisen:

Diesen Schritt können wir uns allerdings sparen und den Code sowohl sicherer als auch einfacher für andere Entwickler gestalten, indem wir einen JavaScript Constructor verwenden. Diesen füllen wir bei der Initialisierung des Objekts mit Werten und erstellen dann dementsprechend die Properties in den Zeilen this.name = name und this.age = age.

Wenn du noch mehr über JavaScript lernen möchtest, sieh dir gerne unseren JavaScript-Komplettkurs auf YouTube an.

Inhaltsverzeichnis

1. Was sind JavaScript Properties?

name und age sind damit Properties. Wenn wir unsere Maus beispielsweise über age bewegen, sehen wir, dass es sich um eine Property handelt und sogar der Datentyp number wird angezeigt:

Wenn wir die Maus über name bewegen, sehen wir den Datentyp String.

2. Auf JavaScript Properties zugreifen

Wir können nun auf zwei verschiedene Arten auf JavaScript Properties zugreifen.

Zum einen mithilfe der Punktnotation, indem wir console.log und anschließend person.name schreiben. Dabei handelt es sich vermutlich um den Weg, den die meisten einschlagen würden.

Es gibt allerdings noch eine Alternative. Bei dieser schreiben wir ebenfalls console.log, gefolgt von person und einem eckigen Klammerpaar. Diese verwenden wir wie bei einem Array und geben dann den Key an, also den Namen der Property als String. Beispielhaft nehmen wir dafür age:

Dann speichern wir das Programm, führen es mit dem Befehl node main.js aus und sehen unten in der Konsole "John“ und 30:

Wenn du dein Programm auf die gleiche Art direkt über die Konsole ausführen möchtest, anstatt den Browser dafür zu nutzen, musst du Node.js installieren. Damit hast du die Möglichkeit, über den Befehl node main.js das Programm ganz einfach auszuführen. main.js deshalb, weil die Datei so benannt ist.

Info:
Auf unserem YouTube-Kanal gibt es einen umfangreichen Einsteigerkurs zu JavaScript.

3. Werte der Properties verändern

Als Nächstes sehen wir uns an, wie wir Werte verändern können. Das lässt sich ganz einfach umsetzen, indem wir beispielsweise person.age = 31 schreiben:

Wir haben damit den Standardwert 30 durch den neuen Wert 31 ausgetauscht. Das Ganze funktioniert natürlich genauso mit dem Namen, indem wir beispielsweise als neuen Namen „Maria“ festlegen:

Den Wert können wir also ganz einfach unabhängig vom Datentyp anpassen.

4. Properties löschen

Eine weitere Besonderheit, die du möglicherweise noch nicht kanntest, ist, dass wir in JavaScript Properties auch löschen können. Dafür schreiben wir beispielsweise folgendes:

Nun loggen wir unser Objekt person mit console.log in die Konsole, führen den Code aus und sehen, dass wir age als Property nun nicht mehr darin finden:

Damit existiert lediglich noch die name-Property.

5. Das Keyword this

In JavaScript sorgen Properties in Zusammenhang mit dem Keyword this immer wieder für Verwirrung. Aus diesem Grund sehen wir uns jetzt einmal an, wie wir in unserem person-Objekt eine Funktion erstellen können.

Damit soll sich person nicht nur aus name und age zusammensetzen, sondern zudem noch eine Funktion enthalten, die wir beispielhaft „greet“ nennen:

Nach dem Plus-Zeichen möchten wir nun den Namen schreiben. Wenn wir allerdings lediglich name angeben, kann das Programm diesen nicht verarbeiten, weil es name innerhalb dieses Scopes nicht kennt.

Testweise werden wir diesen Code trotzdem einmal ausführen und die greet-Funktion mit der Zeile person.greet(); aufrufen:

Nachdem wir das Programm gespeichert und mit dem Befehl node main.js aufgerufen haben, sehen wir, dass es so nicht funktioniert. In der Konsole lässt sich kein Wert finden, sondern lediglich die Fehlermeldung „name is not defined“:

Warum benötigen wir this?

Das bedeutet, das Programm kann auf den Wert der name-Property nicht zugreifen, weil wir nicht auf die Objektinstanz person verweisen. Aus diesem Grund verwenden wir das Keyword this, um dem Compiler zu sagen, er soll sich in den Arbeitsspeicher bewegen und den Wert „John“ aus der Objektinstanz person beschaffen.

„name“ allein in der Zeile stehenzulassen würde hier also nicht funktionieren. Wir müssen den Compiler anweisen, sich in genau diese Objektinstanz zu bewegen und darin die gewünschte Property zu holen.

Jetzt kann er also die Instanz finden und den Wert von name abrufen. Wenn wir das Programm nun noch einmal ausführen, sehen wir auch schon den Satz „Hi, I am John“ in der Konsole:

Aus diesem Grund ist es beim Verwenden einer Property innerhalb eines Objekts wichtig, im Objekt anzugeben, dass diese Instanz genommen werden soll.

Inhaltsverzeichnis

1. Wofür benötigen wir die JavaScript fetch Funktion?

Anschließend tragen wir zwischen den runden Klammern eine URL ein, die zu einer Web-API, wie beispielsweise einer RESTful-API führt. Uns stehen für diesen Zweck zwei Möglichkeiten zur Verfügung: Entweder wir verwenden eine öffentliche oder eine private API, für die wir uns registriert haben. Das kann beispielsweise eine API für Wetterdaten sein, von welcher unzählige im Internet existieren.

Oder wir erstellen uns selbst eine lokale API, was ich bereits mit dem Programm Mockoon umgesetzt habe. Das Wort „Mock“ steht in der Programmierwelt für „fake“, was bedeutet, dass wir Inhalte in unserer Umgebung nur zum Testen entwickeln.

Auf der folgenden Abbildung sehen wir eine solche Fake-API:

2. Was ist eine API?

Die Abkürzung API steht für Application Programming Interface, welche eine Möglichkeit bietet, Programme miteinander kommunizieren zu lassen. Sie stellt damit also eine Schnittstelle dar.

3. GET und POST

Wir haben dabei zwei Endpunkte. Einen HTTP-GET- und einen HTTP-POST-Endpunkt.

Das bedeutet, dass wir über die URL localhost:3001, die links im Bild zu erkennen ist, mit der Fake-API, rechts im Bild, kommunizieren können:

Neben „POST“ siehst du in Rot markiert den Endpunkt, womit die finale URL localhost:3001/todos lautet:

Wenn wir an die markierte Stelle im folgenden Bild oben einen GET-Befehl senden, erhalten wir die untenstehenden hart gecodeten Todos zurück, die ich erstellt habe:

Darüber hinaus existiert eine zweite URL, also ein zweiter Endpunkt, über welchen wir Todos erstellen können:

Wenn du noch nie von Webservern gehört hast und davon, wie HTTP-Anfragen funktionieren, kann das Ganze etwas viel für den Anfang sein. Sobald wir wieder zurück zur JavaScript fetch Funktion gekommen sind, wird es aber wieder einfacher.

Wir könnten an dieser Stelle theoretisch ein Todo erstellen, da unsere API allerdings nur fake ist, lässt sich das in der Realität nicht umsetzen. Schließlich haben wir keine Datenbank oder ähnliches, in der wir etwas speichern könnten.

Stattdessen antwortet uns diese API und der Server lediglich mit „Todo got created on the server!“:

4. Die API starten

Beim Starten der API können wir die URL localhost:3001/ von Mockoon verwenden.

Im Code-Editor tragen wir dann die URL zwischen den Klammern der fetch Funktion ein:

Standardmäßig wird nun diese URL angesprochen und wir erhalten eine Response, also eine Antwort von dem Server. Natürlich könnte das auch ein Error sein.

Das Ganze läuft dabei asynchron, weshalb wir then verwenden. Wie ich bereits in einem vorherigen Beitrag zu JavaScript erklärt habe, braucht ein Server, selbst wenn es nur die Mockoon Fake-API ist, eine gewisse Zeit, um mit einer erhaltenen Anfrage umzugehen.

Da das Zurücksenden ein paar Millisekunden in Anspruch nimmt, müssen wir darauf warten.

5. Die Rückmeldung des Servers verarbeiten

Das heißt, wir senden unseren Request und sobald dieser verarbeitet wurde, erhalten wir eine Response. Diese nehmen wir entgegen und wandeln sie zunächst in JSON um. Dafür schreiben wir response.json() in unseren Code:

Auch das dauert wieder eine gewisse Zeit, weshalb wir das Ganze asynchron umsetzen und ein weiteres then verketten. Die finalen Daten, die wir erhalten, möchten wir anschließend in die Konsole loggen:

Zu guter Letzt hängen wir noch einen catch-Block an, sodass wir einen eintretenden Error ebenfalls in die Konsole schreiben können:

6. Zusammenfassung des Codes

Nochmal zusammengefasst: In der ersten Zeile laden wir den Inhalt der API-URL und lesen anschließend die Response als JSON. Das Ganze dauert einen Moment und wie wir in der zweiten Zeile bei json sehen können, haben wir es mit einem Promise zu tun:

Auch hier warten wir also wieder bis der Inhalt der Response, die wir über fetch erhalten, gelesen wurde.

Wenn du mehr zum Thema Promises wissen möchtest, dann sieh dir gerne unser  YouTube Video dazu an.

7. Die JavaScript fetch Funktion im Browser ausführen

An dieser Stelle starten wir das Programm so wie es aktuell ist. Wir können fetch im Browser ausführen, indem wir eine index.html Datei erstellen, in der wir unser Skript einfügen:

Danach öffnen wir die Datei mit einem Doppelklick in Google Chrome:

Anschließend drücken wir Control, Shift und J und sehen dann auf der rechten Seite des Bildschirms die Antwort, die wir von dem Server erhalten haben:

Wir können diese bei „Object“ aufklappen und finden darin die Todos, die wir uns vom Server geholt haben:

Dazu gibt es allerdings noch mehr zu sagen, denn wir möchten zudem noch einen anderen HTTP-Request mit fetch senden. Nämlich einen POST-Request, sodass wir ein Todo erstellen können.

8. Einen POST-Request senden

In den Entwicklertools darüber bietet sich eine praktische Möglichkeit, Anfragen, die wir senden und zurückbekommen, nachzuverfolgen.

Dafür klicken wir auf „Network“, welches bei dir möglicherweise auf Deutsch als „Netzwerk“ angezeigt wird:

Wenn wir die Seite jetzt aktualisieren, sehen wir unten, dass beispielsweise unsere index.html Datei und unser main.js geladen wurden. Außerdem finden wir darunter einen Request von http://localhost:3001/todos:

Es handelt sich um unsere Mock-API, die aktuell läuft. Der Status Code war 200, was bedeutet, dass es keinen Fehler gab und reibungslos funktioniert hat. Wenn wir uns nun in den Reiter „Response“ bewegen, sehen wir die Antwort des Servers:

Das passt natürlich original zu dem Inhalt, den unsere API für diesen Request „fakemäßig“ eingetragen hat.

An dieser Stelle sehen wir uns an, wie wir eine Methode im fetch-Request erstellen, um beispielsweise ein Todo einrichten zu können. Dafür bewegen wir uns zurück in den JavaScript Code.

9. POST als Methode in der JavaScript fetch Funktion ergänzen

Dann fügen wir als zweiten Parameter innerhalb der JavaScript Fetch Funktion ein Objekt ein, das wir konfigurieren können und darin legen wir als method, die standardmäßig GET ist, POST fest:

10. Wozu dienen HTTP-POST-Anfragen?

HTTP-POST-Anfragen dienen dazu, Ressourcen auf einem Webserver erstellen zu können. Das kann beispielsweise das Hochladen eines YouTube-Videos sein, die Erstellung eines Twitter-Posts und viele weitere Dinge.

Wenn du mit einer Anwendung kommunizierst, die zum Beispiel Wetterdaten speichert, könntest du mit einem POST-Request neue Wetterdaten auf dem Server speichern.

Wir könnten noch weitere Dinge übergeben, werden das Ganze hier allerdings so kurz wie möglich halten.

11. Einen body in der fetch Funktion einfügen

Trotzdem ist eines noch ganz wichtig: Wenn wir etwas erstellen, möchten wir natürlich auch sagen, was wir erstellen.

Aus diesem Grund fügen wir innerhalb unserer fetch Funktion einen Body ein, nehmen dann die JSON-API und schreiben .stringify. Zu stringify haben wir im Übrigen auch ein Video auf unserem YouTube-Kanal.

Darin können wir nun ganz einfach unsere Informationen eintragen.

Sehen wir uns nun mal kurz die API an. Wir gehen davon aus, dass sich ein Todo aus id und Description zusammensetzt, weshalb wir JSON.stringify schreiben, eine id mit dem Beispielwert 3 angeben und eine Description mit dem String „learn javascript“ hinzufügen.

Aus dem body wird nun ein JSON-String gemacht, der als POST-Request an unsere API gesendet wird. Wir haben dabei also keinen GET- sondern einen POST-Request.

Im Code unterhalb der fetch-Funktion warten wir dann wieder auf die Ergebnisse, loggen mögliche Fehler in die Konsole oder eben die Antwort, die wir erhalten.

Wenn wir das Programm erneut speichern, uns zurück in den Browser bewegen und die Seite aktualisieren, sehen wir, dass wir einen POST-Request gesendet haben. Das bedeutet, wir haben etwas erstellt und bekommen den Statuscode 201, der standardmäßig „Created“ ist. Das deutet daraufhin, dass auf dem Server etwas erstellt wurde.

Auch in der Konsole sehen wir „Todo got created on the server!“:

Auf diese Weise können wir also die JavaScript fetch Funktion verwenden, um mit einer anderen Web API zu kommunizieren.

Inhaltsverzeichnis

1. Wann verwendet man in JavaScript Promises?

2. Wie erstellt man ein Promise?

Um ein Promise zu erstellen, schreiben wir beispielhaft die folgende Zeile Code:

Jetzt erzeugen wir innerhalb dieses Promises eine Arrow Function und arbeiten mit den beiden Argumenten resolve und reject. "resolve" steht dabei für „erfolgreich“ und "reject" für „nicht erfolgreich“. In diesem Fall können wir uns resolve und reject wie success und failure vorstellen, wobei erstere übersetzt für die Begriffe „auflösen“ und „ablehnen“ stehen.

Anschließend folgt der Arrow:

Wenn du mehr über Arrow Functions wissen möchtest, kannst du dir gerne unseren Beitrag zu diesem Thema ansehen.

3. Eine Bedingung festlegen

An dieser Stelle können wir in das Promise unsere Bedingung schreiben, in der wir festlegen, was es umsetzen soll. Beispielsweise könnte es eine Netzwerkanfrage senden oder einen Timeout beinhalten.

Wir legen zunächst folgendes darin fest:

Nun müssen wir uns überlegen, was passieren soll, wenn success true ist und wir damit ein erfolgreiches Statement haben. Stell dir vor, es handelt sich bei der Zeile let success = true um eine Netzwerkanfrage, welche am Ende entweder in wahr oder falsch resultiert.

Beispielsweise möchtest du etwas auf einem Server erstellen, allerdings ist dieser nicht erreichbar oder er ist doch erreichbar gewesen und du konntest dein Vorhaben umsetzen. Die Anfrage könnte also entweder ein „success“ sein oder „kein success“. In unserem Beispiel gehen wir erst mal davon aus, dass es ein „success“ ist und schreiben resolve():

4. resolve

Jetzt haben wir die Möglichkeit, im runden Klammerpaar von resolve etwas Beliebiges zu übergeben. Wir könnten beispielsweise die Antwort des Servers zurückgeben, also möglicherweise ein Objekt, das er erstellt hat. Oder wir geben lediglich eine simple Nachricht zurück:

„The operation was successful.“ könnte das Objekt sein, welches wir in resolve zurückgeben.

Das heißt, wir lösen das Promise auf, das Versprechen wurde gehalten und wir haben die erfolgreiche Nachricht „The operation was successful.“ entgegengenommen.

Resolve ist also die Funktion, die wir aufrufen, um ein Promise erfolgreich abzuschließen.

5. reject

Im anderen Fall, also dann, wenn der Ausgang nicht erfolgreich ist, verwenden wir reject, welches wir in den else-Block schreiben. Auch darin können wir beispielsweise einen String oder ein anderes komplexeres Objekt übergeben:

Im nächsten Schritt sehen wir uns an, wie wir das Promise verwenden können.

6. In JavaScript Promises verwenden

Um das Promise zu verwenden, rufen wir es zunächst auf:

Da es asynchron ist, möchten wir anschließend darauf warten, bis wir entweder resolve oder reject zurückbekommen.

Wir können uns das Ganze nun mal so vorstellen, dass wir anstatt im Vorhinein die Zeile „let success = true“ im Code zu haben, eine http-Anfrage an einen Server schicken. Dieser Prozess dauert etwa fünf Millisekunden, die Verarbeitung der Anfrage durch den Server nimmt weitere fünf Millisekunden in Anspruch und das Zurücksenden der Nachricht ebenfalls.

Das Ganze ist also asynchron, da wir über einen undefinierten Zeitraum hinweg warten müssen. Hinter myPromise schreiben wir dann Folgendes:

7. Die then-Methode

Mit then möchten wir die Antwort entgegennehmen, sobald wir sie zurückerhalten. Das kann zum Beispiel die Message von result sein, wenn das Ganze funktioniert hat. Diese Nachricht schreiben wir dann in die Konsole:

8. Die catch-Methode bei JavaScript Promises

Darüber hinaus besteht die Option, den Code noch weiter auszubauen, indem wir einen Fehler, der eintreten könnte, mit catch abfangen:

Wenn das Promise also nicht funktioniert hat, soll message in der Konsole ausgegeben werden:

Jetzt können wir natürlich den Boolean success oben im Code umlegen, das Promise starten und uns beide Fälle ansehen.

Der gesamte Code sieht aktuell folgendermaßen aus:

An dieser Stelle öffnen wir in Visual Studio Code ein neues Terminal:

Wenn du auch auf diese Art JavaScript Code auf deiner Maschine ausführen möchtest, anstatt das im Browser zu tun, musst du Node.js von der Website nodejs.org installieren.

Damit hast du die Möglichkeit mithilfe des Kommandos node main.js und Drücken der Enter-Taste das Programm auszuführen. main.js deshalb, weil das der Name unserer Datei ist. In der Konsole sehen wir dann „The operation was successful.“:

Wenn wir unseren Schalter, also die Variable success jetzt auf false setzen und damit beispielsweise davon ausgehen, dass der Server nicht erreichbar war, dann sehen wir nach dem erneuten Ausführen „The operation failed.“ in der Konsole:

Entfernen wir an dieser Stelle zudem den catch-Block, speichern das Programm und führen es erneut aus, erhalten wir einen Fehler:

Der Fehler wurde uns deshalb übermittelt, weil eine Exception nicht abgefangen werden konnte.

Aus diesem Grund sollten wir den catch-Part unserem Promise anhängen, damit wir Fehler, die wir beispielsweise von reject erhalten, abfangen können.

Andernfalls wäre das ein ziemlich schlechter Programmierstil.

9. Die finally-Methode

Wenn es noch weiteren Code gibt, den wir unbedingt ausführen möchten, verwenden wir finally:

Für das Thema try, catch und finally haben wir übrigens ein separates Video auf unserem YouTube-Kanal.

Mit finally können wir sicherstellen, dass wir am Ende auf jeden Fall einen bestimmten Code ausführen. In unserem aktuellen Beispiel benötigen wir finally allerdings nicht und können es deshalb wieder entfernen.

10. Zusammenfassung

Das Einzige, das du dir für den Start mit Promises merken solltest, ist, dass man mit der Zeile let myPromise = new Promise() ein neues Promise erstellt und dieses einen resolve sowie einen reject State besitzt. Das heißt, wir lösen mit resolve und reject das Promise entweder auf oder lehnen es ab. Dabei steht resolve für „erfolgreich“ und reject für „nicht erfolgreich“:

Mit myPromise rufen wir das Ganze auf und weil der Prozess asynchron stattfindet, warten wir mit then auf eine Antwort. Wenn der Vorgang erfolgreich war, geben wir mit then eine Nachricht auf der Konsole aus.

Wir könnten natürlich auch noch andere Dinge umsetzen, nachdem wir etwas auf dem Server erstellt haben. Allerdings hast du in diesem Artikel bereits alle wichtigen Details erfahren, um in JavaScript Promises einsetzen zu können.

Inhaltsverzeichnis

1. Die stringify-Methode: Objekt in JSON String konvertieren

Wenn wir dieses Objekt nun in das JSON (JavaScript Object Notation) Format bringen möchten, verwenden wir dazu die sogenannte stringify-Methode. Stellen wir uns beispielsweise vor, wir befinden uns in unserem Code an einem Punkt, an dem wir das person-Array oder auch nur die einzelne Person im JSON-Format benötigen. Zum Beispiel, um sie auf dem Computer zu speichern oder in ein Storage hochladen zu können. In diesem Fall schreiben wir beispielhaft folgendes:

JSON ist ein Interface, in welchem eine Methode namens stringify existiert. Im Grunde sagt uns diese, dass wir ein Objekt wie etwa person in ein JSON-Format „stringifizieren“ können. Wir übergeben also zwischen den runden Klammern das Objekt person, das wir in das JSON-Format umwandeln möchten:

Anschließend loggen wir den Code in die Konsole, um die Person am Ende als einfach zu lesenden JSON-String zu erhalten.

Möchtest du den Code auf deiner Maschine, also deinem Computer ausführen, musst du dafür Node.js installieren. Damit kannst du ganz einfach den Befehl node main.js eingeben und aufrufen. Auf der folgenden Abbildung sehen wir dann auch bereits den JSON String:

2. Einen JSON String in ein JavaScript Objekt umwandeln

Das Ganze funktioniert aber auch genau andersherum. Nehmen wir beispielsweise an, wir sprechen eine externe API über einen http-Request an, um uns davon Informationen wie etwa Studentendaten zu beschaffen. In diesem Fall senden APIs häufig JSON-Informationen, also Daten im JSON-Format, die wir für den weiteren Gebrauch umwandeln müssen. Dafür konvertieren wir den erhaltenen JSON String zu einem JavaScript Objekt.

Möchten wir jetzt also den JSON-String unseres Beispiels wieder in ein Personen-Objekt konvertieren, dann verwenden wir dafür nicht die stringify-Methode, sondern die sogenannte parse-Methode.

3. Die parse-Methode

Bevor wir die parse-Methode einsetzen, entfernen wir im ersten Schritt das Array:

Anschließend erstellen wir eine Variable für den JSON String:

Diesem weisen wir den folgenden Wert zu:

Da der String jetzt zu viele doppelte Anführungszeichen enthält, ersetzen wir das erste und letzte durch „single quotes“, also einfache Anführungszeichen:

An dieser Stelle werden wir aus dem String wieder ein JavaScript-Objekt machen, denn die Information '{"name":"John", "age":30, "isStudent":false}' ist beispielsweise das Ergebnis, welches wir beim Einlesen einer JSON-Datei erhalten oder als Antwort über eine RESTful-API bekommen.

Da wir mit der Person aus diesem String in unserem Code noch weiterarbeiten möchten, konvertieren wir ihn nun zurück:

Mit der parse-Methode wandeln wir das  JSON-Format in ein Objekt um und können damit auch schon die Person, die wir zurückkonvertiert haben, in die Konsole loggen:

Vor dem Starten speichern wir das Programm, geben den Befehl node main.js im Terminal ein und sehen dann in der Konsole ein JavaScript-Objekt:

Das erkennen wir vor allem am Syntax Highlighting, welches beispielsweise den String John in Grün darstellt.

4. Die age-Property ändern

Im nächsten Schritt könnten wir beispielsweise für age den Wert 100 festlegen und damit 30 ersetzen:

Daraufhin speichern wir das Programm erneut, führen es aus und sehen in der Konsole den Beweis für die Änderung und die erfolgreiche Konvertierung eines JSON Strings in ein JavaScript-Objekt:

Auf diesem Weg können wir also von JSON zu JavaScript und von JavaScript zu JSON sowohl serialisieren als auch deserialisieren.

Inhaltsverzeichnis

1. Welchen Zweck hat die JavaScript map Methode?

2. Die Werte eines Arrays verdoppeln

Starten wir also direkt mit dem ersten Beispiel-Array:

An diesem Array werden wir jetzt eine Transformation durchführen, indem wir alle Werte darin verdoppeln. Das heißt, aus eins wird zwei, aus zwei wird vier, aus fünf wird zehn und so weiter.

Standardmäßig könnten wir eine Schleife erstellen, dann durch das Array iterieren und den Wert jedes Elements verdoppeln. Dafür gibt es allerdings eine bessere Lösung: Die map Methode, mithilfe derer wir Transformationen an Array-Elementen durchführen können.

Beispielhaft erstellen wir dafür eine neue Variable und nennen diese doubled.

3. Die map Methode anwenden

Anschließend weisen wir unser Array zu und wenden die map Methode darauf an, die uns am Ende ein neues Array zurückgibt.

Wir verändern damit also nicht das bestehende Array, sondern erzeugen ein neues. In den Klammern folgt dann eine Expression, bzw. genauer gesagt, eine Arrow Function.

Falls du noch nicht wissen solltest, was eine Arrow Function ist, kannst du dir gerne vorher unseren Blogbeitrag dazu ansehen.

Darin schreiben wir dann folgendes:

4. Wie funktioniert der Code?

Den Namen num habe ich zufällig gewählt, weil er sehr kurz ist. Natürlich kannst du auch einen anderen Titel, wie beispielsweise number verwenden.

Wir nehmen also jede „num“ steuern durch das Array und sorgen damit dafür, dass num einmal jeden Wert annimmt. num ist also erst eins, dann zwei, dann drei, dann vier und dann fünf.

Final geben wir den Wert num * 2 zurück. Das heißt, beispielsweise: Wenn wir bei Element 4 angekommen sind, ist num 4 und wir sagen damit 4 ist 4 * 2.

Um die Ausgabe zu überprüfen, loggen wir doubled in die Konsole:

Dann speichern wir das Programm und öffnen ein neues Terminal. Damit du das Terminal öffnen und Befehle darin eingeben kannst, benötigst du Node.js von der Webseite nodejs.org.

Mit dem Befehl node main.js können wir die JavaScript-Datei dann ausführen und sehen in der Konsole unser neues Array, in welchem alle Werte transformiert, genauer gesagt, gedoppelt wurden:

In der echten Welt müssen wir in der Regel nicht so häufig Werte verdoppeln. Aus diesem Grund sehen wir uns den Einsatz der JavaScript map Methode jetzt auch mit Objekten an, indem wir Personen mappen und am Ende von unserem ursprünglichen Array ein Neues erstellen.

5. Die JavaScript map Methode bei Objekten anwenden

Um die map Methode bei einem Array mit Objekten anwenden zu können, benötigen wir zuerst wieder ein neues Array. Wir entfernen also den bisherigen Code und erstellen beispielhaft das Folgende:

Damit haben wir ein Array vor uns namens persons (people könnte man es natürlich auch nennen), in welchem sich die Properties name und age befinden.

Die name-Property werden wir erst mal außer Acht lassen.

Stell dir beispielsweise vor, du hast Rechnungen vor dir liegen, welche komplexe Objekte sind. Du möchtest allerdings nur den finalen Rechnungsbetrag davon wissen. Wenn du das als Array erhalten möchtest, könntest du folgendes schreiben:

Anschließend nehmen wir das persons-Array und transformieren dieses mit der map-Methode, indem wir ein neues Array erstellen, in welchem wir die age-Property einer Person haben möchten:

Um es noch einmal zu zeigen: Bei der Zeile person => person.age handelt es sich um die Expression, also die Arrow Function. Eine Person ist dabei beispielsweise Anna, die für ein Objekt steht.

Wir möchten jetzt davon lediglich die age-Property. Das heißt, das Programm ignoriert alles andere und erstellt nur aus age ein neues Array.

Um das nachzuprüfen, geben wir ages nun auf der Konsole aus:

Dann speichern wir das Programm, geben wieder den Befehl node main.js im Terminal ein und sehen in der Konsole das neu generierte Array, welches nur die Werte der age-Property enthält: 25, 30 und 22.

Dabei handelt es sich nicht mehr um Objekte, sondern um ein einfaches Array mit den Integern 25, 30 und 22 als Zahlenwerte.

Gleiches können wir natürlich auch mit name umsetzen. Dafür schreiben wir im Code folgendes:

Auch names loggen wir anschließend wieder in die Konsole, speichern das Programm und führen es aus:

Jetzt sehen wir ein String-Array mit den Werten Anna, Max und Lisa. Damit haben wir ein Array aus Objekten mithilfe der map Methode so transformiert, dass ein Neues erzeugt wurde, welches ausschließlich die Werte des Ursprungs-Arrays für den Namen oder das Alter enthält.

Die filter Methode einbauen

An dieser Stelle können wir noch einen Schritt weiter gehen und unser Beispiel mit einer zusätzlichen Methode verbinden. Das heißt, wir könnten zuerst filtern und daraufhin mappen, um alles aneinander zu ketten.

Falls du noch keine Ahnung von der filter-Methode haben solltest, dann sieh dir gerne den Beitrag dazu an, der die filter-Methode für Arrays erklärt.

Wir könnten unser Beispiel so verketten, dass wir vor der map- die filter-Methode hinzufügen, mit welcher wir beispielsweise nach person filtern. Dabei möchten wir nur die Personen herausfiltern, deren Alter über 25 liegt und den Namen davon ausgeben lassen:

Nach dem Speichern und Ausführen des Programms, sehen wir in der Konsole nur den Namen Max:

Das liegt daran, dass wir im Schritt Nummer 1 gefiltert und auf die Personen reduziert haben, die der Filter-Bedingung entsprechen. Demzufolge auf alle Personen, die älter als 25 sind:

Im zweiten Schritt haben wir dann das Array gemappt, um ein neues zu erstellen, welches nur die Werte enthält, die wir tatsächlich haben möchten:

In diesem Fall also Max als Namen. Das heißt, wir haben die age-Property ignoriert und daraus ergab sich ein String-Array mit einem einzigen Wert.

In der echten Welt würde man die JavaScript map Methode beispielsweise verwenden, um eine Liste von Datenobjekten, wie unser persons-Array, in eine Liste von UI-Komponenten zu konvertieren.

Inhaltsverzeichnis

1. Wie filtern wir Zahlen aus einem Array?

Info:
Auf unserem YouTube-Kanal gibt es ein komplettes JavaScript-Grundlagenvideo, in welchem du in über einer Stunde alle Grundlagen von JavaScript lernst.

Unser Ziel ist es jetzt, alle geraden Zahlen herauszufiltern. Damit wir diese aus dem Array erhalten, erstellen wir zunächst eine neue Variable, die wir beispielsweise evenNumbers nennen, da "even" der englische Begriff für "gerade" ist:

2. Die JavaScript filter Methode aufrufen

Dann rufen wir auf diesem Array die filter function bzw. Methode auf, die uns auch schon vorgeschlagen wird:

Darin erstellen wir jetzt eine Arrow Function. Falls du nicht wissen solltest, was eine Arrow Function ist, sieh dir gerne unseren Beitrag dazu an.

In dieser Funktion können wir einen Wert wie beispielsweise number definieren und für jede number im Array überprüfen wir dann mit modulo 2, ob der Restwert genau 0 ist.

Das bedeutet: Wenn wir beispielsweise 4 durch 2 teilen, bleibt kein Rest übrig, wodurch die Zahl nur gerade sein kann.

Mit dem Ausdruck number % 2 == 0 haben wir demnach eine Möglichkeit, herauszufinden, ob eine Zahl gerade oder ungerade ist. Dementsprechend muss die Zahl ungerade sein, wenn dieser Wert nicht 0 entspricht. Wir können also damit aus dem numbers Array alle geraden Zahlen herausfiltern.

An dieser Stelle loggen wir die Funktion evenNumbers nun mal in die Konsole, speichern das Programm und öffnen ein neues Terminal:

Wenn du das Programm genauso im Terminal ausführen möchtest, wie ich das getan habe, benötigst du dafür wieder Node.js.

In der Konsole sehen wir dann die Zahlen 2, 4 und 6, die wir aus dem Array herausgefiltert haben:

Erläuterung

Der Vorgang ist dabei immer der Gleiche: Wir verwenden die JavaScript filter Methode unseres Arrays und definieren darin unseren filter-Ausdruck: 

number => number % 2 == 0

Damit legen wir fest, wie wir filtern und welche Werte wir am Ende erhalten möchten. Als Resultat gibt uns das Programm ein neues Array zurück.

In der Realität haben wir nur selten mit Arrays zu tun, die mit den Zahlen 1 bis 6 gefüllt sind. Meistens begegnen wir dort viel komplexeren Objekten wie etwa Personen oder Rechnungsdaten. Aus diesem Grund begeben wir uns jetzt auf das nächste Level und sehen uns an, wie wir Objekte filtern können.

3. Objekte filtern

Um Objekte zu filtern, benötigen wir an erster Stelle ein neues Array, wie zum Beispiel das Folgende:

Es handelt sich dabei um ein Array mit dem Namen persons und darin befinden sich drei Objekte. Jedes dieser Objekte stellt eine Person dar und besitzt zwei Properties: name und age.

Die Aufgabe unseres Beispiels wird nun sein, alle Erwachsenen aus diesem Array herauszusuchen.

Max ist 16 Jahre alt und damit nicht erwachsen. Demnach filtern wir schlichtweg nach dem Alter als Bedingung.

Auch hier erstellen wir wieder unsere Expression (Ausdruck), also unsere Arrow Function, mit der wir filtern. Das bedeutet, dass wir aus dem Kontext jede Person in unserem persons-Array suchen und nach der age-Property filtern, weil wir das Alter als Filter-Kondition verwenden.

Die Bedingung festlegen, nach der wir filtern

Wir suchen damit eine Person, die entweder genau 18 oder älter ist:

Da das nur ein Beispiel ist, könnten wir natürlich auch andere Bedingungen festlegen.

Die Bedingung ließe sich zum Beispiel noch so erweitern, dass person.age auch kleiner als 100 sein muss:

Den hinteren Teil habe ich lediglich noch angehängt, um dir zu demonstrieren, dass wir nicht nur eine, sondern auch mehrere Bedingungen stellen können.

Außerdem haben wir die Möglichkeit, neben dem Alter auch nach Namen zu suchen, was im Fall unseres Beispiels allerdings keinen Sinn ergibt, weil erwachsen einfach jeder ist, der älter als 18 ist.

Wenn wir das Programm so speichern, adults in die Konsole loggen und ausführen, wird uns ein neues Array zurückgegeben:

In der Konsole sehen wir dann name: Anna, age: 25 und Lisa mit age: 30. Wie wir feststellen können, ist der 16-jährige Max nicht dabei.

Du weißt an dieser Stelle also, wie man die JavaScript filter Methode zusammen mit einem Array einsetzt.

Inhaltsverzeichnis

1. Wie erstellt man in JavaScript Arrow Functions?

Danach ergänzen wir den Beispiel-Code, der ausgeführt werden soll:

Standardmäßig würde diese Funktion folgendermaßen aussehen:

Wie du jetzt schon sehen kannst, nimmt die Arrow Function nur eine Zeile in Anspruch, während es bei der gängigen Funktion drei Zeilen sind.

Das ermöglicht eine bessere Lesbarkeit, womit wir schon einen validen Grund für den Einsatz der Arrow-Function haben.

Abgesehen davon erfüllen beide Funktionen den exakt gleichen Zweck.

Info:
Wenn du die wichtigsten Grundlagen von JavaScript lernen möchtest, dann sieh dir gerne unseren JavaScript Einsteigerkurs auf YouTube an.

An dieser Stelle löschen wir die längere Version unserer Funktion nun mal aus dem Code heraus:

Wenn wir die Arrow Function „greet“ jetzt aufrufen möchten, setzen wir das so um, wie wir es auch bei einer gewöhnlichen Funktion tun würden:

Durch diesen Aufruf würden wir den String „Hello World“ in der Konsole sehen.

2. JavaScript Arrow Functions mit Parametern

Jetzt sehen wir uns an, inwiefern sich die Funktion ändert, wenn wir Parameter hinzufügen. Im Beispiel, das wir gerade gesehen haben, gibt es offensichtlich keine Parameter, wie wir an dem leeren runden Klammerpaar erkennen können:

Für unser neues Beispiel entfernen wir die obenstehende Arrow-Function und erstellen eine neue. Diesmal erzeugen wir eine add-Funktion, für welche wir zwei Parameter wie etwa a und b benötigen, um sie am Ende zu summieren. In den zugehörigen Codeblock, den wir mit dem Arrow einleiten, schreiben wir „a + b“:

Damit haben wir genau das, was wir erreichen möchten. a und b werden zurückgegeben und aufrufen können wir dies beispielsweise so:

Das Ergebnis davon ist 3, was wir uns in der Praxis ansehen können, indem wir ein neues Terminal öffnen:

Damit wir den Code serverseitig ausführen können, muss node.js natürlich installiert sein. Vor dem Starten ergänzen wir console.log um die add-Funktion, speichern das Programm und schreiben node main.js in das Terminal, um den Code auszuführen:

In der Konsole erhalten wir dann das Ergebnis 3:

3. Arrow Functions mit nur einem Parameter

Nun sehen wir uns in JavaScript Arrow Functions an, die nur einen Parameter besitzen. Dafür löschen wir zunächst unseren bisherigen Code. Nehmen wir an, wir erstellen eine Funktion namens square. Für diese Funktion werden wir nicht a und b, sondern beispielsweise lediglich x benötigen. Das Ergebnis von square soll sich dann aus x hoch 2 ergeben, also schreiben wir x * x:

In diesem Fall können wir auf die beiden runden Klammern verzichten, da wir nur einen Parameter besitzen. 

Kommen hingegen zwei Parameter zum Einsatz, können wir diese nicht ohne ein Klammerpaar stehen lassen, wie es im folgenden Beispiel zu sehen ist:

Korrekt dargestellt ist diese Arrow Function folgendermaßen:

Bei einem Parameter können wir die Klammern aber wie gesagt weglassen:

Den hinteren Bereich der Funktion wirst du sehr häufig in der Praxis finden:

Beispielsweise beim Filtern innerhalb Arrays als eine Art von Ausdruck. Deshalb ist dieser Beitrag so wichtig, damit du verstehst, was hier im Grunde passiert.

Wir nehmen also den Parameter x, verwenden diesen weiter im Codeblock und geben automatisch etwas zurück.

Selbst ohne das Schlüsselwort return geben wir am Ende das zurück, was x * x ergibt.

4. Mehrzeilige Arrow Functions in JavaScript

Final erstellen wir noch eine letzte Arrow Function, diesmal allerdings mit geschweiften Klammern. Man sieht diese sehr häufig, wie beispielsweise bei jQuery AJAX.

Wir nennen unsere Funktion multiply, geben beispielhaft zwei Parameter an und erstellen einen Codeblock mit mehr als einer Zeile. Genau aus diesem Grund verwenden wir geschweifte Klammern:

Eine Funktion dieser Art hat dich vielleicht schon öfter in JavaScript verwirrt und möglicherweise ist das auch der Grund, weshalb du diesen Blogbeitrag liest.

Innerhalb dieses Codeblocks erstellen wir eine Variable, die wir result nennen. Da unsere Funktion multiply heißt, weisen wir dieser a * b zu. Zu guter Letzt geben wir result mit dem Schlüsselwort return zurück, da wir nun mehrere Zeilen in unserem Codeblock haben.

Das bedeutet im Umkehrschluss, dass bei einer einzeiligen Arrow Function der Wert hinten am Ende der Zeile zurückgegeben wird, wohingegen wir bei der mehrzeiligen Variante einen Code-Block besitzen und mit return einen selbst bestimmten Wert zurückgeben.

Damit haben wir auch mit diesem Beispiel eine Arrow Function erstellt, die wir beispielsweise mit den Werten 3 und 3 aufrufen können, um diese multiplizieren zu lassen:

5. Zusammenfassung

Du hast in diesem Beitrag gelernt, wie man auf moderne Art in JavaScript Arrow Functions mit unterschiedlichen Stylings erstellen kann.

Diese können in einer Zeile stehen, aber auch einen Block aus geschweiften Klammern enthalten, in dem sich mehrere Zeilen befinden. Es gibt Arrow Functions, die nur einen Parameter besitzen, wodurch diese runden Klammern hinfällig sind:

Allerdings existieren ebenso Arrow Functions, die wie im gerade gezeigten Beispiel mehrere Parameter enthalten, in welchem Fall wir nicht auf die Klammern verzichten können.

Eines haben alle Arrow Functions allerdings gemeinsam, nämlich diesen Pfeil:  =>

An dieser Stelle sind wir am Ende des heutigen Artikels angekommen und ich hoffe, dass das Thema für dich jetzt um einiges verständlicher geworden ist.

Inhaltsverzeichnis

1. Was haben Arrays mit JavaScript Schleifen zu tun?

Warum starten wir direkt mit einem Array? Weil wir Schleifen häufig im Kontext mit Ansammlungen von Objekten verwenden. Das könnte zum Beispiel ein Array sein.

Nur selten verwenden wir Schleifen hartkodiert mit einer bestimmten Anzahl von Iterationen. Was das genau bedeutet, sehen wir uns direkt an.

2. Die JavaScript for Schleife

Info:
Auf unserem YouTube-Kanal gibt es einen umfangreichen Anfängerkurs zu JavaScript, mit welchem du in etwas über einer Stunde alle Grundlagen von A bis Z zur JavaScript-Programmierung lernst.

Grundsätzlich verwenden wir in JavaScript Schleifen, wenn wir Code in einer gewissen Anzahl wiederholt ausführen möchten. 

Die erste der JavaScript Schleifen, mit der wir uns heute beschäftigen werden, ist die for Schleife. Um eine for Schleife zu erstellen, verwenden wir das Schlüsselwort for, erzeugen anschließend eine Zählervariable mit dem Keyword let, legen eine Bedingung fest und erhöhen beispielsweise am Ende die Zählervariable:

Der Code innerhalb der runden Klammern legt fest: i ist zu Beginn 0 und solange i kleiner ist als 3, soll die Zählervariable um eins erhöht werden.

Die for Schleife ist übrigens die Art von Schleife, bei der Programmiereinsteiger am längsten brauchen, um deren Konstrukt zu verstehen.

3. Der Aufbau einer for Schleife

Wir erstellen also im ersten Schritt in der Schleifendefinition eine Zählervariable:

Diese haben wir i genannt und ihr den Startwert 0 zugewiesen. Selbstverständlich könnte man die Variable auch anders benennen.

Danach folgen ein Semikolon und eine Bedingung:

Diese Bedingung bedeutet: Solange i kleiner ist als 3, soll sich i um eins erhöhen und den Befehl im Schleifenkörper ausführen:

Wichtig:
Du solltest node.js von der Website nodejs.org installiert haben, um diesem Tutorial folgen und JavaScript vom Computer ausführen zu können.

Wenn wir uns jetzt innerhalb der Schleife im Codeblock die Zählervariable i ausgeben lassen, indem wir unten in das Terminal „node main.js“ eintragen und Enter drücken, sehen wir, dass 0, 1, und 2 ausgegeben werden:

Warum werden 0, 1 und 2 ausgegeben? Ganz einfach: Solange i kleiner ist als drei, führt das Programm den Code aus. Das bedeutet, dass bei der ersten Iteration i 0 ist und der Code damit ausgeführt wird. Bei der zweiten Iteration wird i um eins erhöht und hat somit den Wert 1. Da 1 noch kleiner ist als 3, führt das Programm den Code ebenfalls aus. Bei der darauffolgenden Iteration ist i 2, nachdem die Variable nochmals erhöht wurde und wird dementsprechend noch ausgegeben.

Danach wird i nochmals erhöht und hat damit den Wert 3. Da 3 nicht kleiner als 3 ist, wie es die Bedingung vorgibt, beendet das Programm die Schleife.

So können wir mit der for Schleife Code wiederholt ausführen und genau bestimmen, wie oft das geschehen soll.

Wenn wir die Bedingung so ändern, dass der Code so lange ausgeführt wird, wie i kleiner oder gleich drei ist, sehen wir nach dem Speichern und Ausführen auch die Zahl drei in der Konsole:

Das liegt eben daran, dass wir die Bedingung angepasst haben.

4. Das Array in die for Schleife integrieren

Als Nächstes werden wir die hart kodierte Zahl 3 aus der Bedingung durch colors.length ersetzen. colors.length besitzt auch den Wert 3, da das colors-Array drei Elemente enthält.

Info:
Falls du nicht wissen solltest, wie man Arrays in JavaScript verwendet, kannst du gerne den Beitrag über Arrays in JavaScript lesen oder das Video dazu ansehen.

Im Codeblock der for Schleife geben wir dann den Array-Namen sowie den Index an und verweisen damit auf das Element i:

Bevor wir den Code ausführen, müssen wir noch das =-Zeichen aus der Bedingung entfernen:

Damit sagen wir: Solange i kleiner ist als colors.length, möchten wir den Codeblock ausführen.

Der Code funktioniert jetzt folgendermaßen:

Während der ersten Schleifen-Iteration hat i den Wert 0, also „red“. Danach wird i auf 1 erhöht und entspricht demnach „green“. Anschließend wird i ein letztes Mal erhöht, sodass die Variable 2 ist und der Farbe „blue“ im Array entspricht, da sich blue auf Index 2 befindet.

Wir müssen dabei beachten, dass bei Arrays das erste Element auf Index 0 ist und die anderen beiden dementsprechend auf Index 1 und 2.

Wenn wir das Programm so speichern und ausführen, sehen wir red, green und blue in der Konsole:

Wir haben uns mithilfe der for Schleife also die Elemente red, green und blue des Arrays ausgeben lassen.

5. Die for of Schleife

Mit der sogenannten for of Schleife können wir das Ganze etwas leichter gestalten und dennoch das gleiche Resultat erzielen. Dabei haben wir keine Zählervariable, sondern iterieren direkt durch die Elemente.

Um die for of Schleife zu erzeugen, schreiben wir wieder zunächst das Schlüsselwort for und erstellen dann eine Variable, die immer auf das aktuelle Element deutet. Danach schreiben wir „of“ und anschließend „colors“. Am Ende sieht die Schleife folgendermaßen aus:

Wir erstellen mit „let color“ eine Variable, die wir color nennen. Mit „colors“ beziehen wir uns auf das obenstehende Array. Dann iterieren wir über das Array, wodurch color einmal „red“, in der nächsten Iteration „green“ und in der letzten Iteration „blue“ ist.

Jetzt speichern wir das Programm, um den Code auf der Konsole auszugeben.

Vor dem Starten schreiben wir „cls“ in die Konsole, um das Terminal wieder zu leeren.

Dann führen wir die Datei aus und sehen wieder red, green und blue in der Konsole:

Damit haben wir also wieder das gleiche Ergebnis erzielt, allerdings auf eine einfachere Art und Weise. Worauf wir allerdings bei der for of Schleife verzichten, ist der Index. Das heißt, wenn du mit dem Index arbeiten möchtest, erweist sich die normale for Schleife als sinnvoller.

Damit hast du auch die for of Schleife kennengelernt! Als Nächstes sehen wir uns die while Schleife an.

6. Die while Schleife

Bei der while Schleife erstellen wir die Zählervariable außerhalb der Schleifendefinition. Wir fangen also beispielsweise folgendermaßen an:

Unter der Variable i beginnt dann die while Schleife, welche wir mit dem Schlüsselwort „while“, gefolgt von einer Bedingung und einem Codeblock einleiten. Dabei legen wir fest, dass „während i kleiner ist als 5“ i in der Konsole ausgegeben und in jedem Durchlauf um eins erhöht werden soll.

Das „i++“ müssen wir bei der while Schleife in den Schleifenkörper schreiben. Würden wir i++ weglassen, befänden wir uns in einer sogenannten Endlosschleife. Das liegt daran, dass die Bedingung while (i < 5) ohne eine Änderung der Variable i immer erfüllt bleiben würde, da i den Wert 0 dauerhaft behielte. Dementsprechend würde unser Programm durch das Festhängen in der Endlosschleife abstürzen oder festfrieren.

Da wir i in der Schleife erhöhen, wird die Bedingung while(i < 5) irgendwann nicht mehr wahr sein, wodurch die Schleife verlassen wird. 

An dieser Stelle speichern wir das Programm und geben erneut den Befehl „cls“ in die Konsole ein, um sie zu leeren:

Dann führen wir den Code aus und sehen im Terminal die Zahlen 0, 1, 2, 3 und 4. Das liegt daran, dass wir bei 0 beginnen, i ausgeben und die Variable nach der Ausgabe direkt um eins erhöhen, solange i kleiner ist als 5.

Genau wie bei der for Schleife können wir mithilfe der while Schleife unseren Code in einer bestimmten Anzahl wiederholt ausführen. Auch bei der while Schleife lässt sich die hart kodierte Zahl innerhalb der Bedingung beispielsweise durch colors.length ersetzen: 

while (i < colors.length)

Zu guter Letzt sehen wir uns die do while Schleife an.

7. Die do while Schleife

Auch bei der do while Schleife erstellen wir zunächst wieder eine Zählervariable außerhalb der Schleife, die zum Beispiel folgendermaßen aussehen könnte:

Danach beginnen wir mit dem Keyword „do“ und setzen darunter den Codeblock. Am Ende des Codeblocks folgt das Schlüsselwort while und die Bedingung (i < 5):

Wir drehen bei der do while Schleife das Ganze also einfach etwas um. Dann speichern wir das Programm und geben erneut „cls“ in die Konsole ein, bevor wir den Code ausführen.

Beim Starten sehen wir wieder die Zahlen 0, 1, 2, 3, und 4 in der Konsole:

8. Wie unterscheiden sich die JavaScript Schleifen while und do while voneinander?

Doch wie unterscheiden sich die while und die do while Schleife voneinander?
Ganz einfach:
Der folgende Block wird auf jeden Fall einmal ausgeführt:

Die while Schleife beginnt erst mit der Bedingung, was zur Folge hat, dass der Code erst ausgeführt wird, wenn die Bedingung stimmt. Bei der do while Schleife hingegen ist es genau andersherum. Das Programm führt den Code zuerst einmal aus und überprüft dann, ob er noch ein weiteres Mal ausgeführt werden soll.

Bei der while Schleife wird also erst überprüft, ob der Code ausgeführt werden soll und falls das der Fall ist, führt das Programm diesen aus und wiederholt den Vorgang.

Was sich ändert, ist also die Reihenfolge.

Die do while Schleife wird demnach immer dann verwendet, wenn wir mindestens einmal zu 100 % den Code der Schleife ausführen müssen. Die Anwendungsfälle dafür sind aber ziemlich begrenzt.

In den meisten Fällen verwenden wir in JavaScript die for sowie die for of Schleife.

Inhaltsverzeichnis

1. Wie erstellt man in JavaScript Arrays?

Damit wir in unserem Array Farben speichern können, verwenden wir den Datentyp String. Wir schreiben also beispielhaft zwischen die eckigen Klammern die Strings „red“, „green“ und „blue“.

Wichtig:
Zwischen den Klammern können wir jeden beliebigen Datentyp und jede beliebige Struktur eintragen. Demnach ist es auch möglich, neben Strings noch Zahlen und komplexere Objekte in Arrays zu speichern.

Info:
Auf unserem YouTube-Kanal gibt es einen kompletten Einsteigerkurs zum Thema JavaScript, in welchem man in knapp einer Stunde alle Grundlagen zu JavaScript lernt.

Wir haben nun also unser Array mit drei Farben erstellt. An dieser Stelle können wir uns auch schon direkt ein Element des Arrays ausgeben lassen.

2. Was ist ein Index?

Wichtig zu wissen: Das erste Element des Arrays, also „red“ befindet sich auf dem Index 0. 

Das bedeutet, Array-Elemente haben jeweils einen Index. Da der Computer nicht bei 1 anfängt zu zählen, sondern bei 0, sitzt „red“ auf dem Index 0.

Die Farbe „green“ ist auf dem Index 1 und „blue“ auf dem Index 2. Trotzdem handelt es sich bei „red“ um das erste Element, bei „green“ um das zweite und bei „blue“ um das dritte Element. Das heißt, das dritte Element „blue“ sitzt auf dem Index 2.

3. Auf Elemente des Arrays zugreifen

Wenn wir uns jetzt einfach mal eine Farbe ausgeben lassen möchten, können wir zum Beispiel die Konsole als Ausgabeort verwenden. Dafür schreiben wir console.log, anschließend die colors-Variable bzw. den Namen unseres Arrays und ein eckiges Klammerpaar, um zu indizieren, dass wir auf ein bestimmtes Element zugreifen möchten. Zwischen den eckigen Klammern übergeben wir einen Index wie beispielsweise 0:

Nun steuert das Programm in die colors-Variable, bei der es sich um ein Array handelt und greift auf das Element bei Index 0 zu. Das ist wiederum das erste Element „red“.

Wir könnten das Ganze jetzt so speichern und im Browser testen, indem wir in Google Chrome die JS-Datei ausführen. Allerdings empfehle ich dir stattdessen, Node.js zu installieren.

4. Node.js herunterladen

Node.js bietet uns die Möglichkeit, JavaScript-Code direkt auf unserer Maschine lokal wie auf einem Server auszuführen. Um damit fortfahren zu können, müssen wir lediglich die LTS-Version herunterladen:

Anschließend können wir ganz einfach in Visual Studio Code ein neues Terminal öffnen:

Daraufhin befinden wir uns auch schon im richtigen Ordner, in meinem Fall ist das der JS-Tutorials-Ordner.

Die Kommandozeile

Jetzt können wir unten neben dem Ordner-Pfad ein Kommando eingeben. Wir schreiben dafür „node“ für das node-Command und anschließend main.js, um hier im Ordner die main.js-Datei auszuführen:

Wenn wir auf Enter drücken, sehen wir auch schon unten den Console-Eintrag „red“:

Node.js erlaubt uns also, auf unserer Maschine serverseitig JavaScript-Code auszuführen. Dementsprechend kannst du dir jetzt sicher auch vorstellen, dass wir die Farbe „green“ in der Konsole sehen, sobald wir den Index 1 zwischen den Klammern eintragen und das Programm anschließend speichern und ausführen:

Wenn wir die Zahl 2 eintragen, sehen wir folglich „blue“:

Tragen wir allerdings 3 ein und übergeben damit einen Index, für den es gar keinen Wert mehr gibt, erhalten wir „undefined“ in der Konsole:

Das ergibt zweifellos Sinn, weil auf diesem Index kein Wert mehr existiert.

5. Elemente des JavaScript Arrays ändern

Im nächsten Schritt werden wir uns ansehen, wie wir Elemente im Array modifizieren können, um beispielsweise „red“ gegen eine andere Farbe wie „yellow“ auszutauschen.

In der Codezeile oben haben wir bereits colors und den jeweiligen Index verwendet, um auf das Element zuzugreifen. Genauso können wir die Variable colors wieder verwenden und über den Index 0 auf das erste Element zugreifen, um diesem anschließend den neuen Wert „yellow“ zuzuweisen:

Danach loggen wir nicht nur ein Element, sondern das ganze Array in die Konsole:

Damit übergeben wir das Array colors und sehen, was node.js uns nach dem Speichern auf der Konsole ausgibt:

Die Konsole zeigt uns das komplette Array mit „yellow“ als erstes Element. Wir haben also mit „red“ begonnen, das erste Element dann durch den String „yellow“ ersetzt und können nun die Änderung direkt in der Konsole erkennen.

Möchten wir „blue“ durch „yellow“ ersetzen, übergeben wir den Index 2:

Im Anschluss daran speichern wir das Programm, führen es noch einmal aus und sehen auch schon „red“, „green“ und „yellow“ in der Konsole:

Somit können wir den Index also auch verwenden, um Elemente anzupassen.

6. Die length-Property

Eine der häufigsten Properties, also Eigenschaften, die wir bei Arrays verwenden, ist die sogenannte length.

Diese enthält die Länge bzw. die Information darüber, wie viele Elemente im Array sind.

Stell dir beispielsweise vor, du möchtest eine Excel-Datei laden, in der sich x-Zeilen an Informationen befinden. Jetzt würdest du gerne wissen, wie viele Zeilen an Informationen denn genau darin enthalten sind. Sind es 300? Oder doch eher 30.000?

Aus diesem Grund kann es vorteilhaft sein, zu wissen, wie man die Länge eines Arrays abfragt.

Die Länge unseres colors-Arrays ist drei, weil es die drei Elemente "red", "green" und "blue" enthält. Wir finden die Länge heraus, indem wir wie gewohnt die Variable des Arrays aufrufen, einen Punkt setzen und das englische Wort für „Länge“ also length schreiben:

Diese Eigenschaft gibt uns am Ende aus, wie viele Elemente sich in unserem Array befinden. Dementsprechend sehen wir also 3 in der Konsole:

Zum Schluss kommen wir noch zu sehr wichtigen und fundamentalen Array-Methoden, die wir aufrufen können, um Arrays zu bedienen, zu verändern und andere nützliche Dinge damit anzustellen.

7. Die push-Methode

Um ein Element zu einem Array hinzuzufügen, verwenden wir die push-Methode:

Damit fügen wir am Ende des Arrays beispielsweise ein Element wie „purple“ hinzu. Anschließend geben wir das Ergebnis wieder auf der Konsole aus:

Nachdem wir das Programm gespeichert haben, können wir nun auch „purple“ in der Konsole sehen:

Wir haben also mit der push-Methode eine Farbe am Ende des Arrays hinzugefügt.

8. Die pop-Methode

Um das gegenteilige Ergebnis zu erzielen, setzen wir die pop-Methode ein:

Dabei übergeben wir diesmal keinen Wert, sondern schreiben lediglich colors.pop(), speichern das Programm, führen es aus und stellen fest, dass ein Element weniger in der Konsole erscheint:

Die pop-Methode hat damit das letzte Element des Arrays entfernt. Im Fall unseres Beispiels war das „blue“.

Das sind auch schon die wichtigsten Methoden für den alltäglichen Umgang mit den JavaScript Arrays gewesen. Selbstverständlich gibt es noch weitere Methoden, wie beispielsweise join(), slice(), splice(), filter() und forEach(). Diese gehören allerdings zu den etwas fortgeschritteneren Themen und verdienen deshalb einen eigenen Blogbeitrag.