Splice JavaScript : guide complet de la méthode Array

En 12 ans de développement web, je peux affirmer que splice javascript est l’une des méthodes que j’utilise le plus au quotidien. Que ce soit pour gérer un panier e-commerce, manipuler une liste de tâches ou restructurer des données d’API, cette méthode est incontournable pour tout développeur qui travaille avec des tableaux.

Je vous propose un guide complet qui couvre tous les cas d’usage, des bases jusqu’aux patterns avancés que j’applique sur mes projets clients. Vous comprendrez exactement quand et comment utiliser splice, et surtout quand lui préférer une alternative.

Syntaxe et paramètres de splice()

La méthode Array.prototype.splice() modifie le contenu d’un tableau en supprimant ou remplaçant des éléments existants, et/ou en ajoutant de nouveaux éléments en place. Voici sa signature complète :

array.splice(start, deleteCount, item1, item2, ...itemN)

Détaillons chaque paramètre :

• start (obligatoire) : l’index à partir duquel commencer la modification. Si négatif, il compte depuis la fin du tableau (-1 désigne le dernier élément).
• deleteCount (optionnel) : le nombre d’éléments à supprimer à partir de start. Si omis ou supérieur à la longueur restante, tous les éléments depuis start sont supprimés.
• item1, item2, …itemN (optionnels) : les éléments à ajouter au tableau à partir de la position start.

const fruits = ['pomme', 'banane', 'cerise', 'datte'];
const supprimés = fruits.splice(1, 2, 'fraise', 'kiwi');

console.log(fruits);     // ['pomme', 'fraise', 'kiwi', 'datte']
console.log(supprimés);  // ['banane', 'cerise']

Ce que je trouve particulièrement élégant avec splice, c’est qu’elle retourne toujours un tableau contenant les éléments supprimés. Si aucun élément n’est supprimé, elle retourne un tableau vide. Cette valeur de retour est souvent sous-exploitée par les développeurs débutants.

Supprimer des éléments d’un tableau

C’est le cas d’usage le plus fréquent. Voici les différentes façons de supprimer des éléments avec splice :

Supprimer un élément à un index précis

const taches = ['Design', 'Intégration', 'Tests', 'Déploiement'];
taches.splice(2, 1); // Supprime 1 élément à l'index 2
console.log(taches); // ['Design', 'Intégration', 'Déploiement']

Supprimer plusieurs éléments consécutifs

const nombres = [10, 20, 30, 40, 50, 60];
nombres.splice(1, 3); // Supprime 3 éléments à partir de l'index 1
console.log(nombres); // [10, 50, 60]

Supprimer depuis la fin avec un index négatif

const couleurs = ['rouge', 'vert', 'bleu', 'jaune', 'violet'];
couleurs.splice(-2, 2); // Supprime les 2 derniers éléments
console.log(couleurs); // ['rouge', 'vert', 'bleu']

Supprimer un élément par sa valeur

En combinant indexOf() et splice, on peut supprimer un élément dont on connaît la valeur mais pas l’index :

const panier = ['chemise', 'pantalon', 'ceinture', 'chaussures'];
const index = panier.indexOf('ceinture');
if (index !== -1) {
  panier.splice(index, 1);
}
console.log(panier); // ['chemise', 'pantalon', 'chaussures']

Ce pattern est essentiel. Je l’utilise systématiquement dans mes projets WordPress avec des interfaces de gestion de listes. Pensez à toujours vérifier que l’index n’est pas -1 avant d’appeler splice, sous peine de supprimer le dernier élément par erreur. Pour mieux comprendre comment parcourir un tableau avant suppression, consultez mon guide sur la boucle for en JavaScript.

Insérer des éléments avec splice

En passant 0 comme deuxième argument (deleteCount), splice n’efface rien et se contente d’insérer les éléments fournis à la position indiquée :

const menu = ['Accueil', 'Services', 'Contact'];
menu.splice(2, 0, 'Blog', 'Portfolio');
console.log(menu); // ['Accueil', 'Services', 'Blog', 'Portfolio', 'Contact']

L’insertion se fait avant l’élément actuellement à l’index spécifié. C’est un détail qui piège beaucoup de développeurs. Dans l’exemple ci-dessus, ‘Blog’ et ‘Portfolio’ sont insérés avant ‘Contact’ (qui était à l’index 2).

Insérer au début du tableau

const liste = ['B', 'C', 'D'];
liste.splice(0, 0, 'A');
console.log(liste); // ['A', 'B', 'C', 'D']

Bien sûr, pour ce cas précis, unshift() est plus lisible. Mais splice devient indispensable quand vous devez insérer à une position calculée dynamiquement.

Insérer à la fin

const items = ['un', 'deux', 'trois'];
items.splice(items.length, 0, 'quatre');
console.log(items); // ['un', 'deux', 'trois', 'quatre']

Pour vérifier la propriété length d’un tableau JavaScript, n’hésitez pas à consulter mon article dédié.

Remplacer des éléments dans un tableau

