Skip to main content

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:

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

kannst du alle Farben in einem Array zusammenfassen:

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

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

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

In einem Array können unterschiedliche Datentypen stehen:

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.

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:

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.

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.

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

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

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

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.

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

tage[1] = "Dienstagabend";

console.log(tage);

Ausgabe:

["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.

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.

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.

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

musikrichtungen.push("Jazz");

console.log(musikrichtungen);

Ausgabe:

["Rock", "Pop", "Jazz"]

Du kannst auch mehrere Werte gleichzeitig hinzufügen:

const zahlen = [1, 2, 3];

zahlen.push(4, 5);

console.log(zahlen);

Ausgabe:

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

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

warteschlange.pop();

console.log(warteschlange);

Ausgabe:

["Mia", "Noah"]

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

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

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

plaetze.unshift("Vorne");

console.log(plaetze);

Ausgabe:

["Vorne", "Mitte", "Hinten"]

Mit shift() den ersten Wert entfernen

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.

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

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

Ausgabe:

Apfel
Banane
Birne

Schauen wir uns die Schleife genauer an:

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.

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:

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:

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:

Sehr gutes Ergebnis: 15

Mehrdimensionale Arrays kurz kennengelernt

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

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

Der erste Wert enthält ein Array:

console.log(sitzplan[0]);

Ausgabe:

["Anna", "Ben"]

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

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

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

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

console.log(namen.length());

Das führt zu einem Fehler. Richtig ist:

console.log(namen.length);

Einen nicht vorhandenen Index verwenden

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

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

Das Array hat nur die Indizes 0 und 1.

Bei Schleifen <= verwenden

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

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:

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

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

console.log(aufgaben);

Ausgabe:

["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:

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

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

Ausgabe:

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.

Back to top