JavaScript Objects

Objects speichern Daten mit Namen (Key-Value-Paare). Perfekt für zusammengehörige Informationen!

Was sind Objects?

Objects gruppieren zusammenhängende Daten:

Object Basics

// Ohne Object (unübersichtlich!)
const userName = 'Max';
const userAge = 25;
const userCity = 'Berlin';

// Mit Object (strukturiert!)
const user = {
    name: 'Max',
    age: 25,
    city: 'Berlin'
};

console.log(user);
console.log(user.name);  // Max
console.log(user.age);   // 25
console.log(user.city);  // Berlin

Eigenschaften:

✅ Key-Value-Paare
✅ Verschiedene Datentypen
✅ Verschachtelt möglich
✅ Methods (Funktionen in Objects)

Object erstellen

Object Creation

// Object Literal (am häufigsten)
const person = {
    name: 'Max',
    age: 25,
    city: 'Berlin'
};

// Leeres Object
const leer = {};

// Object Constructor (selten)
const obj = new Object();
obj.name = 'Max';

// Mit Variablen als Values
const name = 'Max';
const age = 25;
const person2 = {
    name: name,
    age: age
};

// Shorthand (gleichnamige Variables)
const person3 = {
    name,  // Statt name: name
    age    // Statt age: age
};

Properties (Eigenschaften)

Dot Notation - Zugriff mit Punkt

Dot Notation

const user = {
    name: 'Max',
    age: 25,
    email: 'max@example.com'
};

// Lesen
console.log(user.name);   // Max
console.log(user.age);    // 25
console.log(user.email);  // max@example.com

// Ändern
user.age = 26;
console.log(user.age);  // 26

// Hinzufügen
user.city = 'Berlin';
console.log(user.city);  // Berlin

Bracket Notation - Zugriff mit []

Bracket Notation

const user = {
    name: 'Max',
    age: 25,
    'favorite color': 'blue'  // Mit Leerzeichen
};

// Lesen
console.log(user['name']);  // Max
console.log(user['age']);   // 25

// Mit Variablen
const key = 'name';
console.log(user[key]);  // Max

// Property mit Leerzeichen
console.log(user['favorite color']);  // blue

// Dynamische Keys
const prop = 'age';
user[prop] = 30;
console.log(user.age);  // 30

Wann was?

Dot: Standard, lesbarer
Bracket: Dynamische Keys, Leerzeichen, Sonderzeichen

Properties hinzufügen & ändern

Add & Modify Properties

const user = {
    name: 'Max'
};

// Hinzufügen
user.age = 25;
user.city = 'Berlin';
user['email'] = 'max@example.com';

console.log(user);
// { name: 'Max', age: 25, city: 'Berlin', email: 'max@example.com' }

// Ändern
user.age = 26;
user['city'] = 'München';

console.log(user);
// { name: 'Max', age: 26, city: 'München', email: 'max@example.com' }

Properties löschen

Delete Properties

const user = {
    name: 'Max',
    age: 25,
    city: 'Berlin'
};

// Property löschen
delete user.age;
console.log(user);  // { name: 'Max', city: 'Berlin' }

// Prüfen ob Property existiert
console.log('age' in user);   // false
console.log('name' in user);  // true

Methods - Funktionen in Objects

Object Methods

const user = {
    name: 'Max',
    age: 25,

    // Method (Funktion im Object)
    greet: function() {
        console.log('Hallo, ich bin ' + this.name);
    },

    // Shorthand Syntax (modern)
    sayAge() {
        console.log('Ich bin ' + this.age + ' Jahre alt');
    },

    // Arrow Function (⚠️ kein eigenes this!)
    info: () => {
        console.log('User Info');
    }
};

// Methods aufrufen
user.greet();    // Hallo, ich bin Max
user.sayAge();   // Ich bin 25 Jahre alt
user.info();     // User Info

this - Auf eigene Properties zugreifen

this Keyword

const user = {
    name: 'Max',
    age: 25,

    // this referenziert das Object
    introduce() {
        console.log(`Ich bin ${this.name} und ${this.age} Jahre alt`);
    },

    haveBirthday() {
        this.age++;  // Eigene Property ändern
        console.log(`Jetzt ${this.age} Jahre alt!`);
    }
};

user.introduce();      // Ich bin Max und 25 Jahre alt
user.haveBirthday();   // Jetzt 26 Jahre alt!
console.log(user.age); // 26

// ⚠️ Arrow Functions haben kein eigenes this
const user2 = {
    name: 'Anna',
    greet: () => {
        console.log(this.name);  // undefined (this ist nicht user2)
    }
};

