Supprimer un élément de tableau JS - La bonne méthode ?

Supprimer un élément d’un tableau en JavaScript paraît banal, mais le bon choix dépend presque toujours du contexte: index connu, valeur connue, besoin de conserver le tableau d’origine ou non. Dans un front-end moderne, cette différence compte vite, parce qu’elle influence la lisibilité, la stabilité de l’état et parfois même les performances. Je vais donc aller droit au but avec les méthodes qui servent vraiment, les cas où elles sont pertinentes et les pièges que je vois le plus souvent en développement web.

Supprimer un élément à partir de son index

Quand vous connaissez déjà la position de l’élément, `splice()` reste la méthode la plus directe. Elle supprime à partir d’un index donné, modifie le tableau en place et renvoie un tableau contenant les éléments retirés.

const users = ["Ada", "Linus", "Grace", "Edsger"];

// Supprime un seul élément à l’index 2
const removed = users.splice(2, 1);

console.log(users);   // ["Ada", "Linus", "Edsger"]
console.log(removed); // ["Grace"]

Le deuxième paramètre, deleteCount, est important. Si vous mettez 1, vous retirez un seul élément. Si vous l’omettez, splice() supprime tout ce qui suit l’index de départ, ce qui est rarement ce qu’on veut dans un simple cas de suppression.

const items = [10, 20, 30, 40];
items.splice(1); // retire 20, 30 et 40

Le cas classique, c’est d’utiliser findIndex() pour repérer un élément puis splice() pour le supprimer. Là, je conseille une vérification systématique de -1, sinon vous risquez de retirer le dernier élément par erreur.

const products = [
  { id: 1, name: "Clavier" },
  { id: 2, name: "Souris" },
  { id: 3, name: "Écran" }
];

const index = products.findIndex(product => product.id === 2);

if (index !== -1) {
  products.splice(index, 1);
}

Cette approche est simple, lisible et très pratique dans les listes administratives ou les tableaux de données. Dès qu’on ne travaille plus avec un index stable, il faut cependant passer à une logique différente.

Retirer le premier ou le dernier élément sans surcharger le code

Si l’élément à supprimer est toujours au début ou à la fin, il n’y a aucune raison de compliquer le code. `pop()` retire le dernier élément, `shift()` retire le premier. Les deux modifient le tableau d’origine et renvoient la valeur supprimée.

const queue = ["ticket-1", "ticket-2", "ticket-3"];

const first = queue.shift(); // "ticket-1"
const last = queue.pop();    // "ticket-3"

console.log(queue); // ["ticket-2"]

Je fais une réserve sur shift() quand les tableaux sont gros et que la suppression en tête est répétée. Le moteur doit réindexer les éléments restants, donc le coût n’est pas neutre. Pour de petites listes, ce n’est pas un sujet; pour une file très active, il faut parfois penser autrement, par exemple avec une structure de file plus adaptée.

Quand le point de suppression n’est pas une extrémité, il faut viser la valeur elle-même plutôt que la position.

Supprimer par valeur quand on ne connaît pas l’index

Dans beaucoup d’interfaces, on veut supprimer un élément identifié par son contenu: un identifiant, un nom, un statut. Dans ce cas, `filter()` est souvent la meilleure solution, parce qu’elle construit un nouveau tableau en gardant uniquement les éléments souhaités.

const ids = [10, 20, 30, 20];

// Supprime toutes les occurrences de 20
const without20 = ids.filter(id => id !== 20);

console.log(without20); // [10, 30]

Le point clé ici, c’est que filter() supprime toutes les valeurs qui correspondent à la condition. C’est parfait si vous voulez éliminer un doublon ou une catégorie entière, mais pas si vous cherchez à retirer une seule occurrence précise parmi plusieurs identiques.

Dans ce cas, je préfère combiner findIndex() avec splice() ou toSpliced(). On trouve la première occurrence, puis on retire une seule case.

const tags = ["tech", "ai", "cloud", "ai"];

const index = tags.findIndex(tag => tag === "ai");

if (index !== -1) {
  tags.splice(index, 1);
}

console.log(tags); // ["tech", "cloud", "ai"]

