Tableaux et objets

Objectifs

À la fin de cette leçon, vous saurez :

• stocker et lire une suite de valeurs dans un tableau (index, length, hors-limites) ;
• modifier un tableau avec push, pop, unshift, shift ;
• regrouper des valeurs nommées dans un objet et y accéder par point ou crochets ;
• combiner les deux — tableau d'objets — la structure de données reine des applications web.

🔗 Pour vous rafraîchir la mémoire : conditions et boucles · découper avec des fonctions

Pourquoi plusieurs valeurs ensemble ?

Jusqu'ici, une variable portait une valeur. Mais un carnet de contacts, une liste de courses ou les notes d'une classe ne tiennent pas dans trois variables nommées à la main. JavaScript fournit deux structures complémentaires :

• le tableau (array) : une suite ordonnée de valeurs, repérées par leur position ;
• l'objet : un ensemble de valeurs nommées, repérées par leur nom.

Tout programme web réel manipule les deux combinés : « la liste des utilisateurs, chacun ayant nom, email et rôle ».

Le tableau : une suite ordonnée, indexée à partir de 0

const notes = [12, 15, 8, 17];

Chaque élément est repéré par sa position, appelée index — qui commence à zéro, pas à un :

index  :    0     1    2     3
valeur :   12    15    8    17

Pourquoi zéro ? L'index est en réalité un décalage depuis le début du tableau : le premier élément est à zéro cases du début, le deuxième à une case... Cette convention est universelle en informatique ; elle explique aussi le piège classique ci-dessous.

console.log(notes[0]);      // 12   premier élément
console.log(notes[3]);      // 17   dernier élément
console.log(notes[4]);      // undefined : HORS limites, sans erreur !

Dernière ligne, très importante : lire au-delà de la fin ne plante pas — JavaScript renvoie tranquillement undefined. Pas de garde-fou : c'est à vous de rester dans les limites. Le piège classique est donc le suivant :

console.log(notes.length);        // 4   : QUATRE éléments
console.log(notes[notes.length]); // undefined ! length n'est PAS un index
console.log(notes[notes.length - 1]); // 17 : le dernier, correct

length compte les éléments ; le dernier index vaut toujours length - 1. Gravez cette paire.

Modifier une case existante :

notes[1] = 16;        // remplace 15 par 16

Et pourquoi const fonctionne-t-il ici ? Parce que const interdit de remplacer le tableau entier (notes = [1, 2] → erreur), mais pas de modifier son contenu. Ce comportement paraîtra limpide au chapitre 4 : la variable porte une référence vers le tableau, et c'est la référence qui est constante.

Manipuler un tableau : push, pop, shift, unshift

Quatre méthodes couvrent l'essentiel :

const fruits = [];

fruits.push("pomme");       // ajoute À LA FIN
fruits.push("banane");
console.log(fruits);         // [ 'pomme', 'banane' ]
console.log(fruits.length);  // 2

const dernier = fruits.pop();   // RETIRE le dernier ET le renvoie
console.log(dernier);            // banane
console.log(fruits);             // [ 'pomme' ]

fruits.unshift("kiwi");      // ajoute AU DÉBUT
console.log(fruits);             // [ 'kiwi', 'pomme' ]

const premier = fruits.shift();  // retire le premier et le renvoie
console.log(premier);             // kiwi

Moyen mnémotechnique : les noms courts (pop, shift) travaillent côté fin/début respectivement, et tous renvoient ce qu'ils ont retiré (sauf push/unshift, qui renvoient la nouvelle longueur). Tous modifient le tableau sur place.

Parcourir : for...of et le motif accumulateur

La boucle vedette de la leçon précédente s'applique directement :

const notes = [12, 15, 8, 17];

let total = 0;                 // 1. l'accumulateur démarre neutre
for (const note of notes) {    // 2. chaque élément passe une fois
  total += note;               // 3. on enrichit l'accumulateur
}
console.log(total);                    // 52
console.log(total / notes.length);     // 13 : la moyenne

Ce motif « accumulateur » (initialiser → parcourir → enrichir → exploiter) est l'un des plus fréquents de toute la programmation : il sert aux sommes, aux comptages, aux recherches de maximum. Vous le réécrirez sous mille formes ; comprenez-le une fois pour toutes :

// Compter les notes >= 12 : même squelette
let bonnes = 0;
for (const note of notes) {
  if (note >= 12) {
    bonnes++;
  }
}
console.log(bonnes);   // 3

Construire un nouveau tableau à partir d'un autre est l'autre grand motif :

const doubles = [];
for (const note of notes) {
  doubles.push(note * 2);
}
console.log(doubles);   // [24, 30, 16, 34]

(Les méthodes modernes comme .map() et .filter() feront cela plus tard, plus élégamment — mais elles font exactement cette boucle en dessous.)

L'objet : des valeurs sous des noms

Un objet regroupe des informations nommées — idéal quand les valeurs n'ont pas entre elles un ordre naturel, mais des rôles différents :

const user = {
  name: "Paul",
  age: 20,
  email: "paul@exemple.fr",
};

Lecture : un objet contient des paires propriété: valeur. Accès par point :

console.log(user.name);     // Paul
console.log(user.age);      // 20

Modification et ajout, aussi simplement :

user.age = 21;              // modification d'une propriété existante
user.ville = "Lyon";        // ajout d'une propriété nouvelle
console.log(user);
// { name: 'Paul', age: 21, email: '...', ville: 'Lyon' }

