Variablen und Typen

Kurz gesagt: Eine Variable ist ein Name, unter dem ein Programm einen Wert speichert; der Typ kommt vom Wert: number für Zahlen, string für Text, boolean für ja oder nein.

Problem

Der Preis steht an drei Stellen

In einem Onlineshop taucht ein Preis an mehreren Stellen auf: im Katalog, im Warenkorb und an der Kasse. Steht er überall als Zahl da, passiert Folgendes:

console.log("Kopfhörer: 49.90 €");
console.log("Im Warenkorb: Kopfhörer, 49.90 €");
console.log("Zu zahlen: 49.90 €");

Morgen sind die Kopfhörer im Angebot. Du musst jedes 49.90 finden und ändern. Vergisst du eins, sieht der Kunde zwei verschiedene Preise.

Die Idee

Eine Variable: ein Name für einen Wert

Schreib den Preis einmal hin und gib ihm einen Namen. Danach schreibst du überall den Namen.

const price = 49.90;
console.log("Kopfhörer: " + price + " €");
console.log("Im Warenkorb: Kopfhörer, " + price + " €");
console.log("Zu zahlen: " + price + " €");

Kopfhörer: 49.9 €
Im Warenkorb: Kopfhörer, 49.9 €
Zu zahlen: 49.9 €

const price = 49.90; erzeugt eine Variable: einen Namen (price), unter dem das Programm einen Wert (49.90) speichert. Wo im Code price steht, holt das Programm den Wert von dort. const bedeutet, dass sich der Wert nicht ändert. Für einen Wert, der sich ändert, gibt es let: Das siehst du gleich. Den Typ schreibst du nicht: JavaScript erkennt ihn am Wert.

+ zwischen Text und einem Wert verbindet beide zu einem Text. Deshalb stehen die Leerzeichen innerhalb der Anführungszeichen.

Die Null am Ende ist verschwunden: Aus 49.90 wurde 49.9. Für die Zahl ist das dasselbe. Wie du den Preis mit zwei Nachkommastellen zeigst, siehst du in der Lektion über Eingabe und Ausgabe.

Genauer, für Neugierige

Ein Name beginnt mit einem Buchstaben und hat keine Leerzeichen. Schreib ihn klein und beginne jedes weitere Wort mit einem Großbuchstaben: price, pricePerNight. Groß- und Kleinbuchstaben zählen: price und Price sind zwei verschiedene Namen.

Die Sprache erlaubt auch Namen mit Umlauten (größe), aber tu es nicht. Code auf der ganzen Welt hat lateinische Namen ohne Sonderzeichen, und so schreiben auch deine Kollegen.

Ein Name, der nicht mit const oder let erzeugt wurde, stoppt das Programm mit ReferenceError: price is not defined. let total; ohne Wert ist erlaubt: Dann steht in total undefined, „kein Wert“.

Die Idee

Arten von Werten

Der Typ sagt, was die Variable speichern kann. Das sind die wichtigsten:

const name = "Rucksack";
const price = 39.90;
const stock = 12;
const onSale = true;
const size = "M";
console.log(name + ", Größe " + size);
console.log("Preis: " + price + " €");
console.log("Auf Lager: " + stock + " Stück");
console.log("Im Angebot: " + onSale);

Rucksack, Größe M
Preis: 39.9 €
Auf Lager: 12 Stück
Im Angebot: true

number: jede Zahl, ganz oder mit Komma: eine Anzahl, ein Preis, ein Gewicht. Im Code ist das Dezimaltrennzeichen ein Punkt: 39.90. JavaScript hat keinen eigenen Typ für ganze Zahlen.
boolean: ja oder nein, true oder false.
string: Text, in Anführungszeichen: "Rucksack". Das ist ein String (eine Zeichenkette), eine Folge von Zeichen. Einen eigenen Typ für ein einzelnes Zeichen gibt es nicht: "M" ist ein Text der Länge 1.

typeof sagt dir den Typ eines Werts. Wenn du diese Zeilen ans selbe Programm anhängst:

console.log(typeof name);
console.log(typeof price);
console.log(typeof stock);
console.log(typeof onSale);
console.log(typeof size);

string
number
number
boolean
string

Genauer, für Neugierige

number ist eine Kommazahl in 8 Byte, wie double in Java und C#. Ganze Zahlen sind darin exakt bis Number.MAX_SAFE_INTEGER, 9 007 199 254 740 991. Danach lässt sich nicht mehr jede ganze Zahl speichern, und aus 9007199254740993 wird ...992. Für größere ganze Zahlen gibt es einen eigenen Typ, BigInt: eine Zahl mit n am Ende. Unterstriche zwischen den Ziffern machen sie nur besser lesbar:

const population = 8_100_000_000;
const weight = 1.5;
console.log(population + " " + weight);
console.log(Number.MAX_SAFE_INTEGER);
console.log(9007199254740993);
console.log(9007199254740993n);

8100000000 1.5
9007199254740991
9007199254740992
9007199254740993n

number speichert Zahlen im Binärsystem, und manche Kommazahlen wie 0.1 lassen sich nicht exakt darstellen: 0.1 + 0.2 ist 0.30000000000000004. Deshalb speichern echte Programme Geld in ganzen Cent. Im Kurs schreiben wir Preise der Kürze halber als number.

Probier es aus

Finde den Fehler

Das Programm soll einen Einkauf ausgeben. Es startet nicht: Node.js meldet SyntaxError. In welcher Zeile ist der Fehler?

Wähle die Zeile mit dem Fehler.

Im Code ist das Dezimaltrennzeichen ein Punkt. Nach dem Komma erwartet JavaScript den Namen einer neuen Variable, findet aber die Zahl 40: SyntaxError: Unexpected number, und das Programm startet nicht. Der Preis ist const price = 2.40;.

Die Idee

= speichert eine Kopie

Das Zeichen = ist nicht „gleich“ wie in der Mathematik. Es bedeutet: Nimm den Wert rechts und speichere ihn in die Variable links. Das heißt Zuweisung. Der alte Wert der Variable ist weg.

Steht rechts eine andere Variable, wird eine Kopie ihres Werts in diesem Moment gespeichert. Die beiden Variablen bleiben nicht verbunden:

let seats = 40;
const seatsAtStart = seats;
seats = 37;
console.log("Am Anfang: " + seatsAtStart);
console.log("Jetzt: " + seats);

Am Anfang: 40
Jetzt: 37

seatsAtStart bekommt 40. Danach wird seats zu 37, aber die Kopie in seatsAtStart bleibt 40.

seats verwendet let, weil sich ihr Wert ändert. seatsAtStart verwendet const: Sie merkt sich nur den Anfang.

Probier es aus

Welcher Wert bleibt?

Was gibt das Programm aus?

let roomA = 12;
let roomB = 20;
roomA = roomB;
roomB = 25;
console.log(roomA + " und " + roomB);

Antwort

12 und 25

20 und 25

25 und 25

Problem

Die Maße sind vertauscht

Ein Programm für Fotoabzüge bekommt die Maße vertauscht: Breite 120 und Höhe 80, dabei sollten sie 80 x 120 sein. Es sieht so aus, als müsstest du nur das eine ins andere speichern und zurück:

let width = 120;
let height = 80;
width = height;
height = width;
console.log(width + " x " + height);

80 x 80

Herausgekommen ist 80 x 80. Wo ist die 120 geblieben?

Sieh es dir an

Tauschen mit einer Hilfsvariable

let width = 120;
let height = 80;
const temp = width;
width = height;
height = temp;
console.log(width + " x " + height);  // 80 x 120

Schritt für Schritt, in Worten

Breite und Höhe wurden vertauscht eingegeben: 120 und 80.
temp = width: Eine Kopie von 120 kommt in temp. In width bleibt 120.
width = height: Eine Kopie von 80 kommt in width. Die alte 120 ist dort weg, aber in temp gesichert.
height = temp: 120 kommt aus temp zurück in height.
Getauscht: 80 x 120.

