# 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.

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

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

Die Konsole zeigt:

```text
Mira
16
```

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

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

Praktischer ist:

```js
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.

```js
let punkte = 0;

console.log(punkte);
```

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

```js
let punkte = 0;

punkte = 10;

console.log(punkte);
```

Die Ausgabe lautet:

```text
10
```

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

```js
let punkte = 0;

// richtig
punkte = 10;
```

Dieser Code wäre falsch:

```js
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.

```js
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.

```js
let besucher = 0;

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

console.log(besucher);
```

Ausgabe:

```text
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.

```js
const geburtsjahr = 2008;

console.log(geburtsjahr);
```

Dieser Code funktioniert nicht:

```js
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:

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

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

```js
const begruessung = "Willkommen auf meiner Webseite!";

console.log(begruessung);
```

---

## `let` oder `const`?

Die wichtigste Frage lautet:

> **Soll dieser Wert später ersetzt werden?**

- Verwende `const`, wenn der Wert gleich bleibt.
- Verwende `let`, wenn sich der Wert ändern kann.

```js
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:

```js
let lieblingsfarbe;

console.log(lieblingsfarbe);
```

Die Ausgabe ist:

```text
undefined
```

`undefined` bedeutet: Es wurde noch kein Wert gespeichert.

Später kannst du einen Wert zuweisen:

```js
let lieblingsfarbe;

lieblingsfarbe = "Blau";

console.log(lieblingsfarbe);
```

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

```js
// falsch
const lieblingsfarbe;
```

Richtig wäre:

```js
const lieblingsfarbe = "Blau";
```

---

## Gute Namen für Variablen

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

Weniger verständlich:

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

Besser:

```js
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.

```js
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:

- Buchstaben enthalten,
- Zahlen enthalten, aber **nicht am Anfang**,
- `_` und `$` enthalten.

```js
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:

```js
// falsch
let 1spieler = "Noah";
```

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

```js
// 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.

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

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

Die Ausgabe lautet:

```text
Mira
Jonas
```

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

```js
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.

```js
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:

```text
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

```js
const anzahl = 3;
anzahl = 4;
```

**Problem:** Eine Konstante darf nicht neu zugewiesen werden.

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

```js
let anzahl = 3;
anzahl = 4;
```

### Variable versehentlich erneut erstellen

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

**Problem:** `nachricht` wurde im gleichen Bereich bereits erstellt.

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

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

### Namen unterschiedlich schreiben

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

**Problem:** `benutzerName` und `benutzername` sind unterschiedliche Namen.

**Lösung:** Schreibe den Namen exakt gleich.

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

---

## Merke dir

- Variablen speichern Werte unter einem Namen.
- Mit `let` erstellst du Werte, die später verändert werden können.
- Mit `const` erstellst du Werte, die nicht neu zugewiesen werden dürfen.
- Verwende verständliche Namen wie `punktestand` oder `istEingeloggt`.
- JavaScript unterscheidet Groß- und Kleinschreibung.
- Erstelle eine Variable nur einmal mit `let` oder `const`. Danach weist du neue Werte ohne diese Wörter zu.

---

## Ü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:

```js
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:

- **Zahlen** für Mengen, Rechnungen oder Messwerte
- **Strings** für Texte
- **Booleans** für Wahrheitswerte: wahr oder falsch

```js
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.

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

Mit Zahlen kannst du rechnen:

```js
let a = 10;
let b = 5;

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

Auch negative Zahlen und Dezimalzahlen sind möglich:

```js
let kontostand = -25;
let breite = 12.5;

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

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

```js
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:

```js
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.

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

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

```js
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.

```js
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:

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

console.log(zitat);
```

Oder umgekehrt:

```js
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**.

```js
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:

```js
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:

```js
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:

```js
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:

```js
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`.

```js
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:

- `true` bedeutet *wahr*
- `false` bedeutet *falsch*

Booleans werden **ohne** Anführungszeichen geschrieben.

```js
let istOnline = true;
let istFertig = false;
```

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

```js
let hatTicket = true;

console.log(hatTicket); // true
```

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

```js
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.

```js
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.

```js
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:

```js
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:

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

Diese Namen sind verständlicher als:

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

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

```js
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:

```js
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:

```js
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:

```js
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:

```js
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:

```js
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:

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

Die Konsole gibt aus:

```text
10
6
30
5
```

## Mit Variablen rechnen

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

```js
let preis = 12;
let anzahl = 3;

let gesamtpreis = preis * anzahl;

console.log(gesamtpreis);
```

Die Ausgabe lautet:

```text
36
```

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

Ein weiteres Beispiel:

```js
const aktuellesJahr = 2025;
const geburtsjahr = 2008;

const alter = aktuellesJahr - geburtsjahr;

console.log(alter);
```

## Division und Dezimalzahlen

Mit `/` teilst du eine Zahl durch eine andere.

```js
const strecke = 150;
const stunden = 3;

const geschwindigkeit = strecke / stunden;

console.log(geschwindigkeit);
```

Ergebnis:

```text
50
```

Eine Division kann auch eine Dezimalzahl ergeben:

```js
console.log(7 / 2);
```

Ausgabe:

```text
3.5
```

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

```js
const temperatur = 21.5;
```

Nicht so:

```js
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`.

