Boucle for…in en JavaScript : Parcourir les propriétés d’un objet 🕵️‍♂️💻

Bonjour les héros du code ! 🦸‍♀️🦸‍♂️
Aujourd’hui, nous allons rencontrer l’un des héros cachés de JavaScript : la boucle for…in. Apprendre à parcourir les objets n’est pas seulement une compétence pratique, cela peut aussi faire de vous un « détective des propriétés » dans le monde de JS. 🔍

Dans cet article, nous verrons tout, des exemples simples aux mini-applications créatives. Allons-y ! 🎉

1️⃣ Objets et propriétés : les réponses cachées 🗝️

En JavaScript, les objets sont composés de paires clé-valeur. Chaque propriété a donc une clé et une valeur.

Exemple :

const voiture = {
  marque: "Tesla",
  modele: "Model S",
  annee: 2025
};

• marque → Clé
• "Tesla" → Valeur
• modele → Clé
• "Model S" → Valeur
• annee → Clé
• 2025 → Valeur

💡 Astuce : Les objets sont comme un « trésor de propriétés ». Avec le bon outil (for…in), vous pouvez voir tout ce qu’il contient.

2️⃣ Parcourir les objets avec for…in 🔄

La boucle for…in parcourt les propriétés énumérables d’un objet et nous donne la clé à chaque itération.

Exemple simple :

for (let propriete in voiture) {
  console.log("Propriété : " + propriete);       // marque, modele, annee
  console.log("Valeur : " + voiture[propriete]); // Tesla, Model S, 2025
}

Explication du code :

1. La variable propriete contient le nom de la propriété à chaque itération.
2. voiture[propriete] nous donne la valeur de cette clé.
3. voiture.propriete ne fonctionne pas car propriete est une variable, pas le nom littéral de la clé.

💡 Note amusante : C’est comme ouvrir un coffre au trésor : les clés sont entre vos mains et les valeurs à portée de doigts !

3️⃣ for…in vs for…of : éviter la confusion ⚔️

On les confond souvent :

const nombres = [10, 20, 30];

// for...of
for (let num of nombres) {
  console.log(num); // 10, 20, 30 ✅
}

// for...in
for (let index in nombres) {
  console.log(index);        // 0, 1, 2 (indices) ✅
  console.log(nombres[index]); // 10, 20, 30 ✅
}

Astuce :

• Tableau = for…of
• Objet = for…in

Attention : Utiliser for…in sur un tableau peut aussi retourner des propriétés du prototype, donc c’est mieux pour les objets.

4️⃣ Profil de héros mini avec for…in 🌟

Créons un personnage de mini-jeu et affichons toutes ses propriétés avec for…in :

const hero = {
  nom: "Lara Croft",
  profession: "Archéologue",
  energie: 100,
  arme: "Pistolet"
};

for (let propriete in hero) {
  console.log(`${propriete.toUpperCase()}: ${hero[propriete]}`);
}

Résultat :

NOM: Lara Croft
PROFESSION: Archéologue
ENERGIE: 100
ARME: Pistolet

Explication du code :

• toUpperCase() met en valeur les noms des propriétés — ça a l’air cool 😎
• ${propriete}: ${hero[propriete]} utilise les template literals pour un rendu lisible et pratique.

💡 Astuce : Ainsi, vous pouvez vérifier toutes les statistiques de votre personnage en une seule boucle. Parfait pour un jeu RPG ! 🎮

5️⃣ Chaîne de prototypes et hasOwnProperty() ⚠️

Attention ! La boucle for…in ne parcourt pas seulement vos propriétés, elle peut aussi inclure celles de la chaîne de prototypes.

const animal = { type: "Chat" };
Object.prototype.age = 3;

for (let propriete in animal) {
  console.log(propriete); // type et age
}

Pour ne voir que les propriétés propres à l’objet, utilisez hasOwnProperty() :

for (let propriete in animal) {
  if (animal.hasOwnProperty(propriete)) {
    console.log(propriete); // type ✅
  }
}

💡 Astuce : Vérifier la chaîne de prototypes, c’est comme utiliser un filtre magique en JavaScript. ✨

6️⃣ Tableaux et for…in : les pièges 🕳️

Utiliser for…in avec des tableaux n’est pas recommandé :

const nombres = [10, 20, 30];
for (let i in nombres) {
  console.log(i);        // 0, 1, 2 ✅
  console.log(nombres[i]); // 10, 20, 30 ✅
}

Ça fonctionne, mais si des propriétés sont ajoutées via le prototype, for…in les parcourra aussi.
Pour les tableaux, for…of est plus sûr.

7️⃣ Exemple créatif avec for…in 🌈

Imaginons un objet avec les notes d’un étudiant et affichons-les avec des étoiles ⭐ :

const etudiant = {
  math: 90,
  physique: 85,
  chimie: 95
};

for (let matiere in etudiant) {
  const note = etudiant[matiere];
  const etoiles = "*".repeat(Math.round(note / 10));
  console.log(`${matiere.toUpperCase()}: ${etoiles} (${note})`);
}

Résultat :

MATH: ********* (90)
PHYSIQUE: ******** (85)
CHIMIE: ********* (95)

💡 Explication :

• *.repeat() visualise la note avec des étoiles.
• Le code est amusant, visuel et pédagogique à la fois.

8️⃣ Résumé et conseils pour les héros du code 🏁

• for…in parcourt toutes les propriétés d’un objet.
• Facilite la lecture des données d’un objet, mais attention à la chaîne de prototypes.
• Pour les tableaux, utilisez for…of.
• Les mini-jeux, personnages RPG ou visualisations rendent l’apprentissage de JS plus fun.

💡 Petit conseil de vie :

« Explorer toutes les propriétés d’un objet, c’est comme découvrir des trésors cachés. for…in est votre carte au trésor ! » 🗺️✨