La véritable puissance de splice réside dans sa capacité à combiner suppression et insertion en une seule opération :

const equipe = ['Alice', 'Bob', 'Charlie', 'David'];
// Remplacer Bob et Charlie par Eve et Frank
equipe.splice(1, 2, 'Eve', 'Frank');
console.log(equipe); // ['Alice', 'Eve', 'Frank', 'David']

Remplacer par un nombre différent d’éléments

Contrairement à une affectation directe par index, splice permet de remplacer N éléments par M éléments, le tableau s’ajustant automatiquement :

const etapes = ['Analyse', 'Maquette', 'Dev', 'Recette'];
// Remplacer 'Dev' par trois sous-étapes
etapes.splice(2, 1, 'Dev Front', 'Dev Back', 'Intégration API');
console.log(etapes);
// ['Analyse', 'Maquette', 'Dev Front', 'Dev Back', 'Intégration API', 'Recette']

C’est exactement ce type de manipulation que j’utilise dans les builders de formulaires que je développe pour mes clients. Quand un utilisateur réorganise des champs, splice gère les déplacements de manière atomique.

Différence entre splice() et slice()

C’est la question que me posent le plus souvent les développeurs juniors que j’accompagne. Ces deux méthodes ont des noms quasi identiques mais des comportements fondamentalement différents :

Voici un exemple comparatif pour bien ancrer la différence :

const original = [1, 2, 3, 4, 5];

// slice : ne modifie pas original
const extrait = original.slice(1, 3);
console.log(extrait);  // [2, 3]
console.log(original); // [1, 2, 3, 4, 5] — intact

// splice : modifie original
const supprimé = original.splice(1, 2);
console.log(supprimé); // [2, 3]
console.log(original); // [1, 4, 5] — modifié !

Ma règle en production : si je veux extraire sans effets de bord, j’utilise slice. Si je veux modifier le tableau source, j’utilise splice. Cette distinction est cruciale dans les architectures réactives (React, Vue) où la mutation directe peut poser des problèmes de détection de changements.

Splice vs les autres méthodes de manipulation

JavaScript offre plusieurs méthodes pour manipuler les tableaux. Voici comment splice se positionne par rapport à ses alternatives :

Splice vs delete

L’opérateur delete supprime la valeur mais laisse un « trou » dans le tableau (un élément undefined qui conserve l’index). Splice, lui, referme le tableau après suppression :

const arr1 = ['a', 'b', 'c', 'd'];
delete arr1[1];
console.log(arr1);        // ['a', empty, 'c', 'd']
console.log(arr1.length); // 4 — la longueur ne change pas

const arr2 = ['a', 'b', 'c', 'd'];
arr2.splice(1, 1);
console.log(arr2);        // ['a', 'c', 'd']
console.log(arr2.length); // 3 — la longueur est mise à jour

En pratique, n’utilisez jamais delete sur un tableau. C’est une source de bugs silencieux que j’ai rencontrée des dizaines de fois en audit de code.

Splice vs pop et shift

pop() retire le dernier élément, shift() retire le premier. Ce sont des cas particuliers de splice(). Si vous devez supprimer à un index arbitraire, splice est votre seule option parmi les méthodes mutantes. Pour comprendre en détail le fonctionnement de pop, pensez à explorer les méthodes complémentaires de manipulation de tableaux.

Splice vs filter

filter() crée un nouveau tableau en conservant les éléments qui passent un test. C’est l’approche immuable par excellence :

// Avec filter (immuable)
const nombres = [1, 2, 3, 4, 5];
const pairs = nombres.filter(n => n % 2 === 0);
// nombres reste [1, 2, 3, 4, 5]
// pairs vaut [2, 4]

// Avec splice (mutable) — supprime les impairs
const nombres2 = [1, 2, 3, 4, 5];
for (let i = nombres2.length - 1; i >= 0; i--) {
  if (nombres2[i] % 2 !== 0) nombres2.splice(i, 1);
}
// nombres2 vaut [2, 4]

Notez l’itération en sens inverse quand on utilise splice dans une boucle. C’est un pattern critique : si vous itérez de gauche à droite, les index sont décalés après chaque suppression, et vous sautez des éléments.

toSpliced() : l’alternative immutable ES2023

Depuis ES2023, JavaScript propose toSpliced(), qui fonctionne exactement comme splice mais retourne un nouveau tableau sans modifier l’original. C’est la réponse officielle au besoin d’immutabilité :

const original = ['a', 'b', 'c', 'd', 'e'];
const modifié = original.toSpliced(1, 2, 'x', 'y');

console.log(original); // ['a', 'b', 'c', 'd', 'e'] — intact
console.log(modifié);  // ['a', 'x', 'y', 'd', 'e'] — nouvelle copie

Cette méthode est supportée par tous les navigateurs modernes depuis début 2024 (Chrome 110+, Firefox 115+, Safari 16+). Selon la documentation MDN sur toSpliced(), elle fait partie du groupe des méthodes « copying » aux côtés de toSorted() et toReversed().

