Structures de données avec des noms explicites
Utilisez les flèches, cliquez ou glissez pour naviguer
1. Comprendre ce qu'est un objet
Paires clé-valeur avec des noms explicites
2. Créer un objet avec {}
Syntaxe littérale et types de valeurs
3. Accéder aux propriétés
Dot notation et bracket notation
4. Modifier les propriétés
Ajouter, modifier et supprimer
5. Choisir entre objet et tableau
Quand utiliser chaque structure
Pourquoi les objets ?
Le problème du tableau non nommé (etudiant[1] = quoi ?)
Créer un objet littéral
Syntaxe {} : clé-valeur, virgules, types de valeurs
Dot notation vs bracket notation
Quand utiliser chaque forme
Ajouter, modifier, supprimer
Manipuler les propriétés (et pourquoi const le permet)
for...in et tableau vs objet
Itérer sur un objet et choisir la bonne structure
Représenter un étudiant avec un tableau
const etudiant = ["Alice", 20, "Paris"];
console.log(etudiant[0]); // "Alice" - mais 0 = quoi ?
console.log(etudiant[1]); // 20 - mais 1 = quoi ?
console.log(etudiant[2]); // "Paris" - mais 2 = quoi ?
Problème : Les indices n'ont pas de sens!
etudiant[1] = ??? âge ? note ? numéro ?
Des noms explicites pour chaque donnée
const etudiant = {
nom: "Alice",
age: 20,
ville: "Paris"
};
console.log(etudiant.nom); // "Alice" clair!
console.log(etudiant.age); // 20 clair!
console.log(etudiant.ville); // "Paris" clair!
Les noms rendent le code lisible et compréhensible!
La syntaxe littérale
Un objet = des paires clé: valeur
Séparées par des virgules
const personne = {
prenom: "Marie",
nom: "Dupont",
age: 25
};
clé
Le nom de la propriété
Toujours une chaîne
:
Séparateur
Entre clé et valeur
valeur
N'importe quel type
String, number, objet...
La dernière propriété n'a pas de virgule après
const produit = {
nom: "Laptop", // String
prix: 999.99, // Number
disponible: true, // Boolean
tags: ["tech", "promo"], // Array
details: { // Objet imbriqué
ram: "16GB",
stockage: "512GB"
},
afficher: function() { // Function
return this.nom;
}
};
Une valeur peut être de n'importe quel type : string, number, boolean, array, objet, function...
Deux façons de lire une valeur
objet.propriete
Dot notation
objet["propriete"]
Bracket notation
Utilisée quand on connaît le nom de la propriété
const etudiant = {
nom: "Alice",
age: 20
};
console.log(etudiant.nom); // "Alice"
console.log(etudiant.age); // 20
Avantages :
Plus lisible et plus court
Limitations :
Ne fonctionne pas avec les clés dynamiques ou spéciales
Nécessaire quand la clé est dans une variable ou spéciale
const etudiant = { nom: "Alice", age: 20 };
console.log(etudiant["nom"]); // "Alice"
console.log(etudiant["age"]); // 20
// Avec une variable!
const cle = "nom";
console.log(etudiant[cle]); // "Alice"
console.log(etudiant.cle); // undefined! (cherche "cle")
Règle d'or : Clé dynamique = bracket notation obligatoire
Bracket notation obligatoire pour les clés spéciales
const produit = {
"nom-produit": "Laptop",
"prix TTC": 1200
};
Dot notation
produit.nom-produit // Erreur!
produit.prix TTC // Erreur!
Bracket notation
produit["nom-produit"] // "Laptop"
produit["prix TTC"] // 1200
objet.propriete
Quand la clé est connue à l'avance
Clé simple (lettres, chiffres, _)
Code plus lisible
Le plus courant
objet["cle"]
Quand la clé est dynamique ou spéciale
Clé dans une variable
Clé avec espaces/tirets
Clé calculée
Ajouter, modifier, supprimer des propriétés
Un objet est mutable
Même déclaré avec const!
const etudiant = { nom: "Alice" };
// Ajouter une nouvelle propriété
etudiant.age = 20;
etudiant["ville"] = "Paris";
// Résultat :
console.log(etudiant);
// { nom: "Alice", age: 20, ville: "Paris" }
Si la propriété n'existe pas, elle est créée
const etudiant = { nom: "Alice", age: 20 };
// Modifier une propriété existante
etudiant.age = 21;
etudiant.nom = "Alice Dupont";
// Résultat :
console.log(etudiant);
// { nom: "Alice Dupont", age: 21 }
Si la propriété existe, elle est mise à jour
Utiliser l'opérateur delete
const etudiant = { nom: "Alice", age: 20, temp: "valeur" };
// Supprimer une propriété
delete etudiant.temp;
// Résultat :
console.log(etudiant);
// { nom: "Alice", age: 20 }
La propriété est complètement supprimée, pas juste mise à undefined
const empêche de réassigner la variable, PAS de modifier l'objet
Interdit avec const
const etudiant = { nom: "Alice" };
etudiant = {}; // Erreur!
Réassigner la variable
Autorisé avec const
const etudiant = { nom: "Alice" };
etudiant.nom = "Bob"; // OK!
Modifier le contenu de l'objet
Analogie : const = la boîte reste la même, mais on peut changer ce qu'il y a dedans
La boucle for...in
Parcourir toutes les clés d'un objet
for (let cle in objet) {
// cle = nom de la propriété
console.log(cle, objet[cle]);
}
La variable cle prend successivement chaque nom de propriété
const personne = { nom: "Marie", age: 25 };
for (let cle in personne) {
console.log(cle + ": " + personne[cle]);
}
// "nom: Marie"
// "age: 25"
for...in
Pour les objets
for (let cle in objet)
// Parcourt les CLÉS
Itère sur les noms des propriétés
for...of
Pour les tableaux
for (let val of tableau)
// Parcourt les VALEURS
Itère sur les éléments du tableau
Ne pas confondre! for...in sur un tableau donne les indices (0, 1, 2...)
Le plus courant pour des collections de données
const etudiants = [
{ nom: "Alice", age: 20 },
{ nom: "Bob", age: 22 },
{ nom: "Claire", age: 19 }
];
// Parcourir avec for...of
for (let etudiant of etudiants) {
console.log(etudiant.nom + " a " + etudiant.age + " ans");
}
Objet
Données nommées
Une seule entité avec des propriétés
Accès par nom (clé)
Ordre non garanti
{ nom: "Alice", age: 20 }
Tableau
Liste ordonnée
Collection d'éléments similaires
Accès par indice (0, 1, 2...)
Ordre préservé
["Alice", "Bob", "Claire"]
Pattern courant : Tableau d'objets pour des collections structurées
Erreurs à éviter
Ces erreurs sont très fréquentes chez les débutants
Sur un tableau
const noms = ["Alice", "Bob"];
for (let x in noms) {
console.log(x); // 0, 1
}
Donne les indices, pas les valeurs!
La bonne façon
const noms = ["Alice", "Bob"];
for (let x of noms) {
console.log(x); // "Alice", "Bob"
}
for...of pour les tableaux!
Mémorisez :
for...in = objets (clés) | for...of = tableaux (valeurs)
Quand la clé est dans une variable, utiliser bracket notation!
L'erreur
const cle = "nom";
console.log(objet.cle);
// undefined!
Cherche une propriété "cle"
La solution
const cle = "nom";
console.log(objet[cle]);
// "Alice"
Utilise la valeur de la variable
Règle : Variable comme clé = obligatoirement [variable]
Clés avec espaces ou tirets = guillemets obligatoires
Sans guillemets
const produit = {
nom-produit: "Laptop" // Erreur!
};
JavaScript interprète comme une soustraction
Avec guillemets
const produit = {
"nom-produit": "Laptop" // OK!
};
La clé est une chaîne valide
Conseil : Préférer des clés simples (sans espaces ni tirets) pour éviter ce piège
Un objet = des paires clé-valeur avec des noms explicites
Bracket notation est nécessaire quand la clé est dans une variable
const empêche de réassigner la variable, PAS de modifier les propriétés
Le pattern tableau d'objets est le plus courant pour des collections
Créer
{ clé: valeur }
Accéder
objet.propriete ou objet["cle"]
Modifier
objet.propriete = nouvelleValeur
Itérer
for (let cle in objet)
Les objets organisent les données avec des noms
Plus lisibles que les indices d'un tableau!
1. Créer un objet "livre"
Avec titre, auteur, année et l'afficher
2. Accéder dynamiquement
Demander une propriété à l'utilisateur et l'afficher
3. Tableau d'étudiants
Créer un tableau de 3 objets étudiants et afficher leurs noms
4. Modifier un étudiant
Ajouter une propriété "note" et modifier l'âge
Les objets structurent vos données
Prochaine leçon : Les méthodes et this