Verschachtelte Objects

Nested Objects

const user = {
    name: 'Max',
    age: 25,
    address: {
        street: 'Hauptstraße 1',
        city: 'Berlin',
        country: 'Deutschland',
        zipCode: '10115'
    },
    hobbies: ['Programmieren', 'Lesen', 'Sport']
};

// Zugriff auf verschachtelte Properties
console.log(user.address.city);     // Berlin
console.log(user.address.zipCode);  // 10115
console.log(user.hobbies[0]);       // Programmieren

// Ändern
user.address.city = 'München';
console.log(user.address.city);  // München

// Hinzufügen
user.address.phone = '0123456789';
console.log(user.address.phone);  // 0123456789

Object.keys() - Alle Keys

Object.keys()

const user = {
    name: 'Max',
    age: 25,
    city: 'Berlin'
};

// Array mit allen Keys
const keys = Object.keys(user);
console.log(keys);  // ['name', 'age', 'city']

// Über Keys iterieren
Object.keys(user).forEach(key => {
    console.log(`${key}: ${user[key]}`);
});
// name: Max
// age: 25
// city: Berlin

// Anzahl Properties
console.log(Object.keys(user).length);  // 3

Object.values() - Alle Werte

Object.values()

const user = {
    name: 'Max',
    age: 25,
    city: 'Berlin'
};

// Array mit allen Values
const values = Object.values(user);
console.log(values);  // ['Max', 25, 'Berlin']

// Summe aller Zahlen
const prices = {
    laptop: 999,
    mouse: 29,
    keyboard: 79
};

const total = Object.values(prices).reduce((sum, price) => sum + price, 0);
console.log(total);  // 1107

Object.entries() - Key-Value-Paare

Object.entries()

const user = {
    name: 'Max',
    age: 25,
    city: 'Berlin'
};

// Array mit [key, value] Paaren
const entries = Object.entries(user);
console.log(entries);
// [['name', 'Max'], ['age', 25], ['city', 'Berlin']]

// Mit for...of iterieren
for (const [key, value] of Object.entries(user)) {
    console.log(`${key}: ${value}`);
}
// name: Max
// age: 25
// city: Berlin

// Zu Object zurück
const obj = Object.fromEntries(entries);
console.log(obj);  // { name: 'Max', age: 25, city: 'Berlin' }

Object kopieren

Shallow Copy - Flache Kopie

Shallow Copy

const original = {
    name: 'Max',
    age: 25
};

// Mit Spread Operator
const copy1 = { ...original };
copy1.age = 30;
console.log(original.age);  // 25 (unverändert)
console.log(copy1.age);     // 30

// Mit Object.assign()
const copy2 = Object.assign({}, original);

// Problem bei verschachtelten Objects
const user = {
    name: 'Max',
    address: {
        city: 'Berlin'
    }
};

const copy3 = { ...user };
copy3.address.city = 'München';
console.log(user.address.city);  // München (auch geändert!)
// Nested Objects werden referenziert, nicht kopiert!

Deep Copy - Tiefe Kopie

Deep Copy

const user = {
    name: 'Max',
    address: {
        city: 'Berlin'
    }
};

// Deep Copy mit JSON (einfach, aber Limitations)
const copy = JSON.parse(JSON.stringify(user));
copy.address.city = 'München';
console.log(user.address.city);  // Berlin (unverändert!)
console.log(copy.address.city);  // München

// ⚠️ JSON verliert Functions, undefined, Dates
const obj = {
    name: 'Max',
    func: () => {},       // Wird entfernt
    date: new Date(),     // Wird zu String
    undef: undefined      // Wird entfernt
};

const jsonCopy = JSON.parse(JSON.stringify(obj));
console.log(jsonCopy);  // Nur name und date (als String)

Object Destructuring

const user = {
    name: 'Max',
    age: 25,
    city: 'Berlin'
};

// Destructuring
const { name, age, city } = user;
console.log(name);  // Max
console.log(age);   // 25
console.log(city);  // Berlin

// Umbenennen
const { name: userName, age: userAge } = user;
console.log(userName);  // Max
console.log(userAge);   // 25

// Default Values
const { name, country = 'Deutschland' } = user;
console.log(country);  // Deutschland (default)

// Nested Destructuring
const person = {
    name: 'Max',
    address: {
        city: 'Berlin',
        zip: '10115'
    }
};

const { name, address: { city, zip } } = person;
console.log(city);  // Berlin
console.log(zip);   // 10115

