Objekte und JSON in JavaScript

Während Arrays geordnete Listen speichern, bündeln Objekte zusammengehörige Daten unter beschreibenden Namen. Sie sind in JavaScript allgegenwärtig. Eng damit verbunden ist JSON, das Standardformat für den Datenaustausch im Web. In diesem Beitrag lernst du, wie du Objekte erstellst, auf ihre Werte zugreifst und wie du sie in JSON umwandelst und zurück.

Was ist ein Objekt?

Ein Objekt speichert Daten als Paare aus Schlüssel und Wert. Der Schlüssel ist ein Name, über den du den Wert ansprichst. So beschreibst du zum Beispiel eine Person mit mehreren Eigenschaften.

const person = {
  name: "Mara",
  alter: 31,
  istEntwicklerin: true
};

console.log(person.name);  // Mara
console.log(person.alter); // 31

Hier sind name, alter und istEntwicklerin die Schlüssel (auch Eigenschaften genannt). Jeder hat einen passenden Wert.

Auf Eigenschaften zugreifen und sie ändern

Es gibt zwei Wege, um auf Werte zuzugreifen: die Punktschreibweise und die Klammerschreibweise. Du kannst Eigenschaften auch jederzeit ändern oder neue hinzufügen.

const auto = { marke: "VW", baujahr: 2020 };

// Lesen
console.log(auto.marke);       // Punktschreibweise
console.log(auto["baujahr"]);  // Klammerschreibweise

// Ändern und hinzufügen
auto.baujahr = 2021;
auto.farbe = "blau";
console.log(auto); // { marke: "VW", baujahr: 2021, farbe: "blau" }

Methoden: Funktionen in Objekten

Ein Objekt kann nicht nur Daten speichern, sondern auch Funktionen enthalten. Solche Funktionen nennt man Methoden. Mit dem Schlüsselwort this greifst du auf andere Eigenschaften desselben Objekts zu.

const konto = {
  inhaber: "Jonas",
  stand: 100,
  einzahlen(betrag) {
    this.stand += betrag;
    return this.stand;
  }
};

console.log(konto.einzahlen(50)); // 150

Verschachtelte Objekte

Objekte können andere Objekte und Arrays enthalten. So bildest du komplexe Strukturen ab, wie sie in echten Anwendungen vorkommen.

const nutzer = {
  name: "Sara",
  adresse: {
    stadt: "Berlin",
    plz: "10115"
  },
  hobbys: ["Lesen", "Coden"]
};

console.log(nutzer.adresse.stadt); // Berlin
console.log(nutzer.hobbys[1]);     // Coden

JSON: Objekte als Text

JSON steht für JavaScript Object Notation. Es ist ein Textformat, das Objekten sehr ähnelt und sich perfekt eignet, um Daten über das Netzwerk zu schicken. Mit zwei eingebauten Methoden wandelst du hin und her: JSON.stringify macht aus einem Objekt einen Text, JSON.parse macht aus einem Text wieder ein Objekt.

const buch = { titel: "JS lernen", seiten: 240 };

// Objekt zu JSON-Text
const text = JSON.stringify(buch);
console.log(text); // {"titel":"JS lernen","seiten":240}

// JSON-Text zurück zu Objekt
const wieder = JSON.parse(text);
console.log(wieder.titel); // JS lernen

Ein wichtiger Unterschied zu JavaScript-Objekten: In JSON müssen alle Schlüssel in doppelten Anführungszeichen stehen, und du darfst keine Funktionen oder Kommentare verwenden. Genau diese Einfachheit macht JSON so universell, dass es fast jede Programmiersprache versteht.

Fazit

Objekte sind das Werkzeug, um zusammengehörige Daten sauber zu strukturieren, inklusive Methoden, die mit diesen Daten arbeiten. JSON ist die textuelle Form, mit der du Objekte speichern oder zwischen Server und Browser austauschen kannst. Mit JSON.stringify und JSON.parse wechselst du mühelos zwischen beiden Welten. Diese Konzepte begegnen dir bei fast jeder API, daher lohnt es sich, sie früh zu üben.