# Arrays erstellen und nutzen

## Was sind Arrays?

Ein **Array** ist eine geordnete Liste von Werten. Es eignet sich immer dann, wenn du mehrere zusammengehörige Informationen speichern möchtest.

Statt für jede Lieblingsfarbe eine eigene Variable anzulegen:

```js
const farbe1 = "Rot";
const farbe2 = "Blau";
const farbe3 = "Grün";
```

kannst du alle Farben in einem Array zusammenfassen:

```js
const farben = ["Rot", "Blau", "Grün"];
```

Ein Array speichert seine Werte zwischen eckigen Klammern `[]`. Die einzelnen Einträge werden durch Kommas getrennt.

```js
const tiere = ["Hund", "Katze", "Kaninchen"];
const punkte = [12, 8, 20, 15];
const antworten = [true, false, true];
```

In einem Array können unterschiedliche Datentypen stehen:

```js
const gemischteWerte = ["Hallo", 42, true];
```

Für übersichtlichen Code ist es aber meistens sinnvoll, ähnliche Werte gemeinsam zu speichern: also zum Beispiel nur Namen, nur Zahlen oder nur Wahrheitswerte.

---

## Einträge über ihren Index auswählen

Jeder Eintrag in einem Array besitzt eine feste Position. Diese Position heißt **Index**.

Wichtig: Der erste Eintrag hat immer den Index `0`, nicht `1`.

```js
const staedte = ["Berlin", "Hamburg", "Köln"];
```

| Index | Wert |
|---:|---|
| 0 | `"Berlin"` |
| 1 | `"Hamburg"` |
| 2 | `"Köln"` |

Du greifst mit eckigen Klammern auf einen bestimmten Eintrag zu:

```js
const staedte = ["Berlin", "Hamburg", "Köln"];

console.log(staedte[0]); // Berlin
console.log(staedte[1]); // Hamburg
console.log(staedte[2]); // Köln
```

Wenn du einen Index verwendest, der nicht existiert, erhältst du `undefined`.

```js
console.log(staedte[5]); // undefined
```

> 💡 **Merke:** Bei Arrays beginnt das Zählen bei `0`. Das ist anfangs ungewohnt, aber in JavaScript und vielen anderen Programmiersprachen üblich.

---

## Die Anzahl der Einträge ermitteln

Mit der Eigenschaft `.length` findest du heraus, wie viele Werte ein Array enthält.

```js
const einkaufsliste = ["Brot", "Milch", "Äpfel"];

console.log(einkaufsliste.length); // 3
```

`.length` ist keine Funktion. Deshalb stehen hier **keine runden Klammern** dahinter.

```js
const zahlen = [4, 8, 15, 16];

console.log(zahlen.length); // 4
```

Die Länge eines Arrays ist besonders praktisch, wenn du mit Schleifen arbeitest.

---

## Einträge verändern

Ein Array, das mit `const` erstellt wurde, darf verändert werden. Du kannst also einzelne Werte ersetzen.

```js
const tage = ["Montag", "Dienstag", "Mittwoch"];

tage[1] = "Dienstagabend";

console.log(tage);
```

Ausgabe:

```js
["Montag", "Dienstagabend", "Mittwoch"]
```

`const` bedeutet hier: Die Variable `tage` darf nicht auf ein komplett neues Array zeigen. Der Inhalt des vorhandenen Arrays kann jedoch geändert werden.

```js
const tage = ["Montag", "Dienstag"];

// Das ist erlaubt:
tage[0] = "Sonntag";

// Das führt zu einem Fehler:
tage = ["Mittwoch", "Donnerstag"];
```

Wenn du das Array später vollständig ersetzen möchtest, verwendest du `let`.

```js
let aufgaben = ["Lernen", "Aufräumen"];

aufgaben = ["Einkaufen", "Kochen"];

console.log(aufgaben);
```

---

## Werte am Ende hinzufügen: `push()`

Mit der Methode `.push()` fügst du einen oder mehrere Werte am **Ende** eines Arrays hinzu.

```js
const musikrichtungen = ["Rock", "Pop"];

musikrichtungen.push("Jazz");

console.log(musikrichtungen);
```

Ausgabe:

```js
["Rock", "Pop", "Jazz"]
```