In der naiven Version speichert width = height die 80 in width, und die alte 120 ist weg. Wenn danach height = width kommt, steht in width schon 80, und die wird zurückkopiert.

Die Lösung ist eine dritte Variable, eine Hilfsvariable temp. Sie hebt die 120 auf, bevor width überschrieben wird. Danach kommt die 120 aus temp in height, und die Maße sind 80 x 120.

Genauer, für Neugierige

In JavaScript kannst du den Tausch auch in einer Zeile schreiben. Rechts werden beide Werte in einem Array gesammelt und erst danach links gespeichert:

let width = 120;
let height = 80;
[width, height] = [height, width];
console.log(width + " x " + height);

80 x 120

Das wirst du in fremdem Code sehen. Hier schreiben wir es mit temp, damit du Schritt für Schritt siehst, was passiert.

Probier es aus

Bring den Tausch in die richtige Reihenfolge

Im Shop tauschen zwei Kollegen ihre Schichten. morning ist „Ivan“, und evening ist „Maria“. Bring die Zeilen in die richtige Reihenfolge, damit die beiden tauschen.

console.log("Morgens: " + morning + ", abends: " + evening);
morning = evening;
evening = temp;
const temp = morning;

Die Idee

Der Typ gehört zum Wert

In JavaScript schreibst du den Typ der Variable nicht. Er gehört zum Wert: 3 ist eine number, "drei" ist ein string. Deshalb kann eine Variable mit let später einen Wert von einem anderen Typ bekommen:

let nights = 3;
console.log(typeof nights);
nights = "drei";
console.log(typeof nights);

number
string

JavaScript beschwert sich nicht. Das heißt dynamische Typisierung: Der Typ steht erst fest, während das Programm läuft. Das ist praktisch, führt aber auch schnell zu Fehlern. Speichere in einer Variable nur eine Art von Wert.

const schützt vor etwas anderem: Der Wert lässt sich gar nicht ändern, weder auf einen anderen Typ noch auf denselben:

const nights = 3;
nights = 4;

TypeError: Assignment to constant variable.

Schreib also const, und let nur, wenn sich der Wert wirklich ändert.

Genauer, für Neugierige

In altem Code siehst du var statt let. Es funktioniert etwas anders, und in neuem Code wird es nicht verwendet.

Übung

Deine Variablen

Löse die Aufgaben in deinem Editor. Die Werte stehen im Code, ohne Eingabe über die Tastatur. Das Einlesen kommt in der nächsten Lektion.

1. Tausch. Im oberen Regal stehen 15 Bücher, im unteren 27. Speichere sie in zwei Variablen, tausche ihre Werte und gib sie vorher und nachher aus.

Vorher: oben 15, unten 27
Nachher: oben 27, unten 15

2. Alter. Speichere einen Namen und ein Alter in zwei Variablen und gib sie in einem Satz aus.

Maria ist 19 Jahre alt.

3. Eine Hotelkarte. Speichere in Variablen den Namen des Hotels (Text), die Sterne (eine ganze Zahl), die Bewertung (eine Kommazahl), ob es Frühstück gibt (ja oder nein) und die Kategorie (ein Zeichen). Gib sie aus.

Hotel „Seestern“
Sterne: 4
Bewertung: 8.7
Frühstück: true
Kategorie: B

Weitere Aufgaben

Drei im Kreis. Drei Kassen haben zu Tagesbeginn 120, 85 und 240 €. Verschiebe die Beträge im Kreis: Der erste kommt in die zweite Kasse, der zweite in die dritte, der dritte in die erste. Verwende eine Hilfsvariable. Gib 240 120 85 aus.

Die Typen. Gib mit typeof den Typ jedes Werts aus Aufgabe 3 aus.
Ein Fehler mit Absicht. Ändere den Wert einer const später im Programm und lies, was Node.js sagt. Schreib danach die Bewertung mit Komma, const rating = 8,7;.

Erstellt von Ivo Gergov im Rahmen der Kampagne von Evo Tech für zugängliche Programmierausbildung ·

Variablen und Typen

Cookies