// In Function Parameters
function greet({ name, age }) {
    console.log(`Hallo ${name}, du bist ${age}`);
}

greet(user);  // Hallo Max, du bist 25

Spread Operator

const user = {
    name: 'Max',
    age: 25
};

// Object kopieren
const copy = { ...user };

// Properties hinzufügen
const extended = {
    ...user,
    city: 'Berlin',
    email: 'max@example.com'
};
console.log(extended);
// { name: 'Max', age: 25, city: 'Berlin', email: 'max@example.com' }

// Properties überschreiben
const updated = {
    ...user,
    age: 30  // Überschreibt age
};
console.log(updated);  // { name: 'Max', age: 30 }

// Objects zusammenführen
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const merged = { ...obj1, ...obj2 };
console.log(merged);  // { a: 1, b: 2, c: 3, d: 4 }

// Bei Konflikten gewinnt rechts
const obj3 = { a: 1, b: 2 };
const obj4 = { b: 3, c: 4 };
const result = { ...obj3, ...obj4 };
console.log(result);  // { a: 1, b: 3, c: 4 }

Optional Chaining (?.)

Optional Chaining

const user = {
    name: 'Max',
    address: {
        city: 'Berlin'
    }
};

// Ohne Optional Chaining
// console.log(user.contact.email);  // ❌ Error: Cannot read property 'email' of undefined

// Mit Optional Chaining
console.log(user.contact?.email);  // undefined (kein Error!)
console.log(user.address?.city);   // Berlin

// Bei Methods
const obj = {
    greet() {
        return 'Hallo';
    }
};

console.log(obj.greet?.());     // Hallo
console.log(obj.goodbye?.());   // undefined (kein Error)

// Verschachtelt
const data = {
    user: {
        profile: {
            name: 'Max'
        }
    }
};

console.log(data?.user?.profile?.name);  // Max
console.log(data?.user?.settings?.theme);  // undefined

Computed Property Names

Computed Properties

// Dynamische Property Names
const key = 'name';
const value = 'Max';

const obj = {
    [key]: value
};

console.log(obj);  // { name: 'Max' }

// Mit Expressions
const prefix = 'user';
const user = {
    [`${prefix}Name`]: 'Max',
    [`${prefix}Age`]: 25
};

console.log(user);  // { userName: 'Max', userAge: 25 }

// Praktisch für dynamische Objects
function createPerson(key, value) {
    return {
        [key]: value
    };
}

const person = createPerson('email', 'max@example.com');
console.log(person);  // { email: 'max@example.com' }

Object.freeze() & Object.seal()

Freeze & Seal

// Object.freeze() - Komplett unveränderbar
const frozen = Object.freeze({
    name: 'Max',
    age: 25
});

frozen.age = 30;        // ❌ Funktioniert nicht (strict mode: Error)
frozen.city = 'Berlin'; // ❌ Funktioniert nicht
delete frozen.name;     // ❌ Funktioniert nicht

console.log(frozen);  // { name: 'Max', age: 25 }

// Object.seal() - Keine neuen Properties, aber Werte ändern
const sealed = Object.seal({
    name: 'Max',
    age: 25
});

sealed.age = 30;        // ✅ Funktioniert
sealed.city = 'Berlin'; // ❌ Funktioniert nicht
delete sealed.name;     // ❌ Funktioniert nicht

console.log(sealed);  // { name: 'Max', age: 30 }

// Prüfen
console.log(Object.isFrozen(frozen));  // true
console.log(Object.isSealed(sealed));  // true

JSON - Daten-Austausch

JSON Methods

const user = {
    name: 'Max',
    age: 25,
    city: 'Berlin'
};

// Object zu JSON String
const jsonString = JSON.stringify(user);
console.log(jsonString);
// '{"name":"Max","age":25,"city":"Berlin"}'

// JSON String zu Object
const parsed = JSON.parse(jsonString);
console.log(parsed);  // { name: 'Max', age: 25, city: 'Berlin' }

// Mit Formatting (pretty print)
const formatted = JSON.stringify(user, null, 2);
console.log(formatted);
// {
//   "name": "Max",
//   "age": 25,
//   "city": "Berlin"
// }

// LocalStorage speichern
localStorage.setItem('user', JSON.stringify(user));

// Aus LocalStorage laden
const loaded = JSON.parse(localStorage.getItem('user'));
console.log(loaded);

Praktische Beispiele

Beispiel 1: User Management

User Object

