Variablen, Werte und Operatoren

Hier lernst du, Informationen in Variablen zu speichern und mit verschiedenen Datentypen zu arbeiten. Zahlen, Texte, Wahrheitswerte und einfache Berechnungen bilden die Grundlage fast aller Programme. Außerdem erfährst du, wie Vergleichs- und Rechenoperatoren eingesetzt werden.

Variablen mit `let` und `const`

Wozu dienen Variablen?

Variablen sind benannte Speicherplätze für Werte. Stell dir eine Variable wie eine beschriftete Box vor: Du legst einen Wert hinein und kannst ihn später über ihren Namen wieder verwenden.

let name = "Mira";
let alter = 16;

console.log(name);
console.log(alter);

Die Konsole zeigt:

Mira
16

Statt denselben Wert immer wieder direkt in den Code zu schreiben, gibst du ihm also einen aussagekräftigen Namen.

console.log("Mira");
console.log("Mira");
console.log("Mira");

Praktischer ist:

const name = "Mira";

console.log(name);
console.log(name);
console.log(name);

Wenn sich der Name ändern soll, musst du ihn dann nur an einer Stelle anpassen.

Eine Variable mit let erstellen

Mit let erstellst du eine Variable, deren Wert sich später ändern darf.

let punkte = 0;

console.log(punkte);

Zunächst enthält punkte den Wert 0. Später kannst du einen neuen Wert zuweisen:

let punkte = 0;

punkte = 10;

console.log(punkte);

Die Ausgabe lautet:

10

Wichtig: Beim ersten Erstellen steht let vor dem Variablennamen. Wenn du den Wert später nur änderst, schreibst du kein let mehr.

let punkte = 0;

// richtig
punkte = 10;

Dieser Code wäre falsch:

let punkte = 0;

let punkte = 10;

JavaScript meldet hier einen Fehler, weil die Variable punkte im gleichen Bereich bereits erstellt wurde.

Wert schrittweise verändern

Eine Variable kann auch mit ihrem bisherigen Wert weitergerechnet werden.

let punkte = 5;

punkte = punkte + 3;

console.log(punkte);

Die Variable enthält danach den Wert 8.

Das kommt häufig vor, etwa bei Punkteständen, Warenkörben oder Zählern.

let besucher = 0;

besucher = besucher + 1;
besucher = besucher + 1;

console.log(besucher);

Ausgabe:

2

Eine Konstante mit const erstellen

Mit const erstellst du eine Konstante. Ihr Wert darf nach dem Erstellen nicht durch einen neuen Wert ersetzt werden.

const geburtsjahr = 2008;

console.log(geburtsjahr);

Dieser Code funktioniert nicht:

const geburtsjahr = 2008;

geburtsjahr = 2009;

Der Browser meldet einen Fehler, weil eine mit const erstellte Variable nicht neu zugewiesen werden darf.

Verwende const, wenn ein Wert in deinem Programm gleich bleiben soll:

const seitentitel = "Mein Profil";
const maximaleTeilnehmerzahl = 20;
const istEingeloggt = true;

Ein besonders häufiger Fall sind Texte, die sich nicht ändern sollen:

const begruessung = "Willkommen auf meiner Webseite!";

console.log(begruessung);

let oder const?

Die wichtigste Frage lautet:

Soll dieser Wert später ersetzt werden?

const spielName = "Zahlenraten";
let punktestand = 0;

punktestand = 1;

console.log(spielName);
console.log(punktestand);

In diesem Beispiel bleibt der Spielname immer gleich. Der Punktestand kann sich dagegen während des Spiels ändern.

Eine gute Gewohnheit ist:

Verwende zuerst const. Wechsle nur zu let, wenn du den Wert später wirklich verändern musst.

Dadurch wird dein Code leichter verständlich. Andere Personen sehen sofort, welche Werte feststehen und welche sich im Ablauf ändern können.

Variablen ohne Anfangswert

Du kannst eine Variable mit let auch zunächst ohne Wert erstellen:

let lieblingsfarbe;

console.log(lieblingsfarbe);

Die Ausgabe ist:

undefined

undefined bedeutet: Es wurde noch kein Wert gespeichert.

Später kannst du einen Wert zuweisen:

let lieblingsfarbe;

lieblingsfarbe = "Blau";

console.log(lieblingsfarbe);

Bei const ist das nicht erlaubt. Eine Konstante braucht sofort einen Wert.

// falsch
const lieblingsfarbe;

Richtig wäre:

const lieblingsfarbe = "Blau";

Gute Namen für Variablen

Der Name einer Variable sollte erklären, welchen Wert sie enthält.

Weniger verständlich:

let x = 18;
let a = "Lea";

Besser:

let alter = 18;
const vorname = "Lea";

