Shelly Scripting – JavaScript-Grundlagen für Einsteiger: Arrays verstehen und anwenden

Arrays sind eine der einfachsten Möglichkeiten, mehrere Werte wie Zahlen oder Zeichenketten in einer Art Liste zu speichern. Jeder Eintrag hat dabei eine feste Position und kann über einen sogenannten Index angesprochen werden. Besonders praktisch ist das Zusammenspiel mit Schleifen: Damit lassen sich alle Elemente eines Arrays effizient durchlaufen – zum Beispiel, um sie auszugeben oder zu bearbeiten. In diesem Beitrag zeige ich dir, wie Arrays aufgebaut sind und wie du sie sinnvoll nutzen kannst.

Dieses Video auf YouTube ansehen.

📌 Tipp: Eine ausführliche Einführung in JavaScript-Grundlagen wie Variablen, Bedingungen und die verschiedenen Schleifenarten findest du in meinem Blogbeitrag:
👉 Shelly Scripting – JavaScript-Grundlagen für Einsteiger: Variablen, Bedingungen & Logik verstehen

🎥 Zusätzlich gibt’s auf meinem YouTube-Kanal eine eigene Playlist, in der ich alle Themen Schritt für Schritt in einzelnen Videos erkläre.

Was ist ein Array?

Ein Array ist eine geordnete Sammlung von Werten, die unter einem gemeinsamen Namen gespeichert werden. Man kann sich ein Array wie eine Liste oder ein Regal mit nummerierten Fächern vorstellen – in jedem Fach liegt ein Wert. Diese Werte können zum Beispiel Zahlen oder Zeichenketten sein.

Wichtig:
Die Zählung (der sogenannte Index) beginnt bei 0, nicht bei 1! Das bedeutet:

Das erste Element eines Arrays hat den Index 0
Das zweite Element den Index 1
Und so weiter …

Beispiel: Gemüse-Array

let gemuese = ["Tomate", "Gurke", "Paprika", "Karotte"];

In diesem Array haben wir vier Gemüsesorten gespeichert. Die Zuordnung sieht so aus:

Index	Wert
0	„Tomate“
1	„Gurke“
2	„Paprika“
3	„Karotte“

Wenn du z. B. auf das erste Element zugreifen möchtest, schreibst du:

print(gemuese[0]); // Ausgabe: Tomate

Und so greifst du auf das letzte Element zu:

print(gemuese[3]); // Ausgabe: Karotte

Shelly Scripting - Arrays - Ausgabe von Werten aus dem Array — Shelly Scripting – Arrays – Ausgabe von Werten aus dem Array

Zugriff auf nicht vorhandene Elemente

Wenn du in einem Array einen Index auswählst, für den kein Wert existiert, bekommst du als Ergebnis den speziellen Wert undefined. Das bedeutet, dass an dieser Stelle nichts gespeichert ist.

Schauen wir uns das am Beispiel an:

//                IDX 0    IDX 1    IDX 2      IDX 3
let gemuese = ["Tomate", "Gurke", "Paprika", "Karotte"];

print(gemuese[4]); // Ausgabe: undefined

In unserem Array sind nur vier Elemente enthalten, mit den Indizes 0 bis 3. Wenn du versuchst, auf gemuese[4] zuzugreifen, also auf den fünften Platz, bekommst du undefined, weil dort kein Wert hinterlegt ist.

🔎 Tipp:
Vor dem Zugriff kannst du mit einer Bedingung prüfen, ob der Index gültig ist:

if (gemuese[4] !== undefined) {
  print(gemuese[4]);
} else {
  print("An dieser Stelle gibt es kein Gemüse!");
}

Shelly Scripting - Arrays - Zugriff auf nicht vorhandenen Index — Shelly Scripting – Arrays – Zugriff auf nicht vorhandenen Index

Die Länge eines Arrays mit `length` ermitteln

Mit der Eigenschaft length kannst du herausfinden, wie viele Elemente sich aktuell in einem Array befinden.

let gemuese = ["Tomate", "Gurke", "Paprika", "Karotte"];
print("Anzahl der Elemente im Array: "+ gemuese.length);

Shelly Scripting - Arrays - ermitteln der Anzahl der Elemente — Shelly Scripting – Arrays – ermitteln der Anzahl der Elemente

Das bedeutet: Unser gemuese-Array enthält vier Elemente.
Aber Achtung: Der letzte gültige Index ist nicht 4, sondern 3, denn die Zählung beginnt wie immer bei 0.

