JavaScript 6 — Arrays & Objekte

In dieser Lektion lernst du, wie JavaScript mit Sammlungen von Daten arbeitet. Arrays und Objekte sind die wichtigsten Datenstrukturen in JavaScript und bilden die Grundlage für fast alle realen Anwendungen — von To-Do-Listen bis zu komplexen Web-Apps.

1. Warum Arrays und Objekte?

Definition.
Arrays und Objekte erlauben es, mehrere zusammengehörige Werte strukturiert zu speichern und gemeinsam zu verarbeiten.

Ohne diese Strukturen müsste man viele einzelne Variablen verwalten: 

// schlecht skalierbar
let name1 = "Iman";
let name2 = "Ali";
let name3 = "Sara";

Mit Arrays und Objekten wird derselbe Inhalt übersichtlich und erweiterbar: 

const names = ["Iman", "Ali", "Sara"];

2. Arrays — geordnete Listen

Ein Array ist eine geordnete Liste von Werten. Jeder Eintrag besitzt einen numerischen Index (beginnend bei 0). 
const fruits = ["Apfel", "Banane", "Orange"];

2.1 Zugriff auf Array-Elemente

fruits[0]; // "Apfel"
fruits[1]; // "Banane"
Der erste Index ist immer 0, nicht 1.

2.2 Länge eines Arrays

fruits.length; // 3

3. Arrays verändern

Arrays können dynamisch verändert werden: Elemente können hinzugefügt oder entfernt werden.

3.1 Elemente hinzufügen

fruits.push("Mango");     // am Ende
fruits.unshift("Birne"); // am Anfang

3.2 Elemente entfernen

fruits.pop();   // letztes Element
fruits.shift(); // erstes Element
Diese Methoden verändern das ursprüngliche Array.

4. Über Arrays iterieren

Arrays werden häufig mit Schleifen oder speziellen Array-Methoden durchlaufen.

4.1 for-Schleife

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

4.2 for...of

for (const fruit of fruits) {
  console.log(fruit);
}
for...of ist meist lesbarer als eine klassische for-Schleife.

5. Wichtige Array-Methoden

JavaScript bietet mächtige Methoden, um Arrays funktional zu verarbeiten.

5.1 map

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);
// [2, 4, 6]

5.2 filter

const even = numbers.filter(n => n % 2 === 0);
// [2]

5.3 reduce

const sum = numbers.reduce((acc, n) => acc + n, 0);
// 6
Diese Methoden erzeugen neue Arrays/Werte und verändern das Original nicht.

6. Objekte — strukturierte Daten

Ein Objekt ist eine Sammlung von Schlüssel–Wert-Paaren. 
const user = {
  name: "Iman",
  age: 22,
  isStudent: true
};

6.1 Zugriff auf Eigenschaften

user.name;      // "Iman"
user["age"];    // 22
Die Punktnotation ist Standard, die eckige Klammer ist nützlich bei dynamischen Schlüsseln.

6.2 Eigenschaften ändern und hinzufügen

user.age = 23;
user.city = "Stuttgart";

7. Objekte mit Methoden

Objekte können auch Funktionen enthalten. Diese nennt man Methoden. 
const user = {
  name: "Iman",
  greet() {
    console.log("Hallo, ich bin " + this.name);
  }
};

user.greet();
this verweist hier auf das Objekt selbst.

8. Arrays von Objekten

In realen Anwendungen arbeitet man häufig mit Arrays von Objekten. 
const users = [
  { name: "Iman", age: 22 },
  { name: "Ali", age: 24 },
  { name: "Sara", age: 20 }
];

8.1 Kombination mit map/filter

const names = users.map(u => u.name);
// ["Iman", "Ali", "Sara"]

const adults = users.filter(u => u.age >= 21);
// [{ name: "Iman", age: 22 }, { name: "Ali", age: 24 }]

9. Referenzen vs. Kopien

Arrays und Objekte werden in JavaScript per Referenz gespeichert. 
const a = { value: 10 };
const b = a;

b.value = 20;
console.log(a.value); // 20
Das ist eine häufige Fehlerquelle. Kopien müssen explizit erzeugt werden.

9.1 Flache Kopien

const copy = { ...a };
const arrCopy = [...numbers];

10. Gute Praxis

Gut: 
const updatedUsers = users.map(u =>
  u.name === "Iman" ? { ...u, age: 23 } : u
);

11. Übungen

Übung 1.
Erstelle ein Array mit fünf Zahlen und berechne deren Summe mit reduce.
Übung 2.
Erstelle ein Objekt für ein Buch (Titel, Autor, Jahr) und gib eine Beschreibung in der Konsole aus.
Übung 3.
Arbeite mit einem Array von Objekten (Name, Punktzahl) und filtere alle Einträge mit mehr als 50 Punkten.

12. Zusammenfassung

Wer Arrays und Objekte versteht, versteht das Datenmodell von JavaScript.