034.2 Lektion 1

Zertifikat:

Web Development Essentials

Version:

1.0

Thema:

034 JavaScript-Programmierung

Lernziel:

034.2 JavaScript Datenstrukturen

Lektion:

1 von 1

Einführung

Programmiersprachen bilden wie natürliche Sprachen die Realität in Symbolen ab, die zu sinnvollen Aussagen kombiniert werden. Die Realität, die eine Programmiersprache abbildet, sind die Ressourcen der Maschine, wie Prozessoroperationen, Geräte und Speicher.

Jede der unzähligen Programmiersprachen verwendet ein bestimmtes Paradigma zur Darstellung von Informationen. JavaScript folgt den für Hochsprachen typischen Konventionen, bei denen die meisten Details wie beispielsweise die Speicherzuweisung implizit sind, so dass sich Programmierer auf den Zweck des Skripts im Kontext der Anwendung konzentrieren können.

Hochsprachen

Hochsprachen bieten abstrakte Regeln, so dass Programmierer weniger Code schreiben müssen, um eine Absicht auszudrücken. JavaScript bietet bequeme Programmierkonzepte zur Nutzung des Computerspeichers, die das Schreiben wiederkehrender Abläufe vereinfachen und im Allgemeinen für die Webentwicklung ausreichen.

Note	Obwohl es spezielle Mechanismen für einen gezielten Speicherzugriff gibt, sind die einfacheren Datentypen, die wir betrachten werden, deutlich weiter verbreitet.

Typische Operationen in einer Webanwendung bestehen darin, Daten durch JavaScript-Anweisungen anzufordern und zu speichern, um sie zu verarbeiten und schließlich dem Anwender zu präsentieren. Diese Speicherung ist in JavaScript recht flexibel, mit geeigneten Speicherformaten für jeden Zweck.

Deklaration von Konstanten und Variablen

Die Deklaration von Konstanten und Variablen zur Speicherung von Daten ist der Eckpfeiler einer jeden Programmiersprache. JavaScript übernimmt die Konvention der meisten Programmiersprachen und weist Konstanten oder Variablen mit der Syntax Name = Wert Werte zu. Die Konstante oder Variable auf der linken Seite nimmt den Wert auf der rechten Seite an. Der Name der Konstanten oder Variablen muss mit einem Buchstaben oder einem Unterstrich beginnen.

Der Typ der in der Variablen gespeicherten Daten muss nicht angegeben werden, da JavaScript eine Sprache mit dynamischer Typisierung ist. Der Typ der Variablen wird aus dem ihr zugewiesenen Wert abgeleitet. Es ist jedoch zweckmäßig, bestimmte Attribute in der Deklaration anzugeben, um das erwartete Ergebnis zu gewährleisten.

Note	TypeScript ist eine von JavaScript inspirierte Sprache, in der Sie, wie in niedrigeren Sprachen, Variablen für bestimmte Datentypen deklarieren können.

Konstanten

Eine Konstante ist ein Symbol, das beim Start des Programms einmal zugewiesen wird und sich nie ändert. Konstanten sind nützlich, um feste Werte festzulegen, wie z.B. die Konstante PI als 3.14159265 oder COMPANY_NAME, um den Namen Ihres Unternehmens festzuhalten.

Nehmen wir zum Beispiel einen Client in einer Webanwendung, der Wetterinformationen von einem entfernten Server empfängt. Der Programmierer entscheiden beispielsweise, dass die Adresse des Servers konstant ist, da sie sich während der Ausführung der Anwendung nicht ändern wird. Die Temperaturinformationen variieren jedoch bei jedem neuen Dateneingang vom Server.

Das Intervall zwischen den Abfragen an den Server könnten Sie ebenfalls als Konstante definieren, die jeder Teil des Programms abfragen kann:

const update_interval = 10;

function setup_app(){
  console.log("Update every " + update_interval + "minutes");
}

Wird die Funktion setup_app() aufgerufen, erscheint auf der Konsole die Meldung Update every 10 minutes. Der Begriff const vor dem Namen update_interval stellt sicher, dass sein Wert während der gesamten Ausführung des Skripts gleich bleibt. Beim Versuch, den Wert einer Konstanten zurückzusetzen, wird ein Fehler TypeError: Assignment to constant variable ausgegeben.

Variablen

Ohne den Begriff const nimmt JavaScript automatisch an, dass update_interval eine Variable und ihr Wert veränderbar ist. Dies ist gleichbedeutend mit der expliziten Deklaration der Variable mit var:

var update_interval;
update_interval = 10;

function setup_app(){
  console.log("Update every " + update_interval + "minutes");
}

