JS/TS Array – Teil 1

Was ist ein Array?

Um es kurz zu sagen: ein Array ist eine Anordnung von einzelnen Elementen, die aus einem Index, beginnend bei 0 und einem Wert bestehen. Wie der Wert aussieht ist zum aktuellen Zeitpunkt erstmal irrelevant.

Mittels eines Arrays ist es möglich mehrere Methoden anzuwenden, z.B. hinzufügen von Elementen am Anfang oder am Ende des Stapels, Sortierungen oder filtern.

In JavaScript/TypeScript ist es überaus einfach ein neues Array zu initialisieren:

const emptyArray = []
const nonEmptyArray = ['foo', '', 'bar', null, 0, undefined]

Das Array, welches in der Variable nonEmptyArray initialisiert wird, sieht nun wie folgt aus:

Damit man nun an die einzelnen Elemente in dem Array auslesen kann, muss man über das Array iterieren.

Wie so häufig gibt es auch dafür wieder mehrere Wege um an das Ziel zu gelangen. Im folgenden stelle ich mehrere Variationen vor.

Variante 1: for-loop

for (let i = 0; i < nonEmptyArray.length; i++) {
    console.log(nonEmptyArray[i])
}
// output: 
// foo
// 
// bar
// null
// 0
// undefined

Zur Erklärung des o.g. Codes: verwendet wird eine for-loop, welche bei der Initialisierung in drei Abschnitte unterteilt ist. Der Index erhält die Variable i und startet bei 0, da auch jedes Array mit dem Index 0 initialisiert wird. Im zweiten Abschnitt wird bestimmt die Abbruchgrenze bestimmt. Im dritten Abschnitt wird definiert um welche Größenordnung unser Index i erhöht werden soll. In unserem Fall immer um 1.

Variante 2: for-each

for (const i of nonEmptyArray) {
    console.log(i)
}
// output: 
// foo
// 
// bar
// null
// 0
// undefined

Nun zur Variante 2: man erkennt schon, dass der Code weniger geworden ist und somit ebenfalls auch weniger komplex. Wir müssen uns nicht mehr selbst um einen Index kümmern, da unsere Variable i aufgrund das Zauberwort of den tatsächlichen Wert enthält ('foo' etc…).

Variante 3: map

nonEmptyArray.map(i => console.log(i))
// output: 
// foo
// 
// bar
// null
// 0
// undefined

Abschließend zur letzten Variante, die kürzeste aller vorgestellten Code-Beispiele. Die Funktion .map() wird im JavaScript/TypeScript bei einem Array von Hause aus mitgeliefert. Auch hier ist wie in der Variante 2 der eigentliche Wert in der Variable i bei jedem Durchlauf gespeichert.

Wissenswertes

In JavaScript kann ein Array 4.294.967.295 Elemente tragen. Das liegt daran, dass der verwendete Index auf 32 Bit basiert (2³²-2).

Das Leeren eines Arrays geht am schnellsten mit folgender Anweisung: nonEmptyArray.length = 0.