Objekte in

Über Objekte

Erklärung

Neben primitiven Datentypen wie number und string gibt es in JavaScript noch einen weiteren wichtigen Datentyp: object. Objekte sind Sammlungen von Schlüssel-Wert-Paaren. Deshalb kannst du sie als das verwenden, was in anderen Sprachen oft Map oder Wörterbuch genannt wird.

In anderen Sprachen müssen alle Werte in einer Map oft denselben Datentyp haben. In JavaScript ist nur der Typ des Schlüssels eingeschränkt: Er muss ein String sein. Die Werte innerhalb eines Objekts können unterschiedliche Typen haben. Sie können primitive Typen wie Zahlen sein, aber auch Arrays, andere Objekte oder sogar Funktionen. Dadurch sind Objekte sehr vielseitig, und sie sind auch zentrale Bausteine für die objektorientierte Programmierung (OOP) in JavaScript.

Im Folgenden konzentrieren wir uns auf Objekte als Sammlungen oder Maps. Andere Anwendungsfälle von Objekten behandeln andere Konzepte, siehe zum Beispiel Klassen.

Ein Objekt erstellen

Ein Objekt-Literal erstellst du mit geschweiften Klammern. Du kannst auch direkt einige Einträge (Schlüssel-Wert-Paare) angeben. Dazu gibst du zuerst den Schlüssel an, gefolgt von einem Doppelpunkt und dem Wert.

const emptyObject = {};

const obj = {
  favoriteNumber: 42,
  greeting: 'Hello World',
  useGreeting: true,
  address: {
    street: 'Trincomalee Highway',
    city: 'Batticaloa',
  },
  fruits: ['melon', 'papaya'],
  addNumbers: function (a, b) {
    return a + b;
  },
};

Das abschließende Komma nach dem letzten Eintrag ist in JavaScript optional. Über die Vorteile kannst du hier lesen.

Vielleicht wunderst du dich, warum die Schlüssel nicht in Anführungszeichen stehen, obwohl sie doch Strings sein sollen. Das ist eine Kurzschreibweise. Wenn der Schlüssel den Namensregeln für einen JavaScript-Bezeichner folgt, kannst du die Anführungszeichen weglassen. Bei Schlüsseln mit Sonderzeichen im Namen musst du die übliche String-Schreibweise verwenden.

const obj = {
  '1keyStartsWithNumber': '...',
  'key/with/slashes': '...',
  'key-with-dashes': '...',
  'key with spaces': '...',
  '#&()[]{}èä樹keyWithSpecialChars': '...',
};

Oft möchtest du beim Deklarieren eines Objekts vorhandene Variablen einfügen. Das führt dann häufig zu Schlüssel-Wert-Paaren wie name: name. JavaScript bietet dafür eine Kurzschreibweise, bei der du einfach nur name schreibst. Es gibt auch eine Kurzschreibweise, um eine Funktion in einem Objekt zu definieren. Dabei kannst du den Doppelpunkt und das Schlüsselwort function weglassen.

const x = 1;
const y = 2;

const obj = {
  x: x,
  y: y,
  calcSum: function (a, b) {
    return a + b;
  },
};

// Can be shortened to ...
const obj = {
  x,
  y,
  calcSum(a, b) {
    return a + b;
  },
};

Wenn du ein Objekt-Literal mit einem Schlüsselnamen erstellen willst, der in einer Variablen gespeichert oder über einen Ausdruck berechnet wird, musst du die Variable oder den Ausdruck in eckige Klammern setzen.

const key = 'greeting';

const obj = {
  [key]: 'hello world',
};
console.log(obj);
// => { greeting: 'hello world' }

Einen Wert auslesen

Es gibt zwei Arten, den Wert für einen bestimmten Schlüssel auszulesen: die Punktnotation und die Klammernotation.

const obj = { greeting: 'hello world' };

obj.greeting;
// => hello world

obj['greeting'];
// => hello world

// Bracket notation also works with variables.
const key = 'greeting';
obj[key];
// => hello world

Die Punktnotation als Kurzform unterliegt derselben Einschränkung wie das Weglassen der Anführungszeichen. Sie funktioniert nur, wenn der Schlüssel den Namensregeln für Bezeichner folgt.

Wenn du versuchst, einen Schlüssel auszulesen, der im Objekt nicht existiert, gibt JavaScript undefined zurück. Mehr dazu findest du unter Null und Undefined.