Beachten Sie, dass die Variable update_interval zwar außerhalb der Funktion definiert wurde, der Zugriff auf sie jedoch innerhalb der Funktion erfolgte. Jede Konstante oder Variable, die außerhalb von Funktionen oder Codeblöcken, die durch geschweifte Klammern ({}) definiert sind, deklariert wird, hat globalen Geltungsbereich, d.h. auf sie kann von jedem Teil des Codes aus zugegriffen werden. Demgegenüber hat eine Konstante oder Variable, die innerhalb einer Funktion deklariert ist, lokalen Geltungsbereich, d.h. sie ist nur innerhalb der Funktion selbst zugänglich. Durch Klammern begrenzte Codeblöcke, wie z.B. if-Entscheidungsstrukturen oder for-Schleifen, begrenzen den Geltungsbereich von Konstanten, aber nicht von Variablen, die als var deklariert sind. Der folgende Code ist zum Beispiel gültig:

var success = true;
if ( success == true )
{
  var message = "Transaction succeeded";
  var retry = 0;
}
else
{
  var message = "Transaction failed";
  var retry = 1;
}

console.log(message);

Die Anweisung console.log(message) kann auf die Variable message zugreifen, obwohl sie innerhalb des Codeblocks der if-Struktur deklariert wurde. Das Gleiche würde nicht passieren, wenn message konstant wäre, wie im folgenden Beispiel zu sehen:

var success = true;
if ( success == true )
{
  const message = "Transaction succeeded";
  var retry = 0;
}
else
{
  const message = "Transaction failed";
  var retry = 1;
}

console.log(message);

In diesem Fall würde eine Fehlermeldung des Typs ReferenceError: message is not defined ausgegeben und das Skript gestoppt. Die Beschränkung des Geltungsbereichs von Variablen und Konstanten mag einschränkend scheinen, hilft aber, Verwechslungen zwischen den im Skript-Body und in den verschiedenen Codeblöcken verarbeiteten Informationen zu vermeiden. Aus diesem Grund werden Variablen, die mit let statt var deklariert werden, auch durch die durch geschweifte Klammern abgegrenzten Blöcke in ihrem Geltungsbereich eingeschränkt. Es gibt noch weitere subtile Unterschiede zwischen der Deklaration einer Variablen mit var oder mit let, aber der wichtigste betrifft den Geltungsbereich der Variablen, wie hier beschrieben.

Wertetypen

In den meisten Fällen müssen Sie sich nicht um den Typ der in einer Variablen gespeicherten Daten kümmern, da JavaScript sie bei der ersten Zuweisung eines Wertes an die Variable automatisch mit einem ihrer primitiven Typen identifiziert. Einige Operationen können jedoch spezifisch für den einen oder anderen Datentyp sein und zu Fehlern führen, wenn sie unbedacht eingesetzt werden. Darüber hinaus bietet JavaScript strukturierte Typen, die es ermöglichen, mehr als einen primitiven Typ in einem einzigen Objekt zu kombinieren.

Primitive Typen

Primitive Typinstanzen entsprechen den traditionellen Variablen, die nur einen Wert speichern. Typen werden implizit definiert, so dass Sie mit dem Operator typeof den Typ des in einer Variablen gespeicherten Wertes bestimmen:

console.log("Undefined variables are of type", typeof variable);

{
  let variable = true;
  console.log("Value `true` is of type " + typeof variable);
}

{
  let variable = 3.14159265;
  console.log("Value `3.14159265` is of type " + typeof variable);
}

{
  let variable = "Text content";
  console.log("Value `Text content` is of type " + typeof variable);
}

{
  let variable = Symbol();
  console.log("A symbol is of type " + typeof variable);
}

Dieses Skript zeigt auf der Konsole an, welcher Variablentyp jeweils verwendet wurde:

undefined variables are of type undefined
Value `true` is of type boolean
Value `3.114159265` is of type number
Value `Text content` is of type string
A symbol is of type symbol

Beachten Sie, dass die erste Zeile versucht, den Typ einer nicht deklarierten Variablen zu ermitteln, die dadurch als undefined identifiziert wird. Der Typ symbol ist das am wenigsten intuitive primitive Datentyp. Sein Zweck ist es, einen eindeutigen Attributnamen innerhalb eines Objekts bereitzustellen, wenn es nicht notwendig ist, einen spezifischen Attributnamen zu definieren. Ein Objekt ist eine der Datenstrukturen, die wir uns als nächstes ansehen werden.

Strukturierte Typen

