JavaScript Objects
In JavaScript sind objects Container zum Speichern von Schlüsselsammlungen verschiedener Daten und komplexerer Entitäten – wie eine Box mit beschrifteten Fächern.
Einführung in JavaScript Objects
In JavaScript sind objects grundlegende Elemente, die beim Organisieren und Speichern von Daten helfen. Stell dir ein JavaScript object als eine besondere Box vor, in der du verschiedene Dinge aufbewahren kannst. Jedes Element in dieser Box wird in einem kleinen Fach mit einem Namen (dem Property-Namen) gespeichert, und das Element selbst ist der Wert. Im Gegensatz zu den primitiven Datentypen (wie Zahlen und Strings) ist ein object ein Referenztyp, der viele zusammengehörige Werte bündeln kann. Wenn wir zum Beispiel eine Box haben, die ein Buch repräsentiert, könnte sie Fächer mit den Bezeichnungen „Titel", „Autor" und „Seitenanzahl" enthalten, wobei jedes Fach die entsprechenden Informationen über das Buch enthält.
Objects erstellen
Mit Object-Literalen
Dies ist eine direkte Methode, bei der du das object und seine Properties mithilfe von geschweiften Klammern {} sofort definierst:
In diesem Beispiel ist user ein object mit zwei Properties: name und age. Du kannst sofort sehen, was das object enthält, was diese Methode sehr transparent und einfach zu verwenden macht.
Mit der new Object()-Syntax
Alternativ kannst du mit einem leeren object beginnen und dann Properties nacheinander hinzufügen:
Bei dieser Methode wird zunächst ein leeres object (user) erstellt und dann werden Properties (name und age) hinzugefügt. Das ist nützlich, wenn die Properties des objects von bedingter Logik abhängen oder wenn die Properties zur Laufzeit bestimmt werden.
Property- und Method-Kurzschreibweise
Wenn ein Variablenname mit dem gewünschten Property-Namen übereinstimmt, kannst du die Wiederholung mit der Property-Value-Kurzschreibweise vermeiden. Methods haben ebenfalls eine kürzere Syntax – du kannst den Teil : function weglassen:
name entspricht name: name, und greet() {} entspricht greet: function() {}. Beide Formen halten object-Literale kompakt.
Berechnete Property-Namen
Property-Namen müssen nicht fest kodiert sein. Wenn du einen Ausdruck in eckigen Klammern [...] im Literal einschließt, wird der Schlüssel zur Laufzeit berechnet:
Das ist besonders praktisch, wenn der Property-Name aus einer Benutzereingabe, einem Funktionsargument oder einer anderswo definierten Konstante stammt.
Verschachtelte Objects
Ein Property-Wert kann ein weiteres object sein, was dir erlaubt, strukturierte, hierarchische Daten abzubilden. Greife auf tief verschachtelte Werte zu, indem du Punkt- oder Klammernotation aneinanderreihst:
Jede Ebene ist wieder ein object, sodass dieselben Zugriffsregeln auf jeder Tiefe gelten.
Warum sind Objects wichtig?
Nachdem wir JavaScript objects eingeführt haben, fragst du dich vielleicht nach ihrer praktischen Bedeutung. Lass uns erkunden, warum das Beherrschen von JavaScript objects für jeden, der seinen Weg in der Webentwicklung beginnt, unerlässlich ist.
- Organisation: Objects helfen dir, zusammengehörige Daten zu bündeln, wodurch dein Code übersichtlicher und leichter verständlich wird. Anstatt viele separate Variablen zu haben, kannst du verwandte Daten in einem einzigen object gruppieren.
Dieses book-object hält alle zugehörigen Informationen über das Buch übersichtlich unter einer Variablen zusammen.
- Wiederverwendbarkeit: Wenn du einmal ein object erstellt hast, kannst du es überall in deinem Code wiederverwenden. Das vereinfacht die Verwaltung gemeinsamer Daten und Funktionalitäten.
Das user-object kann an verschiedene Funktionen wie displayUserInfo übergeben werden, ohne die Benutzerinformationen neu definieren zu müssen.
- Flexibilität: Objects in JavaScript sind sehr flexibel. Du kannst neue Properties hinzufügen, Werte bestehender Properties ändern oder Properties nach Bedarf löschen.
- Funktionalität: Objects können auch Funktionen enthalten. Diese Funktionen (als Methods bekannt) können Aktionen mit den im object gespeicherten Daten ausführen.
Das person-object hat eine greeting-Method, die ihre eigenen Daten verwendet, um eine Begrüßung zu erzeugen. Du fragst dich vielleicht, was das Schlüsselwort this in diesem Beispiel bedeutet – weitere Informationen findest du in unserem Artikel zum JavaScript this-Schlüsselwort.
- Prototypen: Jedes JavaScript object hat einen Prototypen. Ein Prototyp ist ein Vorlagen-object, von dem das object Methods und Properties erbt. Dies ermöglicht leistungsstarke Vererbungsmodelle.
Hier erbt dog von animal, sodass es Zugriff auf die in animal definierte Property isAlive hat, plus seine eigene bark-Method.
Properties aufrufen und ändern
Objects ermöglichen es dir, auf ihre Properties zuzugreifen und diese über Punkt- oder Klammernotation zu ändern.
Properties aufrufen
user.name greift mit der Punktnotation auf die Property name zu – das ist direkt und gut lesbar. user["age"] verwendet die Klammernotation, die praktisch ist, wenn der Property-Name in einer Variablen gespeichert ist oder kein gültiger Bezeichner ist.
Du kannst auch alle Schlüssel oder Werte eines objects mit Object.keys() und Object.values() abrufen:
Diese Methods sind nützlich, um über object-Properties zu iterieren oder sie in arrays umzuwandeln. Einen tieferen Einblick in das Extrahieren von Daten, einschließlich Object.entries(), findest du unter Object.keys, values, entries.
Prüfen, ob eine Property existiert
Um zu testen, ob eine Property vorhanden ist, verwende den in-Operator. Er ist zuverlässiger als der Vergleich mit undefined, da eine Property legitim den Wert undefined enthalten kann:
Der in-Operator gibt true zurück, wenn der Schlüssel vorhanden ist – selbst wenn sein Wert undefined ist. Die Prüfung === undefined kann eine fehlende Property nicht von einer unterscheiden, die explizit auf undefined gesetzt wurde.
Properties ändern
Du kannst auch die Properties eines objects ändern oder neue hinzufügen:
Das Beispiel zeigt das Hinzufügen einer neuen boolean-Property (isAdmin), das Ändern des Werts einer bestehenden Property (name) und das Löschen einer Property (age). Dies verdeutlicht die veränderliche Natur von JavaScript objects.
let vs. const mit Objects
Let
Die Verwendung von let erlaubt die Neuzuweisung des objects an ein neues object. Diese Flexibilität ist nützlich, wenn das gesamte object ersetzt werden muss.
Const
Mit const kannst du die Properties des objects ändern, aber kein neues object der Variablen zuweisen. Dadurch wird sichergestellt, dass die Referenz auf das object konstant bleibt.
Object-Destrukturierung und Rest-Operator
Destrukturierung
Die Destrukturierung ermöglicht es dir, Properties aus einem object in separate Variablen zu entpacken:
Diese Syntax extrahiert die Properties firstName, lastName und age aus dem person-object in einzelne Variablen und vereinfacht so den Zugriff auf diese Properties.
Rest-Operator
Der Rest-Operator (...) wird verwendet, um die verbleibenden Properties zu sammeln, die noch nicht entpackt wurden:
Nach dem Extrahieren von age sammelt der Rest-Operator die verbleibenden Properties in einem neuen object nameDetails, das nur firstName und lastName enthält.
Erweiterte Property-Attribute und Methods
Getter und Setter
Getter und Setter sind Funktionen, die steuern, wie du auf Properties eines objects zugreifst und diese setzt:
Die Property fullName wird durch einen Getter und einen Setter gesteuert. Der Getter gibt den vollständigen Namen zurück, indem er firstName und lastName kombiniert. Der Setter nimmt einen vollständigen Namen, teilt ihn in zwei Teile auf und weist sie firstName bzw. lastName zu.
Neben Gettern und Settern hat jede Property auch versteckte Attribute wie writable, enumerable und configurable. Wie du diese prüfst und feinjustierst, erfährst du unter Property flags and descriptors.
Fazit
JavaScript objects bieten eine strukturierte, effiziente und leistungsstarke Möglichkeit, Daten zu verwalten und zu bearbeiten – was für die Entwicklung interaktiver und dynamischer Webanwendungen unerlässlich ist. Zu verstehen, wie man objects effektiv einsetzt, ist entscheidend für jeden, der seine JavaScript-Kenntnisse vertiefen möchte.