Un tableau, c'est une liste ordonnée
En JavaScript, un tableau stocke une suite ordonnée de valeurs. Ces valeurs peuvent être de n'importe quel type — des nombres, des chaînes, des objets, et même d'autres tableaux — et rien n'oblige à ce qu'elles soient toutes du même type. Pour en créer un, on utilise les crochets :
Cette syntaxe littérale, c'est celle que tu vas utiliser dans 99% des cas pour créer un tableau JavaScript. Il existe bien new Array(...), mais gare au piège : new Array(3) crée un tableau de longueur 3 sans aucun élément dedans, et non pas [3]. Reste sur [], c'est plus sûr.
L'indexation commence à zéro
Pour accéder à un élément, on utilise sa position, en partant de 0 :
Deux points importants à retenir. D'abord, accéder à un index hors du tableau ne déclenche aucune erreur : ça renvoie simplement undefined. C'est d'ailleurs une source classique de bugs du genre « mais pourquoi c'est undefined ?! ». Ensuite, tu peux affecter une valeur à n'importe quel index, y compris au-delà de la taille actuelle, et JavaScript étendra le tableau sans broncher :
Les positions 3 et 4 deviennent des « trous » (cases vides dans un tableau creux). La propriété length passe à 6. En pratique, ce n'est presque jamais ce que l'on veut : c'est un effet de bord de la souplesse des tableaux, pas une fonctionnalité sur laquelle s'appuyer.
La propriété length est dynamique
array.length vaut toujours l'indice le plus élevé plus un. Elle se met à jour toute seule dès qu'on ajoute ou qu'on retire un élément :
Cette dernière astuce mérite d'être retenue : affecter une valeur à length tronque le tableau. Faire nums.length = 0 est un moyen rapide de le vider sur place.
push, pop, shift, unshift
Quatre méthodes pour ajouter et retirer des éléments aux extrémités :
push(x)ajoute un élément à la fin et renvoie la nouvelle longueur.pop()retire le dernier élément et le renvoie.unshift(x)ajoute un élément au début.shift()retire le premier élément.
push et pop sont rapides. En revanche, shift et unshift doivent réindexer tous les autres éléments, ce qui les rend plus lents sur de gros tableaux — aucun souci pour les tailles du quotidien, mais c'est bon à savoir si tu manipules des millions d'éléments.
slice vs splice en JavaScript
Ces deux méthodes portent des noms qui se ressemblent, mais leur comportement n'a rien à voir. Bien les distinguer, c'est s'épargner pas mal de prises de tête.
slice(start, end) renvoie une copie d'une portion du tableau. Le tableau d'origine reste intact. La borne end est exclue :
splice(start, deleteCount, ...items) modifie le tableau d'origine. On peut s'en servir pour supprimer, insérer, ou faire les deux à la fois — et la méthode renvoie ce qui a été retiré :
Règle mnémotechnique : si le mot évoque le fait de trancher une part d'un pain, c'est slice. S'il évoque le montage d'une pellicule (couper et insérer), c'est splice.
Rechercher dans un tableau : indexOf, includes, find
Trois façons de retrouver un élément, selon le contexte :
indexOf(x)te renvoie la position de l'élément, ou-1s'il n'est pas trouvé. Pratique quand tu as besoin de l'index.includes(x)renvoie un booléen. Plus propre quand tu veux juste savoir « est-ce que c'est dedans ? ». En bonus, il gère correctementNaN, contrairement àindexOf.find(predicate)exécute une fonction sur chaque élément et te retourne le premier qui correspond. C'est la méthode à utiliser pour un tableau d'objets en JavaScript, là oùindexOfetincludesse contentent d'une égalité stricte.
Parcourir un tableau en JavaScript
Voici quelques bonnes façons de parcourir un tableau JavaScript, chacune adaptée à un cas précis :
for...of est le choix par défaut : lisible, compatible avec n'importe quel itérable, et il te donne directement la valeur. forEach fait l'affaire quand tu veux aussi l'index et que tu ne comptes pas sortir de la boucle en cours de route (impossible de faire un break dans un forEach). La boucle for classique avec un index est plus verbeuse, mais elle t'offre un contrôle total — pratique quand tu dois sauter des éléments, parcourir le tableau à l'envers, ou les deux.
Une boucle à éviter : for...in. Elle itère sur les clés et inclut même les propriétés héritées. C'est fait pour les objets, pas pour les tableaux.
Copier et fusionner des tableaux
Les tableaux sont des valeurs par référence. Assigner un tableau à une autre variable ne le copie pas : tu te retrouves simplement avec deux noms qui pointent vers le même tableau.
Pour faire une vraie copie, utilisez le spread operator ou slice() :
Les deux produisent une copie superficielle (shallow copy) : le tableau de premier niveau est bien nouveau, mais si les éléments sont des objets, ces objets restent partagés. Le spread est aussi la manière la plus élégante de fusionner deux tableaux :
Tableau d'objets en JavaScript
Dans le code réel, la plupart des tableaux contiennent des objets. Les mêmes méthodes fonctionnent, mais le filtrage devient bien plus intéressant :
filter renvoie un nouveau tableau contenant les éléments qui satisfont un prédicat. map renvoie un nouveau tableau dans lequel chaque élément est transformé. Les enchaîner, c'est le quotidien quand on manipule un tableau d'objets en JavaScript — et la page suivante va creuser cette famille de javascript array methods.
Tableau ou objet : lequel choisir ?
Un petit repère mental : on utilise un tableau quand l'ordre compte et qu'on manipule une liste d'éléments de même nature. On utilise un objet (ou une Map) quand on veut indexer les choses par nom. « Premier, deuxième, troisième » : c'est le terrain du tableau. « Récupère l'utilisateur avec l'id 42 » : c'est le terrain de l'objet ou de la Map.
Rien n'empêche de combiner les deux — les tableaux d'objets sont partout — mais évite d'utiliser un tableau comme dictionnaire indexé par clé, et un objet comme liste ordonnée. Chacun fait bien son boulot, à sa place.
La suite : la destructuration
Extraire des valeurs d'un tableau par leur index (et les propriétés d'un objet par leur nom), c'est tellement fréquent que JavaScript a prévu une syntaxe dédiée pour ça. C'est ce qu'on appelle la destructuration, et c'est justement le sujet suivant.
Questions fréquentes
Comment créer un tableau en JavaScript ?
La méthode idiomatique, c'est la syntaxe littérale entre crochets : const fruits = ['apple', 'banana']. Le constructeur Array (new Array(3)) existe mais n'est presque jamais ce que tu veux — new Array(3) crée un tableau de longueur 3 sans aucun élément réel, ce qui surprend pas mal de monde.
Comment supprimer un élément d'un tableau en JavaScript ?
Pour retirer le dernier élément, utilise pop(). Pour le premier, shift(). Pour un élément quelque part au milieu, splice(index, 1) modifie le tableau sur place, ou filter(...) renvoie un nouveau tableau sans l'élément. À retenir : splice modifie l'original, filter non.
Quelle est la différence entre slice et splice ?
slice(start, end) renvoie une copie superficielle d'une portion du tableau sans toucher à l'original. splice(start, deleteCount, ...items), lui, modifie le tableau en place : il enlève des éléments, peut en insérer de nouveaux, et retourne ceux qui ont été supprimés. Une lettre d'écart, un comportement radicalement différent.
Comment vérifier qu'une valeur est présente dans un tableau JavaScript ?
Le plus simple, c'est array.includes(value) — ça renvoie true ou false et ça gère correctement NaN. indexOf(value) renvoie la position ou -1 si l'élément n'est pas trouvé, ce qui est pratique quand tu as aussi besoin de l'index. Pour des comparaisons plus complexes (objets, etc.), passe par some(predicate) ou find(predicate).