Während primitive Typen für das Schreiben einfacher Routinen ausreichen, hat die ausschließliche Verwendung dieser Typen in komplexeren Anwendungen Nachteile. Eine E-Commerce-Anwendung wäre zum Beispiel viel schwieriger zu schreiben, weil Sie Artikellisten und die entsprechenden Werte nur über Variablen mit primitiven Typen speichern müssten.

Strukturierte Typen machen es einfacher, Informationen gleicher Art in einer einzigen Variablen zu gruppieren. Eine Liste von Artikeln in einem Einkaufswagen kann zum Beispiel in einer einzigen Variablen vom Typ Array gespeichert werden:

let cart = ['Milk', 'Bread', 'Eggs'];

Wie im Beispiel gezeigt, wird ein Array von Elementen mit eckigen Klammern bezeichnet. Im Beispiel enthält das Array drei String-Werte — daher die einfachen Anführungszeichen. Variablen können ebenfalls Elemente in einem Array sein, dann müssen sie ohne Anführungszeichen angegeben werden. Die Anzahl der Elemente in einem Array fragen Sie mit der Eigenschaft length ab:

let cart = ['Milk', 'Bread', 'Eggs'];
console.log(cart.length);

Die Zahl 3 erscheint in der Konsolenausgabe. Neue Elemente fügen Sie dem Array mit der Methode push() hinzu:

cart.push('Candy');
console.log(cart.length);

Hier wird der Betrag 4 angezeigt. Auf jedes Element in der Liste greifen Sie über seinen numerischen Index zu, beginnend mit 0:

console.log(cart[0]);
console.log(cart[3]);

Die Ausgabe auf der Konsole sieht wie folgt aus:

Milk
Candy

Wie Sie mit push() ein Element hinzuzufügen, nutzen Sie pop(), um das letzte Element aus einem Array zu entfernen.

Die in einem Array gespeicherten Werte müssen nicht vom gleichen Typ sein. Es ist z.B. möglich, die Menge jedes Artikels daneben zu speichern. Eine Einkaufsliste wie im vorigen Beispiel könnte wie folgt aufgebaut sein:

let cart = ['Milk', 1, 'Bread', 4, 'Eggs', 12, 'Candy', 2];

// Item indexes are even
let item = 2;

// Quantities indexes are odd
let quantity = 3;

console.log("Item: " + cart[item]);
console.log("Quantity: " + cart[quantity]);

Die Ausgabe auf der Konsole nach der Ausführung dieses Codes ist:

Item: Bread
Quantity: 4

Wie Sie vermutlich schon ahnen, ist es keine gute Idee, die Namen von Artikeln mit ihren jeweiligen Mengen in einem einzigen Array zu kombinieren, da die Beziehung zwischen ihnen in der Datenstruktur nicht explizit und sehr anfällig für (menschliche) Fehler ist. Selbst wenn Sie ein Array für die Namen und ein weiteres Array für die Mengen nutzen, würde die Bewahrung der Integrität der Liste die gleiche Sorgfalt erfordern, was nicht sehr produktiv wäre. Die beste Option in diesem Falle ist eine andere Datenstruktur: ein Objekt.

In JavaScript binden Sie mit einer objektartigen Datenstruktur Eigenschaften an eine Variable. Im Gegensatz zu einem Array haben die Elemente, aus denen ein Objekt besteht, auch keine feste Reihenfolge. Ein Element einer Einkaufsliste kann beispielsweise ein Objekt mit den Eigenschaften name und quantity sein:

let item = { name: 'Milk', quantity: 1 };
console.log("Item: " + item.name);
console.log("Quantity: " + item.quantity);

Dieses Beispiel zeigt, dass ein Objekt mit geschweiften Klammern ({}) definiert wird, wobei jedes Eigenschaft/Wert-Paar durch einen Doppelpunkt und die Eigenschaften durch Kommata getrennt sind. Auf die Eigenschaft greifen Sie im Format Variable.Eigenschaft zu, wie bei item.name, und zwar sowohl zum Lesen als auch zum Zuweisen neuer Werte. Die Ausgabe auf der Konsole nach der Ausführung dieses Codes ist:

Item: Milk
Quantity: 1

Schließlich kann jedes Objekt, das einen Artikel darstellt, in das Array der Einkaufsliste aufgenommen werden. Dies kann direkt bei der Erstellung der Liste geschehen:

let cart = [{ name: 'Milk', quantity: 1 }, { name: 'Bread', quantity: 4 }];

Wie zuvor fügen Sie ein neues Objekt, das einen Artikel repräsentiert, später zum Array hinzu:

cart.push({ name: 'Eggs', quantity: 12 });

Der Zugriff auf die Elemente in der Liste erfolgt jetzt über ihren Index und ihren Eigenschaftsnamen:

