JavaScript Arrays & Objekte

6 Kernkonzepte

Die wichtigsten Konzepte für Arrays und Objekte in JavaScript: Array · Object · map() / filter() / reduce() · forEach() · Spread Operator · Destructuring Arrays und Objekte sind die zentralen Datenstrukturen in JavaScript. Sie bilden die Grundlage für die moderne Webentwicklung und Datenverarbeitung.

Arrays – Geordnete Sammlungen

[ ] · length · push() · pop()

fruits = ["Apfel", "Banane", "Kirsche"] fruits[0] // "Apfel" fruits.length // 3 fruits.push("Orange") // 4

Arrays sind geordnete, veränderbare Listen, die beliebige Datentypen enthalten können. Sie sind nullbasiert und bieten viele Methoden zur Manipulation.

Wichtige Array-Methoden

Methode	Beschreibung
push(element)	Fügt Element am Ende hinzu
pop()	Entfernt und gibt letztes Element zurück
unshift(element)	Fügt Element am Anfang hinzu
shift()	Entfernt und gibt erstes Element zurück
splice(index, deleteCount)	Entfernt oder ersetzt Elemente
slice(start, end)	Erzeugt Kopie eines Teils
indexOf(element)	Findet Position (oder -1)
includes(element)	Prüft auf Enthaltensein (true/false)
concat(array)	Verkettet Arrays
join(separator)	Verbinder Elemente zu String

Beispiele

zahlen = [1, 2, 3, 4, 5]

zahlen.push(6) // [1, 2, 3, 4, 5, 6]

let letztes = zahlen.pop() // 6, zahlen = [1, 2, 3, 4, 5]

zahlen.unshift(0) // [0, 1, 2, 3, 4, 5]

let ersetzt = zahlen.splice(2, 1, 99) // [2] → [0, 1, 99, 3, 4, 5]

let kopie = zahlen.slice(1, 3) // [1, 99]

let alsString = zahlen.join(", ") // "0, 1, 99, 3, 4, 5"

Tipp: push() und pop() arbeiten am Ende des Arrays (effizient), unshift() und shift() am Anfang (langsamer bei großen Arrays).

Objekte – Schlüssel-Wert-Paare

{ } · dot notation · bracket notation

person = { name: "Anna", age: 30 } person.name // "Anna" person["age"] // 30 person.email = "anna@test.de" // Neues Property

Objekte sind Sammlungen von Schlüssel-Wert-Paaren. Sie werden verwendet, um zusammengehörige Daten zu strukturieren und sind die Basis für fast alles in JavaScript.

Wichtige Objekt-Operationen

Operation	Beschreibung
obj.key	Zugriff mit Dot-Notation (Property-Name muss gültig sein)
obj["key"]	Zugriff mit Bracket-Notation (dynamisch)
obj.key = wert	Property setzen oder neu anlegen
delete obj.key	Property löschen
'key' in obj	Prüft, ob Property existiert
Object.keys(obj)	Array aller Schlüssel
Object.values(obj)	Array aller Werte
Object.entries(obj)	Array von [key, value]-Paaren

Beispiele

user = { id: 1, name: "Max", active: true }

console.log(user.name) // "Max"

console.log(user["active"]) // true

user.email = "max@example.com" // Hinzufügen

console.log('email' in user) // true

console.log(Object.keys(user)) // ["id", "name", "active", "email"]

console.log(Object.values(user)) // [1, "Max", true, "max@example.com"]

// Iteration über Objekt

for (const [key, value] of Object.entries(user)) {

console.log(`${key}: ${value}`)

}

Tipp: Verwenden Sie Bracket-Notation obj["key"], wenn der Schlüssel dynamisch ist oder ungültige Zeichen enthält (z.B. Leerzeichen).

Array-Methoden – forEach, map, filter, reduce

forEach() · map() · filter() · reduce()

arr.forEach(item => console.log(item)) arr.map(n => n * 2) arr.filter(n => n > 5) arr.reduce((sum, n) => sum + n, 0)

Höhere Array-Methoden sind die moderne Art, Arrays zu verarbeiten. Sie sind funktional, lesbar und vermeiden Seiteneffekte.

Übersicht der Methoden

Methode	Beschreibung	Rückgabe
forEach(callback)	Führt Callback für jedes Element aus	undefined
map(callback)	Transformiert jedes Element	Neues Array
filter(callback)	Selektiert Elemente nach Bedingung	Neues Array
reduce(callback, init)	Reduziert Array auf einen Wert	Einzelner Wert
some(callback)	Prüft, ob mindestens eins zutrifft	boolean
every(callback)	Prüft, ob alle zutreffen	boolean
find(callback)	Findet erstes passendes Element	Element oder undefined
sort(callback)	Sortiert Array (in-place)	Das Array