👉 Merke:
Die length-Eigenschaft gibt dir die Anzahl der Elemente, nicht den höchsten Index. Der höchste Index ist also immer length - 1.

Beispiel für Zugriff mit `length`

let gemuese = ["Tomate", "Gurke", "Paprika", "Karotte"];
let letztesGemuese = gemuese[gemuese.length - 1];
print(letztesGemuese); // Ausgabe: Karotte

So kannst du dynamisch auf das letzte Element zugreifen, egal wie viele Werte im Array gespeichert sind.

Array mit einer `for`-Schleife durchlaufen

Eine der häufigsten Methoden, um alle Werte eines Arrays zu verarbeiten oder auszugeben, ist die for-Schleife. Sie ermöglicht es dir, nacheinander auf jeden Index des Arrays zuzugreifen.

Hier ein Beispiel mit unserem Gemüse-Array:

let gemuese = ["Tomate", "Gurke", "Paprika", "Karotte"];

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

Shelly Scripting - Arrays - Ausgabe der Elemente mit einer ForSchleife — Shelly Scripting – Arrays – Ausgabe der Elemente mit einer ForSchleife

🔍 Was passiert hier?

Die Schleife beginnt bei index = 0 (also dem ersten Element).
Sie läuft so lange, wie der Index kleiner als gemuese.length ist.
Mit gemuese[index] greifen wir auf das jeweilige Element zu.
Die Funktion print() gibt das Element aus (alternativ in der Konsole: console.log()).

💡 Wichtig:
Wir verwenden index < gemuese.length – nicht <= –, weil der letzte gültige Index immer length - 1 ist. Sonst würde wieder undefined ausgegeben werden.

Schleife steuern mit `break` und `continue`

Ein großer Vorteil der klassischen for-Schleife ist, dass du den Ablauf der Schleife gezielt steuern kannst – z. B. mit break oder continue.

`break`: Schleife vorzeitig beenden

Mit break kannst du die Schleife sofort abbrechen, sobald eine bestimmte Bedingung erfüllt ist:

let gemuese = ["Tomate", "Gurke", "Paprika", "Karotte"];

for (let index = 0; index < gemuese.length; index++) {
  if (gemuese[index] === "Paprika") {
    break; // Schleife wird hier gestoppt
  }
  print(gemuese[index]);
}

Shelly Scripting - Arrays - Abbrechen der ForSchleife mit break — Shelly Scripting – Arrays – Abbrechen der ForSchleife mit break

`continue`: Eintrag überspringen

Mit continue kannst du den aktuellen Schleifendurchlauf überspringen, ohne die ganze Schleife zu beenden:

let gemuese = ["Tomate", "Gurke", "Paprika", "Karotte"];

for (let index = 0; index < gemuese.length; index++) {
  if (gemuese[index] === "Paprika") {
    continue; // "Paprika" wird übersprungen
  }
  print(gemuese[index]);
}

Shelly Scripting - Arrays - Überspringen von Elementen in der ForSchleife mit continue — Shelly Scripting – Arrays – Überspringen von Elementen in der ForSchleife mit continue

Diese Steuerbefehle machen die klassische for-Schleife besonders flexibel – ideal, wenn du nur bestimmte Elemente verarbeiten oder bei bestimmten Bedingungen abbrechen willst.

Moderne Alternative: `forEach()`-Methode

Neben der klassischen for-Schleife bietet JavaScript auch eine modernere und oft lesbarere Methode, um ein Array zu durchlaufen: forEach().

let gemuese = ["Tomate", "Gurke", "Paprika", "Karotte"];

gemuese.forEach(function(element) {
  print(element);
});

Shelly Scripting - Arrays - Ausgabe der Elemente mit ForEach — Shelly Scripting – Arrays – Ausgabe der Elemente mit ForEach

🧠 Was passiert hier?

Die Methode forEach() wird direkt auf dem Array aufgerufen.
Sie übergibt jedes Element nacheinander an die anonyme Funktion function(element) { ... }.
Die Funktion wird automatisch für jedes Element im Array ausgeführt – ganz ohne Indexverwaltung.

Alternativ mit Arrow Function (kürzere Schreibweise):

gemuese.forEach(element => print(element));

Wann `forEach()` verwenden?

✅ Vorteile:

Weniger Fehleranfällig (kein manuelles Zählen oder Indexvergleich)
Lesbarer und kürzerer Code
Perfekt für einfache Ausgaben oder Operationen auf jedem Element