Bei längeren Namen wird in JavaScript üblicherweise die camelCase-Schreibweise verwendet: Das erste Wort beginnt klein, jedes weitere Wort beginnt mit einem Großbuchstaben.

let anzahlDerBesucher = 42;
const aktuellerBenutzername = "LeaM";
let istMenueGeoeffnet = false;

Diese Schreibweise erinnert mit den „Höckern“ an einen Kamelrücken – daher der Name camelCase.

Regeln für Variablennamen

Ein Variablenname darf:

let spieler1 = "Noah";
let _intern = "Test";
let $preis = 9;

Für gut lesbaren Code solltest du $ und _ jedoch nur verwenden, wenn es einen klaren Grund gibt.

Ein Variablenname darf nicht mit einer Zahl beginnen:

// falsch
let 1spieler = "Noah";

Außerdem sind bestimmte Wörter bereits von JavaScript reserviert. Diese darfst du nicht als Variablennamen verwenden:

// falsch
let const = 5;
let if = true;

Groß- und Kleinschreibung beachten

JavaScript unterscheidet zwischen Groß- und Kleinschreibung. name, Name und NAME sind drei unterschiedliche Bezeichnungen.

const name = "Mira";
const Name = "Jonas";

console.log(name);
console.log(Name);

Die Ausgabe lautet:

Mira
Jonas

Achte deshalb genau darauf, einen Variablennamen überall gleich zu schreiben.

const lieblingsEssen = "Pizza";

console.log(lieblingsessen);

Dieser Code erzeugt einen Fehler: lieblingsessen ist nicht dasselbe wie lieblingsEssen.

Ein vollständiges Beispiel

Im folgenden Beispiel werden feste Angaben mit const gespeichert. Der Punktestand darf sich ändern und wird deshalb mit let erstellt.

const spielername = "Aylin";
const zielPunkte = 10;

let punktestand = 0;

punktestand = punktestand + 4;

console.log("Spielerin: " + spielername);
console.log("Punktestand: " + punktestand);
console.log("Ziel: " + zielPunkte);

Die Konsole zeigt:

Spielerin: Aylin
Punktestand: 4
Ziel: 10

Der Teil mit + verbindet hier Texte und Werte zu einer gemeinsamen Ausgabe. Wie du mit Texten und Zahlen noch genauer arbeitest, lernst du in den nächsten Abschnitten.

Typische Fehler

const neu zuweisen

const anzahl = 3;
anzahl = 4;

Problem: Eine Konstante darf nicht neu zugewiesen werden.

Lösung: Wenn sich der Wert ändern soll, verwende let.

let anzahl = 3;
anzahl = 4;

Variable versehentlich erneut erstellen

let nachricht = "Hallo";
let nachricht = "Guten Morgen";

Problem: nachricht wurde im gleichen Bereich bereits erstellt.

Lösung: Beim Ändern nur den Namen schreiben.

let nachricht = "Hallo";
nachricht = "Guten Morgen";

Namen unterschiedlich schreiben

const benutzerName = "Sam";
console.log(benutzername);

Problem: benutzerName und benutzername sind unterschiedliche Namen.

Lösung: Schreibe den Namen exakt gleich.

const benutzerName = "Sam";
console.log(benutzerName);

Merke dir

Übung: Mein Profil

Erstelle Variablen für ein kleines Profil:

  1. Speichere einen Namen, ein Alter und eine Lieblingsfarbe.
  2. Entscheide für jeden Wert, ob let oder const besser passt.
  3. Gib alle Werte mit console.log() aus.
  4. Ändere anschließend das Alter um eins.

Eine mögliche Lösung:

const name = "Emil";
let alter = 14;
const lieblingsfarbe = "Grün";

console.log(name);
console.log(alter);
console.log(lieblingsfarbe);

alter = alter + 1;

console.log(alter);

Zusatzaufgabe: Erstelle einen Punktestand mit dem Anfangswert 0. Erhöhe ihn dreimal und gib nach jeder Änderung den neuen Wert in der Konsole aus.

Zahlen, Strings und Booleans

Drei wichtige Datentypen

Variablen speichern Werte. In JavaScript kann ein Wert unterschiedliche Arten haben. Drei besonders wichtige Datentypen sind:

let alter = 18;
let name = "Mira";
let istAngemeldet = true;

JavaScript erkennt automatisch, welche Art von Wert in einer Variablen gespeichert ist. Du musst den Datentyp normalerweise nicht vorher festlegen.

Zahlen

Zahlen werden in JavaScript ohne Anführungszeichen geschrieben.

let punkte = 42;
let temperatur = -3;
let preis = 19.99;

Mit Zahlen kannst du rechnen:

let a = 10;
let b = 5;

let summe = a + b;
console.log(summe); // 15

Auch negative Zahlen und Dezimalzahlen sind möglich:

let kontostand = -25;
let breite = 12.5;

console.log(kontostand);
console.log(breite);

Wichtig: JavaScript verwendet für Dezimalzahlen einen Punkt, kein Komma.

let richtig = 3.14;
let falsch = 3,14;

Die zweite Zeile speichert nicht die Dezimalzahl 3.14. Verwende deshalb immer einen Punkt.

Zahlen prüfen

Mit typeof kannst du herausfinden, welchen Datentyp ein Wert hat:

let anzahl = 7;

console.log(typeof anzahl); // "number"

Der Datentyp für Zahlen heißt in JavaScript immer number — sowohl für ganze Zahlen als auch für Dezimalzahlen.

Strings: Texte speichern

Ein String ist eine Zeichenkette, also Text. Strings stehen in Anführungszeichen.

let vorname = "Lea";
let stadt = "Hamburg";
let begruessung = "Guten Morgen!";

Du kannst für Strings doppelte oder einfache Anführungszeichen verwenden:

let text1 = "Hallo";
let text2 = 'Willkommen';

console.log(text1);
console.log(text2);

Beide Varianten funktionieren. Wichtig ist nur: Ein String muss mit derselben Art von Anführungszeichen beginnen und enden.

let korrekt = "Das ist ein Text.";
let auchKorrekt = 'Das ist ebenfalls ein Text.';

Anführungszeichen im Text

Möchtest du Anführungszeichen innerhalb eines Textes verwenden, kannst du außen eine andere Variante wählen:

let zitat = 'Mira sagt: "JavaScript macht Spaß."';

console.log(zitat);

Oder umgekehrt:

let frage = "Hast du heute schon 'Hallo' gesagt?";

console.log(frage);

Strings verbinden

Mit dem Pluszeichen + lassen sich Strings zusammenfügen. Das nennt man Verkettung.

let vorname = "Noah";
let nachname = "Schmidt";

let vollerName = vorname + " " + nachname;

console.log(vollerName); // Noah Schmidt

Das Leerzeichen zwischen den Namen musst du selbst als String " " ergänzen.

Auch feste Texte und Variablen können verbunden werden:

let name = "Aylin";
let begruessung = "Hallo, " + name + "!";

console.log(begruessung); // Hallo, Aylin!

Moderne Schreibweise mit Template Strings

Template Strings sind besonders praktisch, wenn du Variablen in einen Text einsetzen möchtest. Sie verwenden umgekehrte Anführungszeichen, sogenannte Backticks:

let name = "Aylin";
let alter = 16;

let text = `Hallo, ich heiße ${name} und bin ${alter} Jahre alt.`;

console.log(text);

Innerhalb von ${...} kannst du Variablen und sogar einfache Berechnungen einsetzen:

let punkte = 8;

console.log(`Du hast ${punkte + 2} Punkte erreicht.`);

Für Anfänger reicht zunächst das Verbinden mit +. Template Strings wirst du aber in modernem JavaScript sehr häufig sehen.

String oder Zahl?

Die Anführungszeichen machen einen entscheidenden Unterschied:

let zahl = 12;
let text = "12";

console.log(typeof zahl); // "number"
console.log(typeof text); // "string"

zahl ist eine echte Zahl. Mit ihr kannst du rechnen. text besteht nur aus den Zeichen 1 und 2.

let ergebnis1 = 12 + 3;
let ergebnis2 = "12" + "3";

console.log(ergebnis1); // 15
console.log(ergebnis2); // 123

JavaScript verbindet zwei Strings, statt sie zu addieren.

Booleans: wahr oder falsch

Ein Boolean kann nur zwei Werte haben:

Booleans werden ohne Anführungszeichen geschrieben.

let istOnline = true;
let istFertig = false;

Diese Werte sind besonders wichtig, wenn ein Programm Entscheidungen treffen soll.

let hatTicket = true;

console.log(hatTicket); // true

Später kannst du mit if prüfen, ob ein Boolean wahr oder falsch ist:

let istAngemeldet = true;

if (istAngemeldet) {
  console.log("Willkommen!");
}

Die genaue Schreibweise von if lernst du im nächsten Kapitel. Entscheidend ist hier: Die Variable istAngemeldet speichert eine einfache Ja-oder-Nein-Information.

true und "true" sind nicht dasselbe

Wie bei Zahlen gilt auch hier: Anführungszeichen verändern den Datentyp.

let richtig = true;
let falsch = "true";

console.log(typeof richtig); // "boolean"
console.log(typeof falsch); // "string"

true ist ein Boolean. "true" ist ein String, also Text.

Merke: Die JavaScript-Schreibweise ist immer klein: true und false.
True oder False funktionieren nicht.

Datentypen mit typeof untersuchen

Der Operator typeof zeigt dir den Datentyp eines Werts oder einer Variablen an.