En pratique, j’utilise toSpliced() dans mes composants React et Vue où l’immutabilité garantit une bonne détection des changements d’état. Pour les traitements de données purs où la performance prime, splice reste plus efficace car elle évite la copie mémoire.

Cas pratiques en production

Voici des patterns que j’utilise régulièrement dans mes projets WordPress et applications sur mesure :

Déplacer un élément dans un tableau (drag and drop)

function déplacer(tableau, deIndex, versIndex) {
  const [élément] = tableau.splice(deIndex, 1);
  tableau.splice(versIndex, 0, élément);
  return tableau;
}

const liste = ['Intro', 'Chapitre 1', 'Chapitre 2', 'Conclusion'];
déplacer(liste, 3, 1);
console.log(liste); // ['Intro', 'Conclusion', 'Chapitre 1', 'Chapitre 2']

Ce pattern en deux appels splice est le standard pour implémenter le glisser-déposer dans les interfaces d’administration que je développe.

Pagination côté client

function paginer(données, page, parPage) {
  const copie = [...données];
  const début = (page - 1) * parPage;
  return copie.splice(début, parPage);
}

const articles = Array.from({length: 50}, (_, i) => `Article ${i + 1}`);
const page2 = paginer(articles, 2, 10);
// ['Article 11', 'Article 12', ... 'Article 20']

Gestion d’un historique avec limite

const MAX_HISTORIQUE = 20;
const historique = [];

function ajouterAction(action) {
  historique.splice(0, 0, action); // Insère au début
  if (historique.length > MAX_HISTORIQUE) {
    historique.splice(MAX_HISTORIQUE); // Tronque l'excédent
  }
}

Pour nettoyer les chaînes avant de les stocker dans ce type de structure, je recommande de consulter mon article sur trimEnd en JavaScript.

Suppression conditionnelle dans un tableau d’objets

const utilisateurs = [
  { id: 1, nom: 'Alice', actif: true },
  { id: 2, nom: 'Bob', actif: false },
  { id: 3, nom: 'Charlie', actif: true },
  { id: 4, nom: 'David', actif: false }
];

// Supprimer tous les utilisateurs inactifs
for (let i = utilisateurs.length - 1; i >= 0; i--) {
  if (!utilisateurs[i].actif) {
    utilisateurs.splice(i, 1);
  }
}
console.log(utilisateurs);
// [{ id: 1, nom: 'Alice', actif: true }, { id: 3, nom: 'Charlie', actif: true }]

Erreurs courantes et bonnes pratiques

Après des années de revue de code, voici les pièges les plus fréquents que je constate avec splice :

Erreur 1 : oublier que splice mute le tableau

// ❌ Bug classique en React
const [items, setItems] = useState(['a', 'b', 'c']);
function supprimer(index) {
  items.splice(index, 1); // Mute l'état directement !
  setItems(items); // React ne détecte pas le changement
}

// ✅ Correction avec toSpliced ou copie
function supprimer(index) {
  setItems(prev => prev.toSpliced(index, 1));
}

Erreur 2 : itérer de gauche à droite en supprimant

// ❌ Saute des éléments
const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  if (arr[i] % 2 === 0) arr.splice(i, 1);
}
console.log(arr); // [1, 3, 5] — fonctionne ici par chance

// Mais avec [2, 4, 6, 8] :
const arr2 = [2, 4, 6, 8];
for (let i = 0; i < arr2.length; i++) {
  if (arr2[i] % 2 === 0) arr2.splice(i, 1);
}
console.log(arr2); // [4, 8] — BUG ! Des éléments sont sautés

// ✅ Toujours itérer en sens inverse
const arr3 = [2, 4, 6, 8];
for (let i = arr3.length - 1; i >= 0; i--) {
  if (arr3[i] % 2 === 0) arr3.splice(i, 1);
}
console.log(arr3); // [] — correct

Erreur 3 : confondre la valeur de retour

// ❌ splice retourne les éléments SUPPRIMÉS, pas le tableau modifié
const résultat = [1, 2, 3, 4].splice(0, 0, 'nouveau');
console.log(résultat); // [] — tableau vide car rien n'a été supprimé

Bonnes pratiques que j’applique systématiquement

• Toujours vérifier le résultat de indexOf() avant splice (≠ -1)
• Préférer filter() quand la condition de suppression est complexe
• Utiliser toSpliced() dans les frameworks réactifs
• Documenter l’intention quand splice est utilisé pour insérer (le code n’est pas évident)
• Ne jamais utiliser splice dans un reduce ou un map sur le même tableau

Pour optimiser le rendu visuel de vos applications après ces manipulations de données, vous pouvez vous intéresser aux techniques de paint en JavaScript qui permettent de contrôler le rafraîchissement de l’affichage.

Selon la spécification ECMAScript officielle, splice est définie de manière à garantir un comportement cohérent sur tous les moteurs JavaScript conformes, ce qui en fait une méthode fiable pour la production.