console.log("Third item: " + cart[2].name);
console.log(cart[2].name + " quantity: " + cart[2].quantity);

Die Ausgabe auf der Konsole nach der Ausführung dieses Codes ist:

third item: eggs
Eggs quantity: 12

Datenstrukturen helfen, den Code besser zu organisieren und leichter zu pflegen, sei es Ihnen selbst oder Mitgliedern Ihres Teams. Außerdem liegen viele Ausgaben von JavaScript-Funktionen in strukturierten Typen vor, die die Programmierer korrekt behandeln müssen.

Operatoren

Bisher haben wir nur gesehen, wie man neu erstellten Variablen Werte zuweist. So einfach dies auch ist, jedes Programm wird verschiedene andere Manipulationen an den Werten von Variablen vornehmen. JavaScript bietet mehrere Arten von Operatoren, die direkt auf den Wert einer Variablen wirken oder das Ergebnis der Operation in einer neuen Variablen speichern.

Die meisten Operatoren dienen arithmetischen Operationen. Um zum Beispiel die Menge eines Artikels in der Einkaufsliste zu erhöhen, verwenden Sie einfach den Additionsoperator +:

item.quantity = item.quantity + 1;

Das folgende Snippet gibt den Wert von item.quantity vor und nach der Addition aus. Verwechseln Sie nicht die Rollen des Pluszeichens in diesem Ausschnitt. Die console.log-Anweisungen kombinieren damit zwei Zeichenfolgen:

let item = { name: 'Milk', quantity: 1 };
console.log("Item: " + item.name);
console.log("Quantity: " + item.quantity);

item.quantity = item.quantity + 1;
console.log("New quantity: " + item.quantity);

Die Ausgabe auf der Konsole nach der Ausführung dieses Codes ist:

Item: Milk
Quantity: 1
New quantity: 2

Beachten Sie, dass der zuvor in item.quantity gespeicherte Wert als Operand der Additionsoperation verwendet wird: item.quantity = item.quantity + 1. Erst nach Beendigung der Operation wird der Wert in item.quantity mit dem Ergebnis der Operation aktualisiert. Diese Art von arithmetischer Operation, bei der der aktuelle Wert der Zielvariablen verwendet wird, ist recht häufig, so dass es Kurzbefehle gibt, mit denen Sie dieselbe Operation in einem reduzierten Format schreiben:

item.quantity += 1;

Auch für die anderen Grundoperationen gibt es äquivalente Kurzbefehle:

a = a - b entspricht a -= b.
a = a * b entspricht a *= b.
a = a / b entspricht a /= b.

Für Addition und Subtraktion gibt es ein drittes Format, wenn der zweite Operand nur eine Einheit ist:

a = a + 1 entspricht a++.
a = a - 1 entspricht a--.

Mehrere Operatoren können in derselben Operation kombiniert und das Ergebnis in einer neuen Variablen gespeichert werden. Die folgende Anweisung berechnet zum Beispiel den Gesamtpreis eines Artikels plus Versandkosten:

let total = item.quantity * 9.99 + 3.15;

Die Reihenfolge, in der die Operationen ausgeführt werden, entspricht der traditionellen Rangfolge: zuerst Multiplikations- und Divisionsoperationen, erst danach die Additions- und Subtraktionsoperationen. Operatoren mit der gleichen Rangfolge werden in der Reihenfolge ausgeführt, in der sie im Ausdruck erscheinen, von links nach rechts. Um die Standardreihenfolge außer Kraft zu setzen, nutzen Sie Klammern, wie in a * (b + c).

In manchen Situationen muss das Ergebnis einer Operation nicht einmal in einer Variablen gespeichert werden, beispielsweise wenn Sie das Ergebnis eines Ausdrucks innerhalb einer if-Anweisung auswerten:

if ( item.quantiy % 2 == 0 )
{
  console.log("Quantity for the item is even");
}
else
{
  console.log("Quantity for the item is odd");
}

Der Operator % (Modulo) gibt den Rest der Division des ersten Operanden durch den zweiten Operanden zurück. Im Beispiel prüft die if-Anweisung, ob der Rest der Division von item.quantity durch 2 gleich Null ist, d.h. ob item.quantity ein Vielfaches von 2 ist.

Wenn einer der Operanden des Operators + eine Zeichenkette ist, wird für die anderen Operatoren der Typ Zeichenkette erzwungen, und das Ergebnis ist eine Verkettung von Zeichenketten. In den vorangegangenen Beispielen wurde diese Art von Operation verwendet, um Zeichenketten und Variablen in das Argument der Anweisung console.log zusammenzufügen.