Beispiele

const zahlen = [1, 2, 3, 4, 5]

// forEach – Iteration ohne Rückgabe

zahlen.forEach(n => console.log(n))

// map – Transformiert jedes Element

const quadrate = zahlen.map(n => n ** 2) // [1, 4, 9, 16, 25]

// filter – Selektiert Elemente

const gerade = zahlen.filter(n => n % 2 === 0) // [2, 4]

// reduce – Summiert alle Elemente

const summe = zahlen.reduce((acc, n) => acc + n, 0) // 15

// Chaining (Verkettung)

const ergebnis = zahlen

.filter(n => n % 2 === 0)

.map(n => n * 3)

.reduce((acc, n) => acc + n, 0) // 2*3 + 4*3 = 18

Tipp: map(), filter() und reduce() erzeugen neue Arrays/Werte – sie verändern das Original nicht (immutable). Das ist sicherer und vorhersehbarer.

Spread & Rest – ... für Arrays und Objekte

...array · ...object · ...rest

const neu = [...alt, 4] // Array kopieren + hinzufügen const kopie = { ...obj } // Objekt kopieren (flach) function sum(...zahlen) { } // Rest-Parameter

Spread (...) erweitert Arrays/Objekte an Stellen, wo mehrere Elemente/Properties erwartet werden. Rest sammelt übrige Argumente.

Beispiele

// Spread bei Arrays

const a = [1, 2]

const b = [3, 4]

const kombiniert = [...a, ...b] // [1, 2, 3, 4]

const kopie = [...a] // [1, 2] (Kopie!)

// Spread bei Objekten

const person = { name: "Anna", age: 30 }

const details = { ...person, city: "Berlin" } // { name: "Anna", age: 30, city: "Berlin" }

// Rest-Parameter in Funktionen

function sum(...zahlen) {

return zahlen.reduce((acc, n) => acc + n, 0)

}

console.log(sum(1, 2, 3)) // 6

// Rest bei Destructuring

const [first, ...rest] = [10, 20, 30, 40]

console.log(first) // 10

console.log(rest) // [20, 30, 40]

Tipp: Spread erzeugt eine flache Kopie – bei verschachtelten Strukturen werden nur die oberste Ebene kopiert. Für tiefe Kopien verwenden Sie JSON.parse(JSON.stringify(obj)) oder structuredClone().

Destructuring – Praktisches Auspacken

[a, b] = array · {x, y} = object

const [a, b] = [1, 2] // a=1, b=2 const { name, age } = person // Variablen aus Objekt const { name: n } = person // Alias verwenden

Destructuring entpackt Werte aus Arrays oder Objekten in separate Variablen – das macht den Code kürzer und lesbarer.

Beispiele

// Array-Destructuring

const [a, b, c] = [1, 2, 3]

console.log(a, b, c) // 1 2 3

// Standardwerte

const [x, y = 5] = [1] // x=1, y=5

// Objekt-Destructuring

const person = { name: "Anna", age: 30, city: "Berlin" }

const { name, age } = person

console.log(name, age) // "Anna" 30

// Alias (umbenennen)

const { name: username, city: ort } = person

console.log(username, ort) // "Anna" "Berlin"

// Verschachteltes Destructuring

const data = { user: { id: 1, name: "Max" } }

const { user: { id, name } } = data

console.log(id, name) // 1 "Max"

// Destructuring in Funktionsparametern

function printUser({ name, age }) {

console.log(`${name} ist ${age} Jahre alt`)

}

printUser(person) // "Anna ist 30 Jahre alt"

Tipp: Destructuring ist besonders nützlich in Funktionsparametern, um nur benötigte Eigenschaften aus Objekten zu extrahieren – das macht den Code sauberer und reduziert Wiederholungen.

JavaScript Arrays & Objekte im Überblick

[] Array – geordnete Liste
push(), pop(), map()

{} Objekt – Schlüssel-Wert-Paare
Dot-Notation, Bracket-Notation

map() Transformiert Array
Gibt neues Array zurück

filter() Filtert Array
Gibt neues Array zurück

... Spread / Rest
Kopieren, Zusammenfügen

{} Destructuring
Auspacken von Werten

Quick Summary

[]

Array

{}

Objekt

push()

Hinzufügen

map()

Transformieren

...

Spread

{ }

Destructuring

arr.map(n => n * 2) · arr.filter(n => n > 5) · const { name } = person · [...arr, 4]