let punkte = 100;
let nachricht = "Geschafft!";
let spielLaeuft = true;

console.log(typeof punkte);       // "number"
console.log(typeof nachricht);    // "string"
console.log(typeof spielLaeuft);  // "boolean"

Du kannst typeof auch direkt mit einem Wert verwenden:

console.log(typeof 25);        // "number"
console.log(typeof "Hallo");   // "string"
console.log(typeof false);     // "boolean"

Das ist hilfreich, wenn du unsicher bist, warum eine Rechnung oder ein Vergleich nicht wie erwartet funktioniert.

Werte sinnvoll benennen

Der Name einer Variablen sollte erkennen lassen, welche Information sie enthält:

let produktName = "Trinkflasche";
let lagerBestand = 24;
let istAusverkauft = false;

Diese Namen sind verständlicher als:

let a = "Trinkflasche";
let b = 24;
let c = false;

Bei Booleans helfen Namen, die wie eine Frage gelesen werden können:

let istSichtbar = true;
let hatGewonnen = false;
let kannSpeichern = true;

So ist sofort klar, dass die Variable einen Wahrheitswert enthält.

Typischer Fehler: Zahl als Text

Daten aus Eingabefeldern oder von einer Webseite liegen häufig als String vor. Dann kann eine Rechnung überraschend aussehen:

let alter = "16";
let naechstesJahr = alter + 1;

console.log(naechstesJahr); // 161

JavaScript verbindet hier Text: "16" und 1 werden zu "161".

Wenn du wirklich rechnen möchtest, wandelst du den String mit Number() in eine Zahl um:

let alter = "16";
let naechstesJahr = Number(alter) + 1;

console.log(naechstesJahr); // 17

Number() brauchst du noch nicht in jedem Detail zu beherrschen. Merke dir aber: Steht eine Zahl in Anführungszeichen, ist sie zunächst Text.

Zusammenfassung

Datentyp Beispiel Bedeutung
number 42, 3.14, -5 Zahlen für Berechnungen
string "Hallo" Texte und Zeichen
boolean true, false Wahrheitswerte
typeof typeof name Prüft den Datentyp

Die Anführungszeichen sind besonders wichtig:

let echteZahl = 5;
let textMitZahl = "5";

let wahrheitswert = true;
let textMitTrue = "true";

echteZahl und wahrheitswert haben andere Datentypen als textMitZahl und textMitTrue.

Übung: Ein kleines Profil

Lege Variablen für ein Profil an:

  1. einen Namen als String,
  2. ein Alter als Zahl,
  3. eine Information, ob die Person JavaScript lernt, als Boolean,
  4. eine Begrüßung, die alle Informationen ausgibt.

Eine mögliche Lösung:

let name = "Samira";
let alter = 21;
let lerntJavaScript = true;

console.log(`Hallo, ich bin ${name}.`);
console.log(`Ich bin ${alter} Jahre alt.`);
console.log(`Lerne ich JavaScript? ${lerntJavaScript}`);

Prüfe anschließend die Datentypen in der Konsole:

console.log(typeof name);
console.log(typeof alter);
console.log(typeof lerntJavaScript);

Ändere zum Testen einmal alter zu "21" und beobachte, wie sich die Ausgabe von typeof alter verändert.

Rechenoperatoren

Rechenoperatoren ermöglichen es dir, mit Zahlen zu rechnen. Du kannst Werte addieren, abziehen, multiplizieren, dividieren und sogar prüfen, was bei einer Division übrig bleibt.

Die wichtigsten Rechenoperatoren

Operator Bedeutung Beispiel Ergebnis
+ Addition 4 + 3 7
- Subtraktion 9 - 2 7
* Multiplikation 5 * 3 15
/ Division 12 / 4 3
% Rest einer Division 10 % 3 1
** Potenz 2 ** 3 8

Du kannst Berechnungen direkt in der Konsole ausprobieren:

console.log(8 + 2);
console.log(10 - 4);
console.log(6 * 5);
console.log(20 / 4);

Die Konsole gibt aus:

10
6
30
5

Mit Variablen rechnen

Besonders nützlich werden Operatoren, wenn du Werte in Variablen speicherst.

let preis = 12;
let anzahl = 3;

let gesamtpreis = preis * anzahl;

console.log(gesamtpreis);

Die Ausgabe lautet:

36

JavaScript nimmt den Wert aus preis, multipliziert ihn mit dem Wert aus anzahl und speichert das Ergebnis in gesamtpreis.

Ein weiteres Beispiel:

const aktuellesJahr = 2025;
const geburtsjahr = 2008;

const alter = aktuellesJahr - geburtsjahr;

console.log(alter);

Division und Dezimalzahlen

Mit / teilst du eine Zahl durch eine andere.