Diese automatische Konvertierung ist möglicherweise nicht das gewünschte Verhalten. Ein vom Benutzer in ein Formularfeld eingegebener Wert könnte beispielsweise als Zeichenkette identifiziert werden, obwohl eigentlich ein numerischer Wert gemeint ist. In solchen Fällen muss die Variable zunächst mit der Funktion Number() in eine Zahl umgewandelt werden:

sum = Number(value1) + value2;

Außerdem ist es wichtig zu überprüfen, ob der Benutzer einen gültigen Wert angegeben hat, bevor die Operation fortfährt. In JavaScript enthält eine Variable ohne zugewiesenen Wert den Wert null. Dadurch können Sie über eine Entscheidungsanweisung wie if ( value1 == null ) prüfen, ob einer Variablen ein Wert zugewiesen wurde, unabhängig vom Typ des der Variablen zugewiesenen Wertes.

Geführte Übungen

Ein Array ist eine Datenstruktur, die es in vielen Programmiersprachen gibt, von denen einige nur Arrays mit Elementen desselben Typs zulassen. Ist es in JavaScript möglich, ein Array mit Elementen unterschiedlichen Typs zu definieren?
Ein Beispiel für ein Objekt in einer Einkaufsliste lautet: let item = { name: 'Milk', quantity: 1 }. Wie deklarieren Sie dieses Objekt so, dass es den Preis des Artikels enthält?
Wie aktualisieren Sie in einer einzigen Codezeile den Wert einer Variablen auf die Hälfte ihres aktuellen Werts?

Offene Übungen

Welchen Wert zeigt der folgende Code in der Konsolenausgabe an?

var value = "Global";

{
  value = "Location";
}

console.log(value);

Was geschieht, wenn einer oder mehrere der an einer Multiplikationsoperation beteiligten Operanden eine Zeichenkette sind?
Wie entfernen Sie das Element Eggs aus dem Array cart, das mit let cart = ['Milk', 'Bread', 'Eggs'] deklariert wurde?

Zusammenfassung

Diese Lektion behandelt die grundlegende Verwendung von Konstanten und Variablen in JavaScript. JavaScript ist eine Sprache mit dynamischer Typisierung, so dass Programmierer den Variablentyp nicht angeben müssen, bevor sie ihn setzen. Dennoch ist es wichtig, die primitiven Typen der Sprache zu kennen, um das korrekte Ergebnis grundlegender Operationen sicherzustellen. Darüber hinaus kombinieren Datenstrukturen wie Arrays und Objekte primitive Typen und ermöglichen es, komplexere, zusammengesetzte Variablen zu erstellen. In dieser Lektion werden die folgenden Konzepte und Verfahren besprochen:

Verstehen von Konstanten und Variablen
Geltungsbereich von Variablen
Deklarieren von Variablen mit var und let
Primitive Typen
Arithmetische Operatoren
Arrays und Objekte
Typenzwang und Konvertierung

Lösungen zu den geführten Übungen

Ein Array ist eine Datenstruktur, die es in vielen Programmiersprachen gibt, von denen einige nur Arrays mit Elementen desselben Typs zulassen. Ist es in JavaScript möglich, ein Array mit Elementen unterschiedlichen Typs zu definieren?

Ja, in JavaScript ist es möglich, Arrays mit Elementen verschiedener primitiver Typen zu definieren, z.B. Strings und Zahlen.
Ein Beispiel für ein Objekt in einer Einkaufsliste lautet: let item = { name: 'Milk', quantity: 1 }. Wie deklarieren Sie dieses Objekt so, dass es den Preis des Artikels enthält?

let item = { name: 'Milk', quantity: 1, price: 4.99 };
Wie aktualisieren Sie in einer einzigen Codezeile den Wert einer Variablen auf die Hälfte ihres aktuellen Werts?

Sie verwenden die Variable selbst als Operanden, value = value / 2, oder über die Kurzform des Operators: value /= 2.

Lösungen zu den offenen Übungen

Welchen Wert zeigt der folgende Code in der Konsolenausgabe an?

var value = "Global";

{
  value = "Location";
}

console.log(value);

Location

Was geschieht, wenn einer oder mehrere der an einer Multiplikationsoperation beteiligten Operanden eine Zeichenkette sind?

JavaScript weist dem Ergebnis den Wert NaN (Not a Number) zu und zeigt damit an, dass die Operation ungültig ist.
Wie entfernen Sie das Element Eggs aus dem Array cart, das mit let cart = ['Milk', 'Bread', 'Eggs'] deklariert wurde?

Arrays in Javascript haben die Methode pop(), die das letzte Element in der Liste entfernt: cart.pop().