Du kannst auch mehrere Werte gleichzeitig hinzufügen:

```js
const zahlen = [1, 2, 3];

zahlen.push(4, 5);

console.log(zahlen);
```

Ausgabe:

```js
[1, 2, 3, 4, 5]
```

`.push()` verändert das vorhandene Array direkt.

---

## Den letzten Wert entfernen: `pop()`

Mit `.pop()` entfernst du den letzten Eintrag eines Arrays.

```js
const warteschlange = ["Mia", "Noah", "Emma"];

warteschlange.pop();

console.log(warteschlange);
```

Ausgabe:

```js
["Mia", "Noah"]
```

Außerdem gibt `.pop()` den entfernten Wert zurück. Das ist nützlich, wenn du ihn noch weiterverwenden möchtest.

```js
const warteschlange = ["Mia", "Noah", "Emma"];

const entferntePerson = warteschlange.pop();

console.log(entferntePerson); // Emma
console.log(warteschlange);   // ["Mia", "Noah"]
```

---

## Werte am Anfang hinzufügen und entfernen

Manchmal soll ein Wert nicht am Ende, sondern am Anfang eines Arrays stehen.

### Mit `unshift()` vorne hinzufügen

```js
const plaetze = ["Mitte", "Hinten"];

plaetze.unshift("Vorne");

console.log(plaetze);
```

Ausgabe:

```js
["Vorne", "Mitte", "Hinten"]
```

### Mit `shift()` den ersten Wert entfernen

```js
const plaetze = ["Vorne", "Mitte", "Hinten"];

const ersterPlatz = plaetze.shift();

console.log(ersterPlatz); // Vorne
console.log(plaetze);     // ["Mitte", "Hinten"]
```

| Methode | Aufgabe |
|---|---|
| `.push()` | Wert am Ende hinzufügen |
| `.pop()` | Letzten Wert entfernen |
| `.unshift()` | Wert am Anfang hinzufügen |
| `.shift()` | Ersten Wert entfernen |

---

## Arrays mit einer `for`-Schleife durchlaufen

Arrays werden sehr häufig mit einer `for`-Schleife verarbeitet. So kannst du jeden Eintrag nacheinander ausgeben.

```js
const obst = ["Apfel", "Banane", "Birne"];

for (let index = 0; index < obst.length; index++) {
  console.log(obst[index]);
}
```

Ausgabe:

```js
Apfel
Banane
Birne
```

Schauen wir uns die Schleife genauer an:

```js
for (let index = 0; index < obst.length; index++) {
  console.log(obst[index]);
}
```

- `let index = 0`: Die Schleife beginnt beim ersten Index.
- `index < obst.length`: Sie läuft nur, solange ein Eintrag vorhanden ist.
- `index++`: Nach jedem Durchlauf wird der Index um `1` erhöht.
- `obst[index]`: Der aktuelle Wert wird aus dem Array gelesen.

Die Bedingung `index < obst.length` ist wichtig. Bei drei Werten sind die gültigen Indizes `0`, `1` und `2`. Der Wert `3` wäre bereits außerhalb des Arrays.

---

## Ein praktisches Beispiel: Punkteliste auswerten

Stell dir vor, du speicherst die Punkte einer Person in mehreren Runden.

```js
const punkte = [12, 8, 15, 10];
let gesamtPunkte = 0;

for (let index = 0; index < punkte.length; index++) {
  gesamtPunkte = gesamtPunkte + punkte[index];
}

console.log("Gesamtpunkte: " + gesamtPunkte);
```

Ausgabe:

```js
Gesamtpunkte: 45
```

Die Variable `gesamtPunkte` startet mit `0`. Dann wird in jedem Schleifendurchlauf der aktuelle Wert aus dem Array addiert.

Du kannst auch prüfen, ob ein bestimmter Punktwert erreicht wurde:

```js
const punkte = [12, 8, 15, 10];

for (let index = 0; index < punkte.length; index++) {
  if (punkte[index] >= 15) {
    console.log("Sehr gutes Ergebnis: " + punkte[index]);
  }
}
```

Ausgabe:

```js
Sehr gutes Ergebnis: 15
```

---

## Mehrdimensionale Arrays kurz kennengelernt

