Supprimer une propriété d'un objet JavaScript : 3 approches et pièges à éviter

« La propriété a disparu, mais l'objet est resté » : comment supprimer l'inutile en JavaScript ?

Imaginez la situation : vous travaillez avec un gros objet provenant du serveur. Il contient 20 champs, mais pour envoyer un formulaire, vous n'avez besoin que de 15. Ou vous écrivez une fonction qui doit retourner des données sans le champ interne _id. Que faire ? La question la plus populaire sur Stack Overflow à ce sujet a recueilli des centaines de milliers de vues — et ce n'est pas un hasard.

Supprimer une propriété d'un objet est l'une de ces tâches qui semblent triviales, mais qui cachent plusieurs surprises. Dans cet article, nous allons passer en revue toutes les principales façons de supprimer une propriété d'un objet en JavaScript, comparer leurs performances et leur mutabilité, et déterminer quelle approche choisir en 2025.

Méthode n°1 : L'opérateur delete — le classique du genre

La façon la plus évidente et historiquement la première est d'utiliser l'opérateur delete. Il supprime définitivement et irrévocablement la propriété de l'objet.

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

Comment fonctionne delete en réalité ?

L'opérateur delete ne se contente pas d'assigner undefined. Il supprime complètement la propriété de l'objet. Vous pouvez le vérifier avec la méthode hasOwnProperty :

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

Une différence importante : après delete, la propriété cesse d'exister. Lors de l'itération avec for...in ou Object.keys(), elle n'apparaîtra pas.

Quand delete ne fonctionne-t-il pas ?

Il y a plusieurs « pièges » :

\n
• Impossible de supprimer les propriétés déclarées avec var/let/const. L'opérateur delete ne fonctionne qu'avec les propriétés des objets.
\n
• Les propriétés héritées du prototype ne sont pas supprimées — seules les propriétés propres.
\n
• Les propriétés avec le flag configurable: false (par exemple, celles des objets natifs) ne sont pas supprimées. En mode strict, cela provoquera une erreur.
\n

// Exemple : propriété avec configurable: false\nconst obj = {};\nObject.defineProperty(obj, 'fixed', {\n  value: 42,\n  configurable: false\n});\n\ndelete obj.fixed; // false (non supprimé)\nconsole.log(obj.fixed); // 42\n

Méthode n°2 : La déstructuration et l'opérateur rest — une approche moderne

Si vous travaillez avec des données immuables (et en JavaScript moderne, c'est considéré comme une bonne pratique), alors delete n'est peut-être pas le meilleur choix — il mute l'objet d'origine. L'alternative est de créer un nouvel objet sans la propriété indésirable à l'aide de la déstructuration :

const user = {\n  name: 'Ivan',\n  email: 'ivan@example.com',\n  role: 'admin',\n  token: 'abc123'\n};\n\n// Supprimer le champ token en créant un nouvel objet\nconst { token, ...userWithoutToken } = user;\n\nconsole.log(userWithoutToken);\n// { name: 'Ivan', email: 'ivan@example.com', role: 'admin' }\nconsole.log(user.token); // 'abc123' — l'objet d'origine est intact !\n

Cette approche est particulièrement populaire dans le développement React, lorsqu'il faut transmettre à un composant seulement une partie des props, en excluant les champs internes.

Avantages et inconvénients de la déstructuration

\n
• + Immuabilité : l'objet d'origine reste inchangé. C'est important pour Redux, Vuex et la programmation fonctionnelle.
\n
• + Lisibilité : on voit clairement quels champs nous excluons.
\n
• - Performance : une copie de l'objet est créée, ce qui peut être coûteux pour les gros objets.
\n
• - Peu pratique pour supprimer plusieurs propriétés : si vous devez enlever 5 champs sur 20,