const strecke = 150;
const stunden = 3;

const geschwindigkeit = strecke / stunden;

console.log(geschwindigkeit);

Ergebnis:

50

Eine Division kann auch eine Dezimalzahl ergeben:

console.log(7 / 2);

Ausgabe:

3.5

In JavaScript werden Dezimalzahlen immer mit einem Punkt geschrieben, nicht mit einem Komma:

const temperatur = 21.5;

Nicht so:

const temperatur = 21,5;

Das Komma hat in JavaScript eine andere Bedeutung und führt hier nicht zum gewünschten Ergebnis.

Achtung: Eine Division durch 0 erzeugt in JavaScript normalerweise keinen klassischen Fehler. Das Ergebnis ist Infinity.

console.log(10 / 0);

Der Restoperator %

Der Operator % wird Restoperator oder Modulo-Operator genannt. Er liefert den Rest einer Division zurück.

console.log(10 % 3);

Die 3 passt dreimal in die 10:

3 * 3 = 9

Es bleibt 1 übrig. Deshalb lautet die Ausgabe:

1

Weitere Beispiele:

console.log(8 % 2);
console.log(9 % 2);
console.log(15 % 4);

Ergebnisse:

0
1
3

Der Restoperator ist später sehr praktisch, um gerade und ungerade Zahlen zu erkennen:

const zahl = 14;

console.log(zahl % 2);

Ist das Ergebnis 0, ist die Zahl ohne Rest durch 2 teilbar — also gerade.

Potenzen berechnen

Mit ** berechnest du Potenzen.

console.log(2 ** 3);

Das bedeutet:

$$
2^3 = 2 \cdot 2 \cdot 2 = 8
$$

Weitere Beispiele:

console.log(5 ** 2);
console.log(10 ** 3);

Ausgabe:

25
1000

Die Reihenfolge der Berechnung

JavaScript beachtet bei Berechnungen eine feste Reihenfolge:

  1. Klammern
  2. Potenzen
  3. Multiplikation, Division und Restoperator
  4. Addition und Subtraktion

Betrachte dieses Beispiel:

console.log(2 + 3 * 4);

Das Ergebnis ist:

14

Zuerst wird 3 * 4 berechnet, danach wird 2 addiert.

$$
2 + 3 \cdot 4 = 2 + 12 = 14
$$

Mit Klammern kannst du die Reihenfolge bewusst ändern:

console.log((2 + 3) * 4);

Jetzt lautet das Ergebnis:

20

$$
[2 + 3] \cdot 4 = 5 \cdot 4 = 20
$$

Tipp: Verwende Klammern, wenn eine Rechnung auf den ersten Blick verständlich sein soll. Das macht deinen Code leichter lesbar.

Einen Wert verändern

Oft möchtest du den aktuellen Wert einer Variable verändern. Das geht ausführlich so:

let punkte = 10;

punkte = punkte + 5;

console.log(punkte);

Die Variable punkte enthält danach den Wert 15.

Dafür gibt es auch Kurzschreibweisen:

let punkte = 10;

punkte += 5;
console.log(punkte);

punkte -= 2;
console.log(punkte);

punkte *= 3;
console.log(punkte);

punkte /= 2;
console.log(punkte);

Die einzelnen Anweisungen bedeuten:

Kurzform Entspricht
punkte += 5 punkte = punkte + 5
punkte -= 2 punkte = punkte - 2
punkte *= 3 punkte = punkte * 3
punkte /= 2 punkte = punkte / 2

Für solche Veränderungen brauchst du let, denn der Wert wird neu gesetzt. Mit const ist das nicht erlaubt:

const leben = 3;

// Fehler:
leben = leben - 1;

Zahlen und Text nicht verwechseln

Der Operator + kann Zahlen addieren, aber auch Texte verbinden. Das kann anfangs verwirrend sein.

console.log(4 + 5);

Ergebnis:

9

Wenn mindestens ein Wert ein String ist, verbindet JavaScript die Werte als Text:

console.log("4" + 5);

Ergebnis:

45

Auch dieses Beispiel erzeugt Text:

const name = "Mila";
const begruessung = "Hallo, " + name + "!";

console.log(begruessung);

Ausgabe:

Hallo, Mila!

Bei den anderen Rechenoperatoren versucht JavaScript oft, Text in Zahlen umzuwandeln:

console.log("10" - 2);
console.log("10" * 3);

Ausgabe:

8
30

Verlasse dich als Anfänger aber nicht darauf. Speichere Zahlen am besten immer als Zahlen — also ohne Anführungszeichen:

const richtigeZahl = 10;

Statt:

const textStattZahl = "10";

Praxisbeispiel: Kosten einer Bestellung

In diesem Beispiel berechnest du den Preis für mehrere Artikel und addierst Versandkosten.