Avec des objets, il faut comparer une propriété métier, pas l’objet entier. Deux objets qui se ressemblent visuellement restent deux références différentes. C’est une erreur fréquente quand on manipule des listes d’utilisateurs, de messages ou de paniers d’achat.

const cart = [
  { id: 1, label: "SSD" },
  { id: 2, label: "RAM" },
  { id: 3, label: "GPU" }
];

const nextCart = cart.filter(item => item.id !== 2);

Quand on doit conserver l’array initial intact, cette approche devient vite plus propre que la mutation directe. C’est justement ce choix entre copie et mutation qui mérite un arbitrage clair.

Choisir entre méthode mutante et version immuable

En pratique, le vrai sujet n’est pas seulement de supprimer un élément: c’est de savoir si vous acceptez de modifier le tableau d’origine. Dans un script court, la mutation est souvent la solution la plus simple. Dans un composant React, un reducer ou une logique d’état partagée, je privilégie presque toujours une version immuable.

const list = ["a", "b", "c", "d"];

// Version immuable
const nextList = list.toSpliced(1, 1);

console.log(list);     // ["a", "b", "c", "d"]
console.log(nextList); // ["a", "c", "d"]

Si toSpliced() n’est pas disponible dans votre cible, on peut reconstruire une copie manuellement. C’est un peu plus verbeux, mais l’intention reste très claire.

const list = ["a", "b", "c", "d"];
const index = 1;

const nextList = [
  ...list.slice(0, index),
  ...list.slice(index + 1)
];

Je retiens une règle simple: si le tableau est partagé, exposé ou stocké dans un état applicatif, je choisis une version immuable; si le tableau est local et que la mutation n’a aucune conséquence extérieure, splice() reste parfaitement défendable. Une fois ce cadre posé, les erreurs les plus courantes deviennent beaucoup plus faciles à éviter.

Les erreurs qui créent des bugs difficiles à repérer

La suppression d’un élément en JavaScript paraît triviale, mais certains réflexes cassent discrètement la logique. Le plus piégeux reste delete, parce qu’il n’enlève pas l’élément: il laisse un emplacement vide et ne réduit pas la longueur du tableau.

const values = [1, 2, 3];
delete values[1];

console.log(values);      // [1, empty, 3]
console.log(values.length); // 3

Autre erreur classique: oublier de vérifier le résultat de findIndex(). Si l’élément n’existe pas, la fonction renvoie -1. Passé directement à splice(), ce -1 ne signifie pas “rien faire”, mais “viser la fin du tableau”.

Je vois aussi souvent des suppressions qui échouent parce qu’on compare mal les objets. Avec des objets, on ne compare pas une “copie visuelle”, on compare une référence ou une propriété précise. Pour supprimer un utilisateur, un produit ou un message, il faut presque toujours une clé stable comme un id.

• Évitez delete pour les tableaux, sauf cas très particuliers sur des structures clairsemées.
• Vérifiez -1 avant d’appeler splice() avec un résultat de recherche.
• Ne mutuez pas un tableau qui sert ailleurs comme source de vérité.
• Comparez une propriété plutôt que l’objet complet quand vous manipulez des données métier.
• Ne confondez pas suppression d’une valeur unique et suppression de toutes les occurrences.

Avec ces garde-fous, le choix de la bonne méthode devient beaucoup plus mécanique et les bugs de liste cessent d’être imprévisibles.

Le réflexe que j’utilise selon le contexte

Si je dois résumer la méthode la plus fiable, je la découpe ainsi: index connu et mutation acceptée, j’utilise splice(); premier ou dernier élément, je prends shift() ou pop(); suppression par valeur, j’utilise filter(); besoin d’une copie immuable à l’index exact, je passe à toSpliced() ou à une reconstruction avec slice().

Ce tri est simple, mais il évite les mauvais réflexes: supprimer trop d’éléments, casser un état partagé ou laisser un trou dans le tableau. Dans la plupart des interfaces web, la bonne décision n’est pas la plus “technique”, c’est celle qui rend le comportement du code évident au prochain lecteur. Et si je devais garder une seule habitude en tête, ce serait celle-ci: vérifier d’abord si je veux modifier l’original, puis choisir la méthode en conséquence.