Ein Array kann selbst weitere Arrays enthalten. Das nennt man ein **mehrdimensionales Array**.

```js
const sitzplan = [
  ["Anna", "Ben"],
  ["Clara", "David"]
];
```

Der erste Wert enthält ein Array:

```js
console.log(sitzplan[0]);
```

Ausgabe:

```js
["Anna", "Ben"]
```

Um auf einen einzelnen Namen zuzugreifen, verwendest du zwei Indizes:

```js
console.log(sitzplan[0][1]); // Ben
console.log(sitzplan[1][0]); // Clara
```

Für den Einstieg reichen einfache Arrays meistens aus. Mehrdimensionale Arrays begegnen dir später zum Beispiel bei Spielbrettern, Tabellen oder Stundenplänen.

---

## Häufige Fehler

### Beim Index bei `1` beginnen

```js
const farben = ["Rot", "Blau", "Grün"];

console.log(farben[1]); // Blau
```

Wer den ersten Wert erwartet, wird überrascht sein: `farben[1]` ist bereits der zweite Eintrag. Der erste Eintrag ist `farben[0]`.

### `.length` mit Klammern schreiben

```js
const namen = ["Lea", "Tom"];

console.log(namen.length());
```

Das führt zu einem Fehler. Richtig ist:

```js
console.log(namen.length);
```

### Einen nicht vorhandenen Index verwenden

```js
const monate = ["Januar", "Februar"];

console.log(monate[2]); // undefined
```

Das Array hat nur die Indizes `0` und `1`.

### Bei Schleifen `<=` verwenden

```js
const namen = ["Lea", "Tom"];

for (let index = 0; index <= namen.length; index++) {
  console.log(namen[index]);
}
```

Diese Schleife gibt am Ende zusätzlich `undefined` aus. Verwende stattdessen `<`:

```js
for (let index = 0; index < namen.length; index++) {
  console.log(namen[index]);
}
```

---

## Übung: Eine einfache To-do-Liste

Erstelle ein Array mit drei Aufgaben. Gib zunächst alle Aufgaben aus. Füge dann eine weitere Aufgabe hinzu und entferne anschließend die erste Aufgabe.

**Aufgabe:**

1. Erstelle ein Array namens `aufgaben`.
2. Speichere mindestens drei Texte darin.
3. Füge mit `.push()` eine Aufgabe hinzu.
4. Entferne mit `.shift()` die erste Aufgabe.
5. Gib das fertige Array in der Konsole aus.

Eine mögliche Lösung:

```js
const aufgaben = ["Hausaufgaben machen", "Zimmer aufräumen", "Einkaufen"];

aufgaben.push("E-Mail schreiben");
aufgaben.shift();

console.log(aufgaben);
```

Ausgabe:

```js
["Zimmer aufräumen", "Einkaufen", "E-Mail schreiben"]
```

---

## Übung: Namen begrüßen

Erstelle ein Array mit mehreren Namen. Schreibe eine `for`-Schleife, die jede Person einzeln begrüßt.

Eine mögliche Lösung:

```js
const namen = ["Aylin", "Jonas", "Mara"];

for (let index = 0; index < namen.length; index++) {
  console.log("Hallo, " + namen[index] + "!");
}
```

Ausgabe:

```js
Hallo, Aylin!
Hallo, Jonas!
Hallo, Mara!
```

---

## Das Wichtigste auf einen Blick

- Arrays speichern mehrere Werte in einer geordneten Liste.
- Arrays werden mit eckigen Klammern erstellt: `["Wert 1", "Wert 2"]`.
- Der erste Eintrag hat den Index `0`.
- Mit `.length` erhältst du die Anzahl der Einträge.
- Mit `.push()` und `.pop()` bearbeitest du das Ende eines Arrays.
- Mit `.unshift()` und `.shift()` bearbeitest du den Anfang.
- Eine `for`-Schleife hilft dir, alle Werte eines Arrays nacheinander zu verarbeiten.

Im nächsten Abschnitt lernst du **Objekte** kennen. Während Arrays mehrere Werte in einer Reihenfolge speichern, helfen Objekte dabei, Informationen mit klaren Eigenschaften wie Name, Alter oder Farbe zu ordnen.