Jusqu’à présent, nous avons travaillé avec des variables simples : un nombre, un texte, un booléen. Mais dans la vraie vie, une application ne gère jamais une seule donnée à la fois.
Un site web gère des listes de produits, des utilisateurs, des commandes, des messages. Pour cela, JavaScript met à disposition deux structures fondamentales : les arrays (tableaux) et les objects (objets).
Maîtriser ces deux notions, c’est passer du statut de “débutant qui teste” à celui de “développeur qui manipule de vraies données”.
1) Qu’est-ce qu’un array ? (penser en listes)
Un array (ou tableau) est une liste ordonnée de valeurs. C’est exactement comme une liste écrite sur papier.
Exemples de listes dans la vie réelle :
- Liste de prénoms
- Liste de notes
- Liste de produits
- Liste de messages
En JavaScript, un array s’écrit avec des crochets [].
let prenoms = ["Ahmed", "Sara", "Youssef", "Lina"];
Chaque élément a une position appelée index. Attention : l’index commence toujours à 0.
console.log(prenoms[0]); // Ahmed console.log(prenoms[1]); // Sara
👉 Erreur classique : penser que le premier élément a l’index 1.
2) Accéder et modifier les données d’un array
Les arrays ne sont pas figés. Vous pouvez modifier leur contenu.
Modifier un élément existant
prenoms[1] = "Salma"; console.log(prenoms);
Ajouter un élément à la fin
prenoms.push("Omar");
Supprimer le dernier élément
prenoms.pop();
Ces méthodes sont extrêmement utilisées dans les projets réels (panier e-commerce, messages, notifications).
3) Parcourir un array (boucles)
Très souvent, vous voudrez appliquer une action à chaque élément d’un array. C’est ce qu’on appelle parcourir un tableau.
Boucle for classique
for (let i = 0; i < prenoms.length; i++) {
console.log(prenoms[i]);
}
forEach (plus lisible)
prenoms.forEach(function(nom) {
console.log(nom);
});
forEach est très populaire car il se lit presque
comme une phrase humaine.
4) Qu’est-ce qu’un object ? (penser en profils)
Un object représente une entité avec des propriétés. Contrairement à un array (liste), un object décrit un élément unique.
Exemples d’objets dans la vraie vie :
- Un utilisateur
- Un produit
- Une commande
- Un article
let utilisateur = {
nom: "Karim",
age: 28,
email: "karim@email.com",
isAdmin: false
};
Chaque donnée est associée à une clé. Cela rend le code beaucoup plus lisible.
5) Accéder et modifier un object
Accéder aux propriétés
console.log(utilisateur.nom); console.log(utilisateur["email"]);
Modifier une propriété
utilisateur.age = 29; utilisateur.isAdmin = true;
Ajouter une nouvelle propriété
utilisateur.ville = "Casablanca";
6) Arrays d’objects (le cas le plus réel)
Dans les projets réels, vous manipulerez souvent des arrays contenant des objects.
let produits = [
{ nom: "Clavier", prix: 150, stock: true },
{ nom: "Souris", prix: 80, stock: false },
{ nom: "Écran", prix: 1200, stock: true }
];
Parcourir cet array :
produits.forEach(function(produit) {
console.log(produit.nom + " - " + produit.prix + " DH");
});
7) Cas pratiques concrets
Cas 1 — Panier e-commerce
let panier = [];
function ajouterAuPanier(nom, prix) {
panier.push({ nom: nom, prix: prix });
}
ajouterAuPanier("Casque", 300);
ajouterAuPanier("Clé USB", 70);
Cas 2 — Calcul du total
let total = 0;
panier.forEach(function(item) {
total += item.prix;
});
console.log("Total :", total);
Cas 3 — Gestion d’utilisateurs
let utilisateurs = [
{ nom: "Ali", actif: true },
{ nom: "Nadia", actif: false }
];
let actifs = utilisateurs.filter(user => user.actif);
console.log(actifs);
8) Erreurs fréquentes à éviter
- Confondre array et object
- Oublier que l’index commence à 0
- Modifier directement des données sans vérifier
- Écrire des structures trop complexes trop tôt
👉 Les arrays et objects sont puissants, mais doivent rester lisibles.
Les arrays et objects sont la base de toute application JavaScript moderne. Dès que vous savez les lire, les modifier et les parcourir, vous êtes capable de gérer de vraies données.
Dans la Partie 7, nous verrons les boucles plus en détail (for, while, map, filter) pour automatiser encore davantage le travail sur les données.