Eigenschaft aus einem JavaScript-Objekt entfernen: 3 Ansätze und Fallstricke

„Die Eigenschaft ist verschwunden, das Objekt ist geblieben“: Wie entfernt man Unnötiges in JavaScript?

Stellen Sie sich vor: Sie arbeiten mit einem großen Objekt, das vom Server kommt. Es hat 20 Felder, aber für das Absenden eines Formulars werden nur 15 benötigt. Oder Sie schreiben eine Funktion, die Daten ohne das Dienstfeld _id zurückgeben soll. Was tun? Die beliebteste Frage zu diesem Thema auf Stack Overflow hat Hunderttausende von Aufrufen – und das nicht ohne Grund.

Das Entfernen einer Eigenschaft aus einem Objekt ist eine dieser Aufgaben, die trivial erscheint, aber einige Überraschungen birgt. In diesem Artikel analysieren wir alle grundlegenden Methoden, um eine Eigenschaft aus einem JavaScript-Objekt zu entfernen, vergleichen ihre Leistung und Mutabilität und finden heraus, welcher Ansatz im Jahr 2025 zu wählen ist.

Methode Nr. 1: Der delete-Operator – der Klassiker

Die naheliegendste und historisch erste Methode ist die Verwendung des delete-Operators. Er entfernt die Eigenschaft endgültig und unwiderruflich aus dem Objekt.

const user = {\n  name: 'Anna',\n  email: 'anna@example.com',\n  password: 'super_secret_123'\n};\n\ndelete user.password;\n\nconsole.log(user);\n// { name: 'Anna', email: 'anna@example.com' }\nconsole.log(user.password); // undefined\n

Wie funktioniert delete eigentlich?

Der delete-Operator weist nicht einfach undefined zu. Er entfernt die Eigenschaft vollständig aus dem Objekt. Sie können dies mit der Methode hasOwnProperty überprüfen:

const car = { brand: 'Tesla' };\nconsole.log(car.hasOwnProperty('brand')); // true\n\ndelete car.brand;\nconsole.log(car.hasOwnProperty('brand')); // false\n

Ein wichtiger Unterschied: Nach delete existiert die Eigenschaft nicht mehr. Bei der Iteration mit for...in oder Object.keys() wird sie nicht angezeigt.

Wann funktioniert delete nicht?

Es gibt einige „Fallstricke“:

\n
• Eigenschaften, die mit var/let/const deklariert wurden, können nicht entfernt werden. Der delete-Operator funktioniert nur mit Eigenschaften von Objekten.
\n
• Geerbte Eigenschaften aus dem Prototyp werden nicht entfernt – nur eigene.
\n
• Eigenschaften mit dem Flag configurable: false (z. B. bei eingebauten Objekten) werden nicht entfernt. Im strikten Modus führt dies zu einem Fehler.
\n

// Beispiel: Eigenschaft mit configurable: false\nconst obj = {};\nObject.defineProperty(obj, 'fixed', {\n  value: 42,\n  configurable: false\n});\n\ndelete obj.fixed; // false (nicht entfernt)\nconsole.log(obj.fixed); // 42\n

Methode Nr. 2: Destrukturierung und Rest-Operator – der moderne Ansatz

Wenn Sie mit immutablen Daten arbeiten (was in modernem JavaScript als guter Stil gilt), ist delete möglicherweise nicht die beste Wahl – es mutiert das ursprüngliche Objekt. Eine Alternative besteht darin, ein neues Objekt ohne die unnötige Eigenschaft mithilfe der Destrukturierung zu erstellen:

const user = {\n  name: 'Ivan',\n  email: 'ivan@example.com',\n  role: 'admin',\n  token: 'abc123'\n};\n\n// Entfernen des Feldes token durch Erstellen eines neuen Objekts\nconst { token, ...userWithoutToken } = user;\n\nconsole.log(userWithoutToken);\n// { name: 'Ivan', email: 'ivan@example.com', role: 'admin' }\nconsole.log(user.token); // 'abc123' – das ursprüngliche Objekt bleibt unberührt!\n

Dieser Ansatz ist besonders in der React-Entwicklung beliebt, wenn Sie nur einen Teil der Props an eine Komponente übergeben und Dienstfelder ausschließen möchten.

Vor- und Nachteile der Destrukturierung

\n
• + Immutabilität: Das ursprüngliche Objekt bleibt unverändert. Dies ist wichtig für Redux, Vuex und funktionale Programmierung.
\n
• + Lesbarkeit: Es ist klar ersichtlich, welche Felder wir ausschließen.
\n
• - Leistung: Es wird eine Kopie des Objekts erstellt, was bei großen Objekten aufwendig sein kann.
\n
• - Unbequem beim Entfernen vieler Eigenschaften: Wenn Sie 5 von 20 Feldern entfernen müssen,