const user = {
    firstName: 'Max',
    lastName: 'Müller',
    age: 25,
    email: 'max@example.com',
    address: {
        street: 'Hauptstraße 1',
        city: 'Berlin',
        zip: '10115'
    },

    getFullName() {
        return `${this.firstName} ${this.lastName}`;
    },

    isAdult() {
        return this.age >= 18;
    },

    getInfo() {
        return `${this.getFullName()}, ${this.age} Jahre, ${this.address.city}`;
    }
};

console.log(user.getFullName());  // Max Müller
console.log(user.isAdult());      // true
console.log(user.getInfo());      // Max Müller, 25 Jahre, Berlin

Beispiel 2: Shopping Cart

Shopping Cart

const cart = {
    items: [],

    addItem(product, quantity = 1) {
        this.items.push({ product, quantity });
    },

    removeItem(productName) {
        this.items = this.items.filter(item => item.product.name !== productName);
    },

    getTotal() {
        return this.items.reduce((sum, item) => {
            return sum + (item.product.price * item.quantity);
        }, 0);
    },

    getItemCount() {
        return this.items.reduce((count, item) => count + item.quantity, 0);
    }
};

// Nutzen
const laptop = { name: 'Laptop', price: 999 };
const mouse = { name: 'Mouse', price: 29 };

cart.addItem(laptop, 1);
cart.addItem(mouse, 2);

console.log(cart.getTotal());      // 1057
console.log(cart.getItemCount());  // 3
cart.removeItem('Mouse');
console.log(cart.getTotal());      // 999

Beispiel 3: Counter Object

Counter

const counter = {
    count: 0,

    increment() {
        this.count++;
        return this.count;
    },

    decrement() {
        this.count--;
        return this.count;
    },

    reset() {
        this.count = 0;
        return this.count;
    },

    getValue() {
        return this.count;
    }
};

console.log(counter.increment());  // 1
console.log(counter.increment());  // 2
console.log(counter.decrement());  // 1
console.log(counter.getValue());   // 1
console.log(counter.reset());      // 0

this Context Probleme

this Context

const user = {
    name: 'Max',

    greet() {
        console.log('Hallo ' + this.name);
    },

    delayedGreet() {
        // ❌ PROBLEM: this ist undefined in setTimeout
        setTimeout(function() {
            console.log('Hallo ' + this.name);  // undefined
        }, 1000);

        // ✅ LÖSUNG 1: Arrow Function
        setTimeout(() => {
            console.log('Hallo ' + this.name);  // Max
        }, 1000);

        // ✅ LÖSUNG 2: bind
        setTimeout(function() {
            console.log('Hallo ' + this.name);  // Max
        }.bind(this), 1000);

        // ✅ LÖSUNG 3: Variable
        const self = this;
        setTimeout(function() {
            console.log('Hallo ' + self.name);  // Max
        }, 1000);
    }
};

user.delayedGreet();

Best Practices

✅ DO:

Dot Notation wenn möglich
Shorthand für Methods
Destructuring für mehrere Properties
Spread für Kopien
Optional Chaining für unsichere Zugriffe

Good Practices

// ✅ Shorthand
const name = 'Max';
const age = 25;
const user = { name, age };

// ✅ Method Shorthand
const obj = {
    greet() {
        console.log('Hallo');
    }
};

// ✅ Destructuring
const { name, age } = user;

// ✅ Spread
const updated = { ...user, city: 'Berlin' };

// ✅ Optional Chaining
console.log(user?.address?.city);

❌ DON'T:

Nicht Arrow Functions für Methods (this!)
Nicht zu tief verschachteln
Nicht Properties dynamisch ändern (Typ-Konsistenz)

Anti-Patterns

// ❌ SCHLECHT: Arrow Function als Method
const obj = {
    name: 'Max',
    greet: () => {
        console.log(this.name);  // undefined!
    }
};

// ✅ BESSER: Normale Function
const obj2 = {
    name: 'Max',
    greet() {
        console.log(this.name);  // Max
    }
};

// ❌ SCHLECHT: Zu tief verschachtelt
const data = {
    user: {
        profile: {
            settings: {
                theme: {
                    color: 'blue'
                }
            }
        }
    }
};

// ✅ BESSER: Flache Struktur
const data2 = {
    userId: 1,
    themeColor: 'blue'
};

TipsAndTricks

⚡

Tipps & Tricks

Object Destructuring mit Renaming

Extrahiere Properties und benenne sie um:

const user = { name: 'Max', age: 25, email: 'max@test.com' };

// Normal
const { name, age } = user;

// Mit Umbenennung
const { name: userName, age: userAge } = user;
console.log(userName);  // 'Max'

