Arrays anlegen und lesen

Bis hierhin hatte jeder Wert seinen eigenen Namen. Bei drei Wochentagen geht das noch, bei dreihundert Bestellungen nicht mehr. Ein Array ist eine Liste von Werten unter einem Namen, in einer festen Reihenfolge.

Du hast schon eins benutzt, ohne dass es hieß: Der Rest-Parameter aus Lektion 5.5 sammelt seine Argumente in genau so einer Liste.

01 / 04Anlegen

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

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

console.log(wochentage);
console.log("Anzahl:", wochentage.length);

// Eine leere Liste ist auch eine Liste.
const leer = [];
console.log("Leer:", leer, "mit Länge", leer.length);

// Erlaubt ist alles Gemischte, gewollt ist es selten: eine Liste
// steht normalerweise für mehrere Dinge derselben Art.
const gemischt = [1, "zwei", true, null];
console.log("Gemischt:", gemischt);

Eckige Klammern, Werte durch Komma getrennt. Das ist alles.

length sagt, wie viele Einträge drin sind. Es ist keine Funktion, sondern eine Eigenschaft, deshalb steht dahinter kein Klammerpaar. Das ist eine der häufigsten Verwechslungen am Anfang.

Eine leere Liste ist erlaubt und kommt ständig vor: Man legt sie an und füllt sie erst später. Ebenso erlaubt ist eine Liste mit gemischten Typen, gewollt ist sie selten. Eine Liste steht normalerweise für mehrere Dinge derselben Art, und wenn Verschiedenes zusammengehört, ist das ein Objekt. Das kommt in Abschnitt 7.

02 / 04Der Index beginnt bei null

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

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

console.log("Stelle 0:", tage[0]);
console.log("Stelle 1:", tage[1]);
console.log("Stelle 4:", tage[4]);

// Fünf Einträge, aber die höchste Stelle ist 4.
console.log("Länge:", tage.length);
console.log("Stelle 5:", tage[5]);

// Kein Fehler, nur undefined. Das ist der Unterschied zu vielen
// anderen Sprachen und der Grund für so manches spätere NaN.
console.log("Und damit gerechnet:", tage[5] + "!");

Der Zugriff geht über die Position in eckigen Klammern, und gezählt wird ab 0.

Der erste Eintrag steht also an Stelle 0, und bei fünf Einträgen ist die höchste Stelle 4. Daraus folgt die Formel, die du dauernd brauchen wirst: der letzte Eintrag steht bei length - 1.

Das fühlt sich beim ersten Mal falsch an und ist der Grund, warum Lektion 4.1 die Zählschleife bei 0 beginnen lässt. Von dort passt sie ohne Umrechnung auf jede Liste.

Ein Zugriff daneben ist kein Fehler. tage[5] bei fünf Einträgen liefert undefined, ganz ohne Meldung. Das ist bequem und tückisch zugleich: Der Fehler zeigt sich erst später, wenn mit dem undefined gerechnet wird und plötzlich NaN dasteht.

03 / 04Der letzte Eintrag

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

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

// Die Zahl hinschreiben geht, solange sich die Liste nie ändert.
console.log("Von Hand:", tage[4]);

// Gerechnet ist es unabhängig von der Länge.
console.log("Gerechnet:", tage[tage.length - 1]);

// Und am kürzesten mit at, das auch von hinten zählt.
console.log("Mit at:", tage.at(-1));
console.log("Der vorletzte:", tage.at(-2));

// Bei einer leeren Liste liefern beide Wege undefined.
const leer = [];
console.log("Leer:", leer[leer.length - 1], leer.at(-1));

Drei Wege zum letzten Eintrag, und einer davon ist schlecht.

Die Zahl hinschreiben funktioniert genau so lange, wie die Liste sich nicht ändert. Kommt ein Eintrag dazu, zeigt sie auf den vorletzten, und niemand merkt es.

liste[liste.length - 1] ist der klassische Weg und immer richtig, nur etwas umständlich zu lesen.

liste.at(-1) ist der kurze Weg. at zählt bei negativen Zahlen von hinten, -1 ist der letzte, -2 der vorletzte. Es ist neuer als der Rest und in jedem aktuellen Browser da.

Bei einer leeren Liste liefern beide Wege undefined, und das ist genau richtig: Es gibt keinen letzten Eintrag.

04 / 04const und der Inhalt

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

const farben = ["rot", "grün"];

// Erlaubt: der Inhalt darf sich ändern.
farben[0] = "blau";
farben.push("gelb");
console.log("Geändert:", farben);

// Auch erlaubt und meistens ein Versehen: eine Stelle weit hinten
// beschreiben. Dazwischen entstehen leere Plätze.
farben[6] = "schwarz";
console.log("Mit Lücke:", farben, "Länge:", farben.length);

// In der Console sieht eine Lücke aus wie ein undefined. Das ist
// die Anzeige, nicht der Inhalt: dort liegt gar nichts. Die beiden
// Fragen darunter zeigen es unabhängig davon.
console.log("Stelle 3 gesetzt?", 3 in farben);
console.log("Stelle 6 gesetzt?", 6 in farben);

// Diese Zeile steht am Ende, denn sie bricht ab: der Name selbst
// darf nicht auf eine andere Liste zeigen.
farben = ["neu"];

Eine Liste legt man mit const an, obwohl man sie danach verändert. Das ist kein Widerspruch, sondern eine Frage dessen, was const eigentlich schützt.

const schützt die Zuweisung, nicht den Inhalt. Der Name darf danach nicht auf eine andere Liste zeigen. Was in der Liste steht, darf sich beliebig ändern: Einträge überschreiben, anhängen, entfernen, alles erlaubt.

Man kann sich das so vorstellen: const nagelt das Schild an die Kiste fest. Was in der Kiste liegt, geht dem Schild nichts an.

Deshalb nimmt man auch für Listen const, solange man ihnen nicht wirklich eine andere Liste zuweist. Das ist der Normalfall, und let wäre hier die Ausnahme.

Ein Detail nebenbei: Beschreibst du eine Stelle weit hinter dem Ende, wächst die Liste mit und dazwischen entstehen leere Plätze. Das ist fast immer ein Versehen, und die nächste Lektion zeigt den richtigen Weg zum Anhängen.

In der Console steht an diesen Plätzen undefined, und das ist eine Ungenauigkeit der Anzeige: Dort liegt gar nichts, und undefined ist nur das, was ein Loch beim Lesen liefert. Eine Liste, in der wirklich ein undefined steht, sieht deshalb genauso aus. In den Entwicklerwerkzeugen deines Browsers steht stattdessen <3 empty items>, und das ist die genauere der beiden Auskünfte. Die letzten beiden Zeilen des Beispiels fragen deshalb mit in nach: Diese Antwort hängt an der Liste und nicht an der Darstellung. Tipp 3 in farben und 6 in farben ruhig noch einmal selbst in die Eingabezeile der Console, das ist der Unterschied in zwei Zeilen.