const preisProArtikel = 8.5;
const anzahlArtikel = 4;
const versandkosten = 3.99;

const artikelkosten = preisProArtikel * anzahlArtikel;
const gesamtbetrag = artikelkosten + versandkosten;

console.log("Artikelkosten: " + artikelkosten);
console.log("Gesamtbetrag: " + gesamtbetrag);

Die Ausgabe ist:

Artikelkosten: 34
Gesamtbetrag: 37.99

Der Rechenweg lautet:

$$
4 \cdot 8{,}5 = 34
$$

$$
34 + 3{,}99 = 37{,}99
$$

Häufige Fehler

* statt x verwenden

Für eine Multiplikation verwendest du in JavaScript ein Sternchen:

const ergebnis = 4 * 7;

Das Zeichen x funktioniert nicht als Rechenoperator:

// Falsch:
const ergebnis = 4 x 7;

Variablenname richtig schreiben

JavaScript unterscheidet genau zwischen verschiedenen Schreibweisen:

const preis = 10;
const gesamt = preis * 2;

Das wäre ein Fehler:

const preis = 10;
const gesamt = Preis * 2;

preis und Preis sind für JavaScript unterschiedliche Namen.

Ergebnis nicht speichern

Diese Rechnung funktioniert, aber ihr Ergebnis wird nur in der Konsole ausgegeben:

console.log(6 * 7);

Wenn du das Ergebnis später weiterverwenden möchtest, speichere es in einer Variable:

const ergebnis = 6 * 7;

console.log(ergebnis);

Übung

  1. Erstelle zwei Variablen breite und hoehe. Berechne die Fläche eines Rechtecks und gib sie aus.
  2. Eine Pizza kostet 9.5. Berechne den Preis für 3 Pizzen.
  3. Setze punkte auf 20. Ziehe anschließend 7 Punkte ab und gib den neuen Wert aus.
  4. Prüfe mit %, welchen Rest die Division von 25 durch 4 hat.
  5. Berechne zuerst 5 + 3 * 2 und danach (5 + 3) * 2. Vergleiche die Ergebnisse.

Mögliche Lösungen

const breite = 8;
const hoehe = 5;

const flaeche = breite * hoehe;

console.log(flaeche);

const pizzaPreis = 9.5;
const anzahlPizzen = 3;

const gesamtpreis = pizzaPreis * anzahlPizzen;

console.log(gesamtpreis);

let punkte = 20;

punkte -= 7;

console.log(punkte);

console.log(25 % 4);

console.log(5 + 3 * 2);
console.log((5 + 3) * 2);

Merke: Rechenoperatoren arbeiten mit Zahlen und erzeugen neue Werte. Speichere wichtige Ergebnisse in Variablen, nutze Klammern für klare Berechnungen und achte darauf, Zahlen nicht versehentlich als Text zu speichern.

Vergleiche und logische Operatoren

Vergleiche: Werte gegenüberstellen

Mit Vergleichsoperatoren prüfst du, wie zwei Werte zueinander stehen. Das Ergebnis eines Vergleichs ist immer ein Boolean:

console.log(5 > 3);    // true
console.log(5 < 3);    // false
console.log(5 === 5);  // true

Vergleiche sind wichtig, weil ein Programm damit später Entscheidungen treffen kann, etwa: „Ist die Person alt genug?“ oder „Ist ein Eingabefeld leer?“

Die wichtigsten Vergleichsoperatoren

Operator Bedeutung Beispiel Ergebnis
=== gleich 5 === 5 true
!== nicht gleich 5 !== 3 true
> größer als 10 > 7 true
< kleiner als 4 < 2 false
>= größer oder gleich 18 >= 18 true
<= kleiner oder gleich 12 <= 10 false

Schreibe die Ergebnisse testweise in die Konsole:

const alter = 16;

console.log(alter >= 18); // false
console.log(alter < 18);  // true
console.log(alter === 16); // true

Merke: Ein einzelnes Gleichheitszeichen = weist einer Variablen einen Wert zu. Drei Gleichheitszeichen === vergleichen zwei Werte.

const punkte = 10; // Wert zuweisen

console.log(punkte === 10); // Werte vergleichen

Strenger Vergleich mit ===

In JavaScript gibt es zwei Arten, Gleichheit zu vergleichen:

console.log(5 == "5");  // true
console.log(5 === "5"); // false

Der Unterschied:

Im ersten Beispiel wird der String "5" automatisch in die Zahl 5 umgewandelt. Beim strengen Vergleich mit === passiert das nicht.

const alterAlsZahl = 18;
const alterAlsText = "18";

console.log(alterAlsZahl === alterAlsText); // false

Für Anfänger und in modernem JavaScript gilt eine klare Empfehlung:

Verwende fast immer === und !== statt == und !=.