// Mit Default Values
const { name, city = 'Berlin' } = user;
console.log(city);  // 'Berlin'

Spread Operator für Object Merge

Kombiniere Objects elegant:

const defaults = { theme: 'light', lang: 'de' };
const userSettings = { lang: 'en', fontSize: 14 };

// Merge (rechts überschreibt links)
const settings = { ...defaults, ...userSettings };
// { theme: 'light', lang: 'en', fontSize: 14 }

// Property überschreiben
const updated = { ...user, age: 26, city: 'Berlin' };

Computed Property Names

Erstelle Properties dynamisch:

const field = 'email';
const value = 'max@test.com';

// Dynamischer Key
const user = {
    name: 'Max',
    [field]: value  // email: 'max@test.com'
};

// Mit Expressions
const prefix = 'user';
const data = {
    [`${prefix}Name`]: 'Max',
    [`${prefix}Age`]: 25
};  // { userName: 'Max', userAge: 25 }

Optional Chaining für sichere Property-Zugriffe

Vermeide Fehler bei nested Objects:

const user = { address: { city: 'Berlin' } };

// ❌ Fehleranfällig
const zip = user.address.zipCode;  // undefined, OK
const phone = user.contact.phone;  // ❌ Error!

// ✅ Mit Optional Chaining
const zip = user?.address?.zipCode;    // undefined
const phone = user?.contact?.phone;    // undefined (kein Error!)

// Bei Methods
const greeting = user?.greet?.();  // undefined wenn greet nicht existiert

📝 Quiz

Was ist der Unterschied zwischen Object.keys() und Object.values()?

Kein Unterschiedkeys gibt Array mit Property-Namen, values gibt Array mit Wertenvalues ist schnellerkeys ist veraltet

📝 Quiz

Warum sollte man keine Arrow Functions für Object Methods nutzen?

Arrow Functions sind langsamerArrow Functions haben kein eigenes thisArrow Functions sind veraltetKein Problem

Übungsaufgaben

Aufgabe 1: Person Object

Erstelle Object mit:

firstName, lastName, age
Method getFullName()
Method isAdult()
Method introduce()

Aufgabe 2: Bank Account

Erstelle Account Object mit:

balance Property
deposit() Method
withdraw() Method
getBalance() Method

Aufgabe 3: Object Manipulation

Gegeben ein User-Object:

Füge neue Properties hinzu
Ändere bestehende
Iteriere über alle Properties
Erstelle Kopie

Aufgabe 4: Nested Objects

Erstelle Company Object mit:

Verschachtelten Abteilungen
Mitarbeiter-Arrays
Methods zum Hinzufügen/Finden

Nächste Schritte

Du kennst jetzt:

✅ Object Basics & Properties
✅ Methods & this
✅ Object.keys/values/entries
✅ Destructuring & Spread
✅ Optional Chaining
✅ JSON
✅ Freeze & Seal
✅ Best Practices

Als Nächstes lernst du:

DOM Manipulation (HTML mit JS ändern)
Events (Click, Input, etc.)
querySelector & addEventListener
Dynamischer Content

Weiter so! 🚀

JavaScript Objects - Objekte & Properties

JavaScript Objects

Was sind Objects?

Object erstellen

Properties (Eigenschaften)

Dot Notation - Zugriff mit Punkt

Bracket Notation - Zugriff mit []

Properties hinzufügen & ändern

Properties löschen

Methods - Funktionen in Objects

this - Auf eigene Properties zugreifen

Verschachtelte Objects

Object.keys() - Alle Keys

Object.values() - Alle Werte

Object.entries() - Key-Value-Paare

Object kopieren

Shallow Copy - Flache Kopie

Deep Copy - Tiefe Kopie

Object Destructuring

Spread Operator

Optional Chaining (?.)

Computed Property Names

Object.freeze() & Object.seal()

JSON - Daten-Austausch

Praktische Beispiele

Beispiel 1: User Management

Beispiel 2: Shopping Cart

Beispiel 3: Counter Object

this Context Probleme

Best Practices

✅ DO:

❌ DON'T:

TipsAndTricks

Tipps & Tricks

Object Destructuring mit Renaming

Spread Operator für Object Merge

Computed Property Names

Optional Chaining für sichere Property-Zugriffe

📝 Quiz

📝 Quiz

Übungsaufgaben

Nächste Schritte

Gut gemacht! 🎉

Artikel bewerten

Das könnte dich auch interessieren

JavaScript Grundlagen: Deine erste Programmierung

JavaScript Arrays - Listen & Array Methods

JavaScript Conditionals - if, else, switch