Suppression avec delete user.email (rare mais existe).

Point ou crochets : deux accès, deux usages

user.name          // point : quand on connaît le nom, littéralement
user["name"]       // crochets : équivalent ici...

const champ = "age";
console.log(user[champ]);   // 20 : crochets OBLIGATOIRES avec une variable

Le point exige un nom écrit en dur. Dès que le nom de propriété est calculé (variable, résultat d'expression), seuls les crochets fonctionnent — c'est exactement le mécanisme des crochets de tableau, appliqué à des noms au lieu de positions.

Remarque culturelle : cet objet ressemble furieusement au JSON que vous croiserez partout (API, fichiers de config). Le JSON est en réalité ce format-là, formalisé pour l'échange de données — vous savez déjà presque le lire.

La combinaison gagnante : un tableau d'objets

Voici la structure qui représente 90 % des données d'une application web — une liste d'entités :

const contacts = [
  { name: "Paul",  email: "paul@exemple.fr" },
  { name: "Marie", email: "marie@exemple.fr" },
  { name: "Awa",   email: "awa@exemple.fr" },
];

Lisez-la en deux temps : un tableau (donc parcourable), dont chaque case est un objet (donc accédable par nom). Les deux savoirs se composent :

for (const contact of contacts) {
  console.log(`${contact.name} <${contact.email}>`);
}
// Paul <paul@exemple.fr>
// Marie <marie@exemple.fr>
// Awa <awa@exemple.fr>

Et les motifs accumulateurs s'y appliquent tels quels :

let tailleCarnet = contacts.length;          // 3 : simple lecture
const recherche = "marie@exemple.fr";

let trouve = null;                            // accumulateur de recherche
for (const contact of contacts) {
  if (contact.email === recherche) {
    trouve = contact;
    break;                                    // inutile de chercher plus loin
  }
}
console.log(trouve ? `Trouvé : ${trouve.name}` : "Absent");
// Trouvé : Marie

Notez trouve = null initialisé volontairement : « rien trouvé pour l'instant ». C'est l'usage canonique de null.

Choisir la bonne structure

Donnée	Structure	Exemple
Suite ordonnée de valeurs semblables	tableau	[12, 15, 8]
Valeurs hétérogènes nommées	objet	{ name, age }
Liste d'entités	tableau d'objets	contacts, produits, messages

Test rapide : « ai-je besoin d'un ordre / vais-je tout parcourir ? » → tableau. « mes valeurs ont des rôles distincts ? » → objet. Les deux ? Tableau d'objets, évidemment.

Exercice

1. Créez annees = [2020, 2021, 2022, 2023] ; affichez la première année et la longueur.
2. Ajoutez 2024 avec push puis affichez le tableau complet.
3. Affichez le dernier élément sans écrire son index en dur.
4. Moyenne de [12, 15, 8, 17] via boucle et accumulateur.
5. Objet voiture (marque, modele, annee) ; affichez ses trois propriétés.
6. Ajoutez dynamiquement vitesseMax = 220 à cette voiture.
7. Garage : tableau de 3 voitures objets ; affichez marque modele de chacune en boucle.
8. Année moyenne du garage, via accumulateur.
9. Recherche : trouvez la voiture de marque "Peugeot" (motif vu plus haut) et affichez son modèle, ou « absente ».

Résumé

• Tableau : ordonné, indexé dès 0, dernier index = length - 1, hors-limites = undefined.
• push/pop à la fin, unshift/shift au début — tout modifie en place.
• Objet : propriétés nommées, accès par point (nom fixe) ou crochets (variable).
• Tableau d'objets = liste d'entités : la structure centrale des apps web.
• Motifs accumulateur et recherche : à connaître par cœur.

// 1-2-3
const annees = [2020, 2021, 2022, 2023];
console.log(annees[0]);                       // 2020
console.log(annees.length);                   // 4
annees.push(2024);
console.log(annees);                          // [2020, 2021, 2022, 2023, 2024]
console.log(annees[annees.length - 1]);       // 2024 : le dernier, sans index en dur

// 4
const notes = [12, 15, 8, 17];
let total = 0;
for (const note of notes) {
  total += note;
}
console.log(total / notes.length);            // 13

// 5-6
const voiture = {
  marque: "Renault",
  modele: "Clio",
  annee: 2019,
};
console.log(voiture.marque);                  // Renault
console.log(voiture.modele);                  // Clio
console.log(voiture.annee);                   // 2019
voiture.vitesseMax = 220;

// 7-8
const garage = [
  { marque: "Renault", modele: "Clio",    annee: 2019 },
  { marque: "Peugeot", modele: "208",     annee: 2021 },
  { marque: "Tesla",   modele: "Model 3", annee: 2022 },
];

for (const v of garage) {
  console.log(`${v.marque} ${v.modele}`);
}
// Renault Clio
// Peugeot 208
// Tesla Model 3

let sommeAnnees = 0;
for (const v of garage) {
  sommeAnnees += v.annee;
}
console.log(sommeAnnees / garage.length);     // 2020.6666...

// 9
let trouvée = null;
for (const v of garage) {
  if (v.marque === "Peugeot") {
    trouvée = v;
    break;
  }
}
console.log(trouvée ? trouvée.modele : "absente");   // 208