⚠️ Beachte:
forEach() ist nicht abbrechbar – ein break oder return beendet nicht die gesamte Schleife wie bei for. Für Fälle mit Abbruchbedingung bleibt for oft die bessere Wahl.

Mehrdimensionale Arrays – Strukturen im Array

Mit einem mehrdimensionalen Array kannst du komplexere Datenstrukturen abbilden. Statt nur einer Liste mit Werten speicherst du darin Arrays innerhalb von Arrays – ähnlich wie bei einer Tabelle oder Matrix.

Das eignet sich besonders gut, wenn du Daten gruppieren möchtest – z. B. mehrere Räume in einer Wohnung, jeweils mit verschiedenen smarten Geräten.

let wohnung = [
  [
    "Wohnzimmer",
    ["Lampen", "Stehlampe", "Deckenlampe"],
    ["Sensoren", "Temperatursensor", "Bewegungssensor"],
    ["Aktoren", "Heizungsventil"]
  ],
  [
    "Küche",
    ["Lampen", "Deckenlampe"],
    ["Sensoren", "Temperatursensor"],
    ["Aktoren", "Kühlschrank-Steuerung"]
  ]
];

for (let i = 0; i < wohnung.length; i++) {
  print("Raum: " + wohnung[i][0]);
  for (let j = 1; j < wohnung[i].length; j++) {
    let gruppe = wohnung[i][j];
    print("  Gruppe: " + gruppe[0]);
    for (let k = 1; k < gruppe.length; k++) {
      print("    Gerät: " + gruppe[k]);
    }
  }
}

Hinweis: Da die Console lediglich die letzten 10 Einträge anzeigt, habe ich hier zu jsfiddle.net gewechselt. Zusätzlich habe ich für die kompatibilität die Funktion print implementiert, somit kann man den Code 1:1 übernehmen.

Shelly Scripting - Arrays - Mehrdimensionale Arrays - Ausgabe — Shelly Scripting – Arrays – Mehrdimensionale Arrays – Ausgabe

Werte in einem Array ersetzen

Ein Array ist veränderbar – du kannst also einzelne Werte gezielt austauschen, indem du einen neuen Wert an einer bestimmten Stelle (Index) zuweist.

Beispiel:

let gemuese = ["Tomate", "Gurke", "Paprika", "Karotte"];

gemuese[2] = "Kohlrabi";

➡️ Was passiert hier?
Das Element mit dem Index 2 (also der dritte Eintrag: "Paprika") wird durch "Kohlrabi" ersetzt.

Shelly Scripting - Arrays - Ersetzen von Elementen — Shelly Scripting – Arrays – Ersetzen von Elementen

💡 So kannst du gezielt Werte anpassen – etwa, wenn sich ein Sensorwert ändert oder ein Gerät ausgetauscht wurde.

Werte per Index hinzufügen

Wie gezeigt, kannst du mit gemuese[2] = "Kohlrabi" einen bestehenden Eintrag ersetzen.
Doch was passiert, wenn du einen Index verwendest, der noch nicht existiert?

Beispiel:

let gemuese = ["Tomate", "Gurke", "Paprika", "Karotte"];

gemuese[4] = "Brokkoli";

➡️ Ergebnis:
Der Eintrag "Brokkoli" wird an Position 4 eingefügt – das Array wächst automatisch.

Shelly Scripting - Arrays - Hinzufügen von Elementen — Shelly Scripting – Arrays – Hinzufügen von Elementen

⚠️ Achtung:
Wenn du z. B. gemuese[6] = "Spinat" schreibst, aber Index 5 leer lässt, wird dieser automatisch mit undefined gefüllt:

gemuese[6] = "Spinat";
print(gemuese);

Shelly Scripting - Arrays - Hinzufügen von Elementen Index übersprungen — Shelly Scripting – Arrays – Hinzufügen von Elementen Index übersprungen

💡 Daher sollte man bei nicht fortlaufender Indexvergabe aufpassen, um unerwartete Lücken im Array zu vermeiden.

Ausblick: So geht’s weiter

In diesem Beitrag hast du gelernt, wie Arrays aufgebaut sind, wie du auf ihre Elemente zugreifst und wie du sie mit Schleifen durchläufst. Damit hast du die wichtigsten Grundlagen in der Hand, um mit Arrays in Shelly Scripting oder JavaScript allgemein zu arbeiten.

Im nächsten Teil zeige ich dir, wie du Arrays aktiv bearbeitest:
🔹 Elemente hinzufügen (push, unshift)
🔹 Werte entfernen (pop, shift)
🔹 Inhalte gezielt ändern oder löschen mit splice()