Du kannst die Schlüssel aneinanderreihen, wenn du einen Wert aus einem verschachtelten Objekt auslesen willst.

const obj = {
  address: {
    street: 'Trincomalee Highway',
    city: 'Batticaloa',
  },
};

obj.address.city;
// => 'Batticaloa'

obj['address']['city'];
// => 'Batticaloa'

// Notations can also be mixed.
obj.address['city'];
// => 'Batticaloa'

Einen Wert hinzufügen oder ändern

Mit dem Zuweisungsoperator = kannst du einen Wert hinzufügen oder ändern. Auch hier stehen dir die Punkt- und die Klammernotation zur Verfügung.

const obj = { greeting: 'hello world' };

obj.greeting = 'Hi there!';
obj['greeting'] = 'Welcome.';

obj.newKey1 = 'new value 1';
obj['new key 2'] = 'new value 2';

const key = 'new key 3';
obj[key] = 'new value 3';

Einen Eintrag löschen

Mit dem Schlüsselwort delete kannst du ein Schlüssel-Wert-Paar aus einem Objekt löschen.

const obj = {
  key1: 'value1',
  key2: 'value2',
};

delete obj.key1;
delete obj['key2'];

Beachte: Auch wenn für nicht vorhandene Schlüssel undefined zurückgegeben wird, entfernt das Setzen eines Schlüssels auf undefined den Eintrag nicht. Verwende stattdessen immer delete.

Prüfen, ob ein Schlüssel existiert

Mit der Methode hasOwnProperty kannst du prüfen, ob ein bestimmter Schlüssel in einem Objekt existiert.

const obj = { greeting: 'hello world' };

obj.hasOwnProperty('greeting');
// => true

obj.hasOwnProperty('age');
// => false

Für geerbte Schlüssel gibt hasOwnProperty false zurück. Das ist meistens das gewünschte Verhalten. Wenn du geerbte Schlüssel in die Prüfung einbeziehen willst, kannst du stattdessen den in-Operator verwenden.

Ein Objekt durchlaufen

Es gibt eine spezielle for...in-Schleife, um über alle Schlüssel eines Objekts zu iterieren.

const obj = {
  name: 'Ali',
  age: 65,
};

for (let key in obj) {
  console.log(key, obj[key]);
}
// name Ali
// age 65

Es mag so aussehen, als würde for...in die Schlüssel immer in der Reihenfolge durchlaufen, in der sie erscheinen oder zum Objekt hinzugefügt wurden (Einfügereihenfolge). Verlass dich trotzdem nicht darauf, denn es gibt Sonderfälle, in denen die Reihenfolge von der Einfügereihenfolge abweicht. Schreib deinen Code immer so, als wäre die Reihenfolge beliebig. Wenn du eine verlässliche Reihenfolge brauchst, verwende statt eines Objekts eine Map oder ein verschachteltes [Array][concept-arrays].

Die for…in-Schleife birgt eine Tücke, wenn das Objekt geerbte Schlüssel hat. Diese werden von der for…in-Schleife ebenfalls durchlaufen. Das willst du meist vermeiden, also musst du sie überspringen, wie unten gezeigt.

for (let key in obj) {
  if (!obj.hasOwnProperty(key)) {
    continue;
  }
  // ...
}

JavaScript hat außerdem eine for...of-Schleife, zum Beispiel um über Arrays zu iterieren. Wichtig ist, dass for...in und for...of nicht austauschbar sind; Einzelheiten dazu findest du in der MDN-Dokumentation.

Schlüssel, Werte und Einträge

Das eingebaute Objekt Object bietet Hilfsmethoden, um alle Schlüssel, Werte oder Einträge eines Objekts als Arrays abzurufen.

const obj = {
  name: 'Ali',
  age: 65,
};

Object.keys(obj);
// => [ 'name', 'age' ]

Object.values(obj);
// => [ 'Ali', 65 ]

Object.entries(obj);
// => [ [ 'name', 'Ali' ], [ 'age', 65 ] ]

Ein wirklich leeres Objekt

Vielleicht ist dir aufgefallen, dass ein leeres Objekt in JavaScript nicht völlig leer ist. Es enthält zum Beispiel die Methode hasOwnProperty und andere Methoden wie toString. Normalerweise verursacht das keine Probleme, aber wenn du wirklich einmal ein leeres Objekt brauchst, verwende ein Null-Objekt, das du mit Object.create(null) erstellst.