2.6 Les Tableaux
Dans vos applications JavaScript, vous aurez régulièrement besoin de manipuler des listes : produits d'un panier, couleurs sélectionnées par un utilisateur, résultats d'une recherche. Pour stocker ce genre de collection, on utilise un tableau. La déclaration se fait avec une paire de crochets, ce qu'on appelle un tableau littéral. Par exemple, let selectionCouleurs = []; crée un tableau vide nommé en camelCase. On peut ensuite l'initialiser directement avec des valeurs : let selectionCouleurs = ['red', 'blue'];.
Chaque élément possède un index numérique qui correspond à sa position. L'index du premier élément est 0, celui du deuxième est 1, et ainsi de suite. Pour accéder à un élément, on utilise la notation entre crochets : selectionCouleurs[0] renvoie 'red'. Cette même syntaxe permet aussi d'ajouter ou de remplacer un élément : selectionCouleurs[2] = 'green'; agrandit le tableau pour y placer une troisième valeur.
Tableaux dynamiques et hétérogènes
JavaScript étant un langage dynamique, ce principe s'applique aux tableaux. Deux choses peuvent évoluer à l'exécution :
- La longueur du tableau : elle change quand on ajoute ou supprime des éléments.
- Le type des éléments : contrairement à d'autres langages, un tableau JavaScript peut contenir simultanément des chaînes, des nombres, des booléens, voire des objets.
Par exemple, on peut remplacer le dernier élément par un nombre : selectionCouleurs[2] = 1;. Le tableau contient désormais deux chaînes et un nombre, sans erreur. Techniquement, un tableau est un objet en JavaScript : typeof selectionCouleurs retourne 'object'. Cela signifie qu'il possède des paires clé/valeur, c'est-à-dire des propriétés accessibles avec la notation par point. Ces propriétés sont héritées automatiquement à la création du tableau ; nous reviendrons sur ce mécanisme quand nous étudierons les prototypes.
La propriété la plus utilisée est length, qui renvoie le nombre d'éléments présents : selectionCouleurs.length vaut 3 dans notre exemple. Nous reviendrons plus tard dans le cours sur toutes les opérations possibles sur les tableaux (ajout, suppression, parcours, transformation).
En résumé
Cette leçon introduit les tableaux en JavaScript, structure essentielle pour stocker des listes d'objets comme une collection de couleurs ou de produits. Les tableaux se déclarent avec des crochets vides [] et peuvent être remplis avec des éléments accessibles via leur index commençant à 0. Un point clé de JavaScript est que les tableaux sont dynamiques : leur taille et le type de leurs éléments peuvent changer à tout moment, et un tableau est techniquement un objet disposant de propriétés comme length.
Points clés
- Les tableaux se déclarent avec des crochets [] et permettent de stocker une liste d'éléments (tableau littéral)
- Chaque élément a un index commençant à 0 pour y accéder (ex: selectionCouleurs[0] retourne le premier élément)
- Les tableaux sont dynamiques : on peut ajouter ou modifier des éléments après création (ex: selectionCouleurs[2] = "vert")
- Contrairement à d'autres langages, un tableau JavaScript peut contenir des types différents (chaînes, nombres, etc.) mélangés
- Les tableaux sont des objets en JavaScript; on les vérifie avec typeof tableau qui retourne "object"
- La propriété length retourne automatiquement le nombre d'éléments dans le tableau
Questions fréquentes
Comment accéder au premier élément d'un tableau en JavaScript?
En utilisant l'index 0 avec la notation par crochets: tableau[0] (le premier élément a toujours l'index 0).
Peut-on ajouter un élément à un tableau après sa création?
Oui, les tableaux sont dynamiques. On peut ajouter un nouvel élément en spécifiant un index, par exemple selectionCouleurs[2] = "vert" pour ajouter un troisième élément.
Peut-on stocker différents types de données dans un même tableau?
Oui, contrairement à d'autres langages de programmation, JavaScript permet de mélanger les types dans un tableau (chaînes, nombres, objets, etc.).