Das macht deinen Code zuverlässiger und leichter verständlich.

Zahlen vergleichen

Zahlen lassen sich mit den Größenvergleichen prüfen.

const temperatur = 22;

console.log(temperatur > 20);  // true
console.log(temperatur < 30);  // true
console.log(temperatur >= 22); // true
console.log(temperatur <= 21); // false

Auch Rechnungen dürfen Teil eines Vergleichs sein:

const preis = 40;
const rabatt = 10;

console.log(preis - rabatt < 35); // true

JavaScript berechnet zunächst preis - rabatt. Danach wird geprüft, ob das Ergebnis kleiner als 35 ist.

Strings vergleichen

Strings kannst du mit === auf genau gleiche Inhalte prüfen.

const farbe = "blau";

console.log(farbe === "blau"); // true
console.log(farbe === "rot");  // false

Bei Strings zählen Groß- und Kleinschreibung:

console.log("Hallo" === "hallo"); // false
console.log("JavaScript" === "JavaScript"); // true

Auch Leerzeichen sind Teil des Textes:

console.log("Anna" === "Anna "); // false

Der zweite String enthält am Ende ein zusätzliches Leerzeichen. Solche kleinen Unterschiede können später bei Eingaben von Nutzern wichtig sein.

Booleans vergleichen

Booleans haben bereits einen Wahrheitswert. Du kannst sie trotzdem vergleichen:

const istAngemeldet = true;

console.log(istAngemeldet === true);  // true
console.log(istAngemeldet === false); // false

Oft ist der direkte Wert aber besser lesbar:

const istAngemeldet = true;

console.log(istAngemeldet); // true

Sobald du Bedingungen mit if verwendest, kannst du Booleans besonders praktisch einsetzen.

Logische Operatoren: Aussagen verbinden

Logische Operatoren verbinden mehrere Vergleiche zu einer größeren Aussage. Die drei wichtigsten Operatoren sind:

Operator Bedeutung Gesprochen als
&& und „und“
|| oder „oder“
! nicht „nicht“

&&: Beide Aussagen müssen stimmen

Der Operator && bedeutet „und“. Das Gesamtergebnis ist nur dann true, wenn beide Aussagen true sind.

const alter = 20;
const hatTicket = true;

console.log(alter >= 18 && hatTicket === true); // true

Hier werden zwei Fragen geprüft:

  1. Ist die Person mindestens 18 Jahre alt?
  2. Hat sie ein Ticket?

Nur wenn beide Antworten true sind, ergibt auch der gesamte Ausdruck true.

console.log(true && true);   // true
console.log(true && false);  // false
console.log(false && true);  // false
console.log(false && false); // false

Ein weiteres Beispiel:

const benutzername = "Mira";
const passwortLaenge = 10;

const eingabeIstGueltig = benutzername !== "" && passwortLaenge >= 8;

console.log(eingabeIstGueltig); // true

Der Benutzername darf nicht leer sein und das Passwort muss mindestens acht Zeichen lang sein.

||: Mindestens eine Aussage muss stimmen

Der Operator || bedeutet „oder“. Das Ergebnis ist true, wenn mindestens eine der Aussagen stimmt.

const istWochenende = false;
const hatUrlaub = true;

console.log(istWochenende || hatUrlaub); // true

Es reicht hier, wenn Wochenende oder Urlaub ist.

console.log(true || true);   // true
console.log(true || false);  // true
console.log(false || true);  // true
console.log(false || false); // false

Ein praktisches Beispiel:

const rolle = "admin";

const darfBearbeiten = rolle === "admin" || rolle === "redaktion";

console.log(darfBearbeiten); // true

Eine Person darf Inhalte bearbeiten, wenn sie die Rolle "admin" oder "redaktion" besitzt.

!: Einen Wahrheitswert umkehren

Das Ausrufezeichen ! bedeutet „nicht“. Es dreht einen Boolean um:

console.log(!true);  // false
console.log(!false); // true

Beispiel mit einer Variablen:

const istLeer = false;

console.log(!istLeer); // true

Du kannst damit auch prüfen, ob etwas nicht gleich ist. Meist ist dafür aber !== besser lesbar:

const status = "offen";

console.log(!(status === "erledigt")); // true
console.log(status !== "erledigt");    // true

Beide Zeilen liefern dasselbe Ergebnis. Die zweite Variante ist meist klarer.

Mehrere Operatoren kombinieren

Du darfst Vergleiche und logische Operatoren verbinden:

const alter = 17;
const hatBegleitung = true;

const darfTeilnehmen = alter >= 18 || hatBegleitung === true;

console.log(darfTeilnehmen); // true

Die Person ist noch nicht volljährig, hat aber eine Begleitung. Weil eine der beiden Aussagen stimmt, ist das Ergebnis true.