```js
console.log(10 / 0);
```

## Der Restoperator `%`

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

```js
console.log(10 % 3);
```

Die `3` passt dreimal in die `10`:

```text
3 * 3 = 9
```

Es bleibt `1` übrig. Deshalb lautet die Ausgabe:

```text
1
```

Weitere Beispiele:

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

Ergebnisse:

```text
0
1
3
```

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

```js
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.

```js
console.log(2 ** 3);
```

Das bedeutet:

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

Weitere Beispiele:

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

Ausgabe:

```text
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:

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

Das Ergebnis ist:

```text
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:

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

Jetzt lautet das Ergebnis:

```text
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:

```js
let punkte = 10;

punkte = punkte + 5;

console.log(punkte);
```

Die Variable `punkte` enthält danach den Wert `15`.

Dafür gibt es auch Kurzschreibweisen:

```js
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:

```js
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.

```js
console.log(4 + 5);
```

Ergebnis:

```text
9
```

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

```js
console.log("4" + 5);
```

Ergebnis:

```text
45
```

Auch dieses Beispiel erzeugt Text:

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

console.log(begruessung);
```

Ausgabe:

```text
Hallo, Mila!
```

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

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

Ausgabe:

```text
8
30
```

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

```js
const richtigeZahl = 10;
```

Statt:

```js
const textStattZahl = "10";
```

## Praxisbeispiel: Kosten einer Bestellung

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

```js
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:

```text
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:

```js
const ergebnis = 4 * 7;
```

Das Zeichen `x` funktioniert nicht als Rechenoperator:

```js
// Falsch:
const ergebnis = 4 x 7;
```

### Variablenname richtig schreiben

JavaScript unterscheidet genau zwischen verschiedenen Schreibweisen:

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

Das wäre ein Fehler:

```js
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:

```js
console.log(6 * 7);
```

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

```js
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

```js
const breite = 8;
const hoehe = 5;

const flaeche = breite * hoehe;

console.log(flaeche);
```

```js
const pizzaPreis = 9.5;
const anzahlPizzen = 3;

const gesamtpreis = pizzaPreis * anzahlPizzen;

console.log(gesamtpreis);
```

```js
let punkte = 20;

punkte -= 7;

console.log(punkte);
```

```js
console.log(25 % 4);
```

```js
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:

- `true` bedeutet: Die Aussage stimmt.
- `false` bedeutet: Die Aussage stimmt nicht.

```js
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:

```js
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.

```js
const punkte = 10; // Wert zuweisen

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

## Strenger Vergleich mit `===`

In JavaScript gibt es zwei Arten, Gleichheit zu vergleichen:

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

Der Unterschied:

- `==` vergleicht Werte recht locker. JavaScript versucht dabei, Datentypen umzuwandeln.
- `===` vergleicht **Wert und Datentyp**. Zahl und Text sind also nicht gleich.

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

```js
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.

```js
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:

```js
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.

```js
const farbe = "blau";

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

Bei Strings zählen Groß- und Kleinschreibung:

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

Auch Leerzeichen sind Teil des Textes:

```js
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:

```js
const istAngemeldet = true;

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

Oft ist der direkte Wert aber besser lesbar:

```js
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.

```js
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`.

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

Ein weiteres Beispiel:

```js
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.

```js
const istWochenende = false;
const hatUrlaub = true;

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

Es reicht hier, wenn Wochenende **oder** Urlaub ist.

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

Ein praktisches Beispiel:

```js
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:

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

Beispiel mit einer Variablen:

```js
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:

```js
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:

```js
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:

```js
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:

- Volljährig **und** Ticket vorhanden  
  **oder**
- Mitgliedschaft vorhanden

> **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:

```js
const ergebnis = true || false && false;

console.log(ergebnis); // true
```

wird so verstanden:

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

console.log(ergebnis); // true
```

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

```js
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:

```js
const istEingeloggt = false;
const hatNachrichten = true;

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

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

```js
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

```js
const name = "Lea";

console.log(name = "Tom");
```

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

Richtig:

```js
const name = "Lea";

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

### String und Zahl verwechseln

```js
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:

```js
const punkte = 10;

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

### Groß- und Kleinschreibung übersehen

```js
const land = "Deutschland";

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

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

### Unnötig komplizierte Boolean-Vergleiche

Dieser Code funktioniert:

```js
const hatBezahlt = true;

console.log(hatBezahlt === true);
```

Meist genügt jedoch:

```js
const hatBezahlt = true;

console.log(hatBezahlt);
```

Für den umgekehrten Fall:

```js
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.

```js
const alter = 14;
const hatBegleitung = true;

const darfTeilnehmen = alter >= 16 || hatBegleitung;

console.log(darfTeilnehmen); // true
```

Teste verschiedene Werte:

```js
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:

```js
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

```js
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

- Vergleichsoperatoren liefern immer `true` oder `false`.
- Verwende `===` für einen sicheren Vergleich von Wert **und** Datentyp.
- Mit `!==` prüfst du, ob zwei Werte verschieden sind.
- `&&` verlangt, dass beide Aussagen wahr sind.
- `||` verlangt, dass mindestens eine Aussage wahr ist.
- `!` kehrt einen Wahrheitswert um.
- Klammern machen komplexe logische Ausdrücke verständlicher.

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