C'est la première méthode de tableau que l'on apprend, et souvent la dernière que l'on remet en question. Remplir une liste au fil d'une boucle, empiler des résultats, ajouter une ligne à un panier : push est partout.
Deux détails méritent pourtant l'attention : ce qu'il rend, et le fait qu'il modifie le tableau existant.
Définition
push ajoute un ou plusieurs éléments à la fin d'un Array (tableau) et rend la nouvelle longueur du tableau, jamais le tableau lui-même.
const invites = ["Alice"];
const taille = invites.push("Bob", "Chloé");
console.log(taille); // 3, la nouvelle longueur
console.log(invites); // [ 'Alice', 'Bob', 'Chloé' ]
const autres = ["Diane", "Émile"];
invites.push(...autres);
console.log(invites.length); // 5La dernière ligne utilise Spread (...) pour transmettre chaque élément séparément. Sans lui, push(autres) ajouterait un seul élément qui serait un tableau, et la longueur passerait à 4.
La famille des quatre
| Méthode | Ce qu'elle fait | Ce qu'elle rend |
|---|---|---|
push(x) | Ajoute à la fin | La nouvelle longueur |
pop() | Retire le dernier | L'élément retiré |
unshift(x) | Ajoute au début | La nouvelle longueur |
shift() | Retire le premier | L'élément retiré |
Les trois colonnes donnent le nom, l'effet et la valeur de retour. Les quatre méthodes modifient le tableau sur place : celles qui ajoutent rendent un nombre, celles qui retirent rendent l'élément, et pop sur un tableau vide rend undefined sans lever d'erreur.
push ou une copie
La forme [...liste, element] construit un nouveau tableau au lieu de modifier l'existant. C'est plus coûteux, et c'est pourtant ce qu'il faut écrire dans un état d'interface, où seule une nouvelle référence déclenche un réaffichage.
const liste = [1];
const copie = [...liste, 2];
liste.push(3);
console.log(liste); // [ 1, 3 ]
console.log(copie); // [ 1, 2 ], la copie n'a pas suiviÀ l'inverse, dans une boucle qui construit un résultat local, push reste le bon choix. Recopier le tableau à chaque tour transforme un travail proportionnel au nombre d'éléments en un travail proportionnel à son carré, ce qui se sent dès quelques milliers de lignes.
Questions fréquentes
Pourquoi const nouvelle = liste.push(x) ne donne-t-il pas un tableau ?
Parce que push rend la nouvelle longueur, un nombre. La variable contient donc 3 plutôt que la liste attendue, et l'erreur apparaît plus loin, sous la forme d'un message disant qu'une méthode de tableau n'existe pas sur un nombre. Le tableau modifié est la variable de départ.
Peut-on faire un push sur un tableau déclaré avec const ?
Oui, et cela surprend souvent. const interdit de réaffecter la variable, pas de modifier la valeur qu'elle désigne. Ajouter, retirer ou trier reste donc permis ; seul liste = [] lève une erreur.
Peut-on tout concaténer avec push(...autreTableau) ?
Sur des tailles courantes, oui, et c'est plus rapide que concat puisque rien n'est recopié. Au-delà de quelques centaines de milliers d'éléments, chaque valeur devenant un argument, la pile d'appels sature et une RangeError apparaît. Une boucle ou concat reprennent alors la main.