Bei komplexeren Ausdrücken helfen Klammern. Sie machen deutlich, welche Teile zusammengehören:

const alter = 20;
const hatTicket = true;
const istMitglied = false;

const darfEintritt =
  (alter >= 18 && hatTicket === true) || istMitglied === true;

console.log(darfEintritt); // true

Die Klammern bedeuten hier:

Tipp: Setze Klammern, wenn ein Ausdruck nicht sofort eindeutig lesbar ist. Das verhindert Fehler und erleichtert anderen Personen das Verstehen deines Codes.

Reihenfolge der Auswertung

JavaScript beachtet bei logischen Operatoren eine feste Reihenfolge:

  1. ! wird zuerst ausgewertet.
  2. && wird danach ausgewertet.
  3. || wird zuletzt ausgewertet.

Dieses Beispiel:

const ergebnis = true || false && false;

console.log(ergebnis); // true

wird so verstanden:

const ergebnis = true || (false && false);

console.log(ergebnis); // true

Für Einsteiger ist es sinnvoll, bei gemischten Operatoren Klammern zu verwenden:

const ergebnis = true || (false && false);

console.log(ergebnis); // true

Kurzschlussauswertung

JavaScript wertet logische Ausdrücke häufig nicht vollständig aus, wenn das Ergebnis schon feststeht. Das nennt man Kurzschlussauswertung.

Bei && reicht ein false, damit der gesamte Ausdruck false wird:

const istEingeloggt = false;
const hatNachrichten = true;

console.log(istEingeloggt && hatNachrichten); // false

Bei || reicht ein true, damit der gesamte Ausdruck true wird:

const istAdmin = true;
const istRedaktion = false;

console.log(istAdmin || istRedaktion); // true

Dieses Verhalten wird später nützlich, um Prüfungen sicher und effizient zu formulieren.

Typische Fehler

= statt === verwenden

const name = "Lea";

console.log(name = "Tom");

Das ist kein Vergleich. Der Wert von name wird hier auf "Tom" gesetzt.

Richtig:

const name = "Lea";

console.log(name === "Tom"); // false

String und Zahl verwechseln

const punkte = "10";

console.log(punkte === 10); // false

punkte ist ein String, weil der Wert in Anführungszeichen steht. Wenn du eine Zahl speichern möchtest, lasse die Anführungszeichen weg:

const punkte = 10;

console.log(punkte === 10); // true

Groß- und Kleinschreibung übersehen

const land = "Deutschland";

console.log(land === "deutschland"); // false

JavaScript unterscheidet genau zwischen "Deutschland" und "deutschland".

Unnötig komplizierte Boolean-Vergleiche

Dieser Code funktioniert:

const hatBezahlt = true;

console.log(hatBezahlt === true);

Meist genügt jedoch:

const hatBezahlt = true;

console.log(hatBezahlt);

Für den umgekehrten Fall:

const hatBezahlt = false;

console.log(!hatBezahlt);

Praxisbeispiel: Teilnahme prüfen

Stell dir vor, eine Veranstaltung ist für Personen ab 16 Jahren. Jüngere Personen dürfen nur mit einer Begleitperson teilnehmen.

const alter = 14;
const hatBegleitung = true;

const darfTeilnehmen = alter >= 16 || hatBegleitung;

console.log(darfTeilnehmen); // true

Teste verschiedene Werte:

const alter = 15;
const hatBegleitung = false;

const darfTeilnehmen = alter >= 16 || hatBegleitung;

console.log(darfTeilnehmen); // false

Ändere alter und hatBegleitung und beobachte die Ergebnisse in der Browser-Konsole.

Übung

Lege die folgenden Variablen an:

const temperatur = 28;
const regnet = false;
const istWochenende = true;

Erstelle anschließend Variablen für diese Aussagen:

  1. Die Temperatur ist mindestens 25.
  2. Es regnet nicht.
  3. Es ist warm und es regnet nicht.
  4. Es ist Wochenende oder die Temperatur liegt über 30.
  5. Es ist nicht Wochenende.

Gib jede Variable mit console.log() aus.

Mögliche Lösung

const temperatur = 28;
const regnet = false;
const istWochenende = true;

const istWarm = temperatur >= 25;
const istTrocken = !regnet;
const istGutesWetter = temperatur >= 25 && !regnet;
const istAusflugstag = istWochenende || temperatur > 30;
const istKeinWochenende = !istWochenende;

console.log(istWarm);           // true
console.log(istTrocken);        // true
console.log(istGutesWetter);    // true
console.log(istAusflugstag);    // true
console.log(istKeinWochenende); // false

Zusammenfassung

Mit diesen Grundlagen kannst du im nächsten Kapitel Bedingungen formulieren: Dein Programm wird dann abhängig von Vergleichen unterschiedliche Aktionen ausführen.