Datenformate in JavaScript verstehen und richtig anwenden
Wer in JavaScript arbeitet, begegnet früher oder später einer Vielzahl von Datenformaten. Von einfachen Arrays bis hin zu komplexen Objekten, von modernen Maps und Sets bis zum allgegenwärtigen JSON. Ein tieferes Verständnis dieser Formate ist entscheidend für effizientes, wartbares und performantes Coding. In diesem Beitrag schauen wir uns die wichtigsten Formate im Detail an, beleuchten ihre Vor- und Nachteile und zeigen anhand praxisnaher Beispiele, wann welches Format am sinnvollsten ist.
Das klassische Objekt: Vielseitig, einfach strukturiert, aber nicht immer optimal
Das Objekt ist eines der grundlegendsten Datenformate in JavaScript. Es eignet sich hervorragend für die Darstellung strukturierter Daten mit benannten Eigenschaften.
const user = {
name: "Maria",
age: 28,
isAdmin: false
};
Ein Objekt ist flexibel und leicht zu lesen. Allerdings hat es einige Einschränkungen. Zum Beispiel können Schlüssel nur Strings oder Symbols sein. Auch die Reihenfolge der Eigenschaften ist nicht garantiert, was für gewisse Anwendungsfälle problematisch sein kann.
Für den schnellen Zugriff auf benannte Daten ist das Objekt trotzdem eine solide Wahl.
Arrays: Listenstruktur mit vielen Möglichkeiten
Arrays sind ideal, wenn es um geordnete Daten geht. In der Praxis nutzen Entwickler:innen Arrays für Listen, Reihenfolgen oder Sammlungen gleichartiger Elemente.
const fruits = ["Apple", "Banana", "Mango"];
Arrays bieten umfangreiche Methoden wie map(), filter() oder reduce(), die elegantes und deklaratives Arbeiten erlauben. Der Nachteil liegt in der Typfreiheit: Arrays können beliebige Datentypen enthalten, was bei fehlender Disziplin zu Fehlern führen kann.
JSON: Der Standard für den Datenaustausch
JSON (JavaScript Object Notation) ist das Format der Wahl, wenn es um API-Kommunikation, Speicherung oder Austausch strukturierter Daten geht.
const jsonString = '{"name":"Alex","age":35}';
const user = JSON.parse(jsonString);
JSON ist gut lesbar, kompakt und es wird von nahezu jeder Programmiersprache unterstützt. Es erlaubt allerdings keine Funktionen oder zirkulären Referenzen. Auch komplexere Objekte wie Map und Set lassen sich nicht direkt serialisieren. Sie werden ignoriert oder in leere Objekte umgewandelt. Date-Objekte werden automatisch in Strings konvertiert und verlieren dabei ihre Typinformation. Um solche Strukturen korrekt zu speichern und wiederherzustellen, ist eine eigene Logik notwendig.
Map: Moderne Alternative zum Objekt
Eine Map ist eine geordnete Sammlung von Schlüssel-Wert-Paaren, bei der die Schlüssel beliebige Datentypen sein dürfen.
const map = new Map();
map.set("name", "Lina");
map.set(42, "Antwort");
Map eignet sich hervorragend, wenn Performance beim Schreiben oder Lesen entscheidend ist oder wenn man Schlüssel braucht, die keine Strings sind. Der Zugriff ist klarer und expliziter. Die Iteration ist garantiert sortiert nach Einfüge-Reihenfolge. Im Unterschied zu Objekten hat Map jedoch keine Prototyp-Vererbung.
WeakMap: Schlüssel mit schwacher Referenz
Eine WeakMap ist ähnlich wie eine Map, erlaubt aber nur Objekte als Schlüssel. Diese Objekte sind „schwach referenziert“, d. h. sie verhindern nicht, dass der Garbage Collector sie entfernt. Sobald das Objekt nirgendwo mehr referenziert wird, kann es samt Eintrag in der WeakMap gelöscht werden.
let user = { name: "Anna" };
const wm = new WeakMap();
wm.set(user, "sensible Daten");
user = null; // Objekt kann jetzt vom Garbage Collector entfernt werden
WeakMap eignet sich besonders für private Daten oder Cache-Implementierungen, bei denen automatische Speicherbereinigung erwünscht ist. Sie ist nicht iterierbar und lässt sich nicht in JSON serialisieren.
Set: Einzigartige Werte ohne Duplikate
Ein Set speichert nur eindeutige Werte. Es ist besonders hilfreich, wenn Duplikate vermieden werden sollen, etwa beim Filtern oder beim Merging von Datenquellen.
const ids = new Set([1, 2, 3, 2]);
console.log(ids); // Set {1, 2, 3}
Ein Set hat zwar keine direkten Schlüssel, aber es bietet Methoden wie has(), add() oder delete(). Für Mengenoperationen ist es eine elegante und performante Lösung.
WeakSet: Objekte ohne Duplikate mit schwacher Bindung
Ein WeakSet funktioniert ähnlich wie ein normales Set, speichert aber ausschließlich Objekte und das ebenfalls mit schwacher Referenz.
let obj = { id: 1 };
const ws = new WeakSet();
ws.add(obj);
obj = null; // Objekt wird automatisch entfernt
Auch das WeakSet ist nicht iterierbar und eignet sich für temporäre Objektlisten, etwa zum Verfolgen, ob ein Objekt bereits bearbeitet wurde und das ohne das Risiko von Speicherlecks.
Fazit
Die Wahl des richtigen Datenformats in JavaScript hängt stark vom Einsatzzweck ab. Objekte und Arrays bleiben die Allrounder, während Map und Set moderne Alternativen für spezifischere Anforderungen darstellen. JSON ist aus der Kommunikation zwischen Frontend und Backend nicht mehr wegzudenken. Wer die Stärken und Schwächen kennt, kann bewusste Entscheidungen treffen und so robusteren, lesbareren Code schreiben.
FAQ: 10 häufige Fragen zu Datenformaten in JavaScript
1. Wie konvertiere ich ein Objekt in JSON?
Ein JavaScript-Objekt lässt sich mit JSON.stringify() in einen JSON-String umwandeln. Das ist besonders nützlich, wenn man Daten über eine Schnittstelle (API) senden oder lokal speichern möchte.
const obj = {name: "Tom"};
const json = JSON.stringify(obj); // => '{"name":"Tom"}'
2. Wie kann ich JSON wieder in ein Objekt umwandeln?
Mit JSON.parse() kannst du einen gültigen JSON-String wieder in ein JavaScript-Objekt zurückverwandeln.
const json = '{"name":"Tom"}';
const obj = JSON.parse(json);
console.log(obj.name); // "Tom"
3. Wann sollte ich eine Map statt eines Objekts verwenden?
Eine Map eignet sich, wenn du Schlüssel brauchst, die keine Strings sind, oder wenn du gezielt auf die Einfüge-Reihenfolge achten möchtest. Auch wenn du viele Einträge hast, ist die Performance von Map beim Lesen und Schreiben meist besser.
const map = new Map();
map.set(true, "yes");
map.set(42, "answer");
4. Wie entferne ich Duplikate aus einem Array?
Ein häufiger Anwendungsfall: Du hast ein Array mit Duplikaten und willst nur eindeutige Werte behalten. Das geht elegant mit Set:
const nums = [1, 2, 2, 3];
const unique = [...new Set(nums)];
console.log(unique); // [1, 2, 3]
5. Kann ein Set Objekte enthalten?
Ja, aber Achtung: Zwei Objekte mit gleichem Inhalt gelten als unterschiedliche Werte, wenn sie nicht referenzgleich sind.
const obj1 = {};
const obj2 = {};
const set = new Set([obj1, obj2]);
console.log(set.size); // 2
6. Was passiert, wenn ich eine Funktion in JSON speichere?
Funktionen werden beim Serialisieren mit JSON.stringify() einfach ignoriert. Das liegt daran, dass JSON nur Daten, aber keine Logik transportieren soll.
const obj = {
name: "Nina",
greet: () => "Hallo"
};
console.log(JSON.stringify(obj)); // {"name":"Nina"}
7. Wie iteriere ich über eine Map?
Maps lassen sich sehr elegant mit einer for...of-Schleife über ihre Einträge (key-value-Paare) durchlaufen.
const map = new Map([["a", 1], ["b", 2]]);
for (const [key, value] of map) {
console.log(`${key}: ${value}`);
}
8. Kann ich ein Set in ein Array umwandeln?
Ja, mit dem Spread-Operator oder Array.from():
const set = new Set(["JS", "TS"]);
const arr1 = [...set];
console.log(arr1); // ["JS", "TS"]
const arr2 = Array.from(set);
console.log(arr2);
9. Gibt es eine Möglichkeit, JSON mit Pretty-Print auszugeben?
Ja, JSON.stringify() akzeptiert zusätzliche Parameter für Einrückung:
const obj = {name: "Eva", age: 30};
console.log(JSON.stringify(obj, null, 2));
Das Ergebnis ist ein lesbarer, formatierter JSON-String.
10. Wie prüfe ich, ob ein Wert ein Array ist?
Verwende Array.isArray(), um sicher festzustellen, ob ein Wert ein echtes Array ist:
console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray("[1,2,3]")); // false
Das ist deutlich zuverlässiger als der Vergleich mit typeof, denn typeof [] ergibt “object”.
Buy me a coffee
Wenn Dir meine Beiträge gefallen und sie Dir bei Deiner Arbeit helfen, würde ich mich über einen “Kaffee” und ein paar nette Worte von Dir freuen.