🔁 Itérer sur des objets

(« Mais comment je boucle là-dessus en JavaScript ?! » — cet article est pour toi)

🧠 D’abord, on se détend : qu’est-ce que “l’itération” ?

L’itération, c’est en fait très simple :

👉 Accéder aux éléments d’une chose, un par un

On le fait déjà dans la vraie vie :

• 🍕 On mange une pizza part tranche par tranche
• 📺 On regarde une série épisode par épisode
• 🎧 On écoute une playlist morceau par morceau

En JavaScript, certaines structures disent :

« Tu peux me parcourir étape par étape, roi 😎 »

Ces structures s’appellent des Iterables.

🤓 Que veut dire “Iterable” ? (Définition légendaire en une phrase)

Un iterable, c’est quelque chose que tu peux parcourir avec for...of.

C’est tout.
Le reste, c’est de l’overthinking 😄

✅ Quelles structures sont iterables ? (La liste en or)

Les structures iterables par défaut en JavaScript :

🎢 Parcourir un tableau (le plus facile)

const fruits = ["🍎", "🍌", "🍉"];

for (let fruit of fruits) {
  console.log(fruit);
}

🧠 Que se passe-t-il ici ?

• for...of → donne la valeur elle-même
• fruit → un élément à chaque tour
• Résultat :

🍎
🍌
🍉

📌 Astuce :
for...of = « donne-moi la valeur »
for...in = « donne-moi la clé » (on y arrive)

🔤 Les strings sont aussi iterables (surprise !)

const name = "Cansu";

for (let char of name) {
  console.log(char);
}

🧠 Résultat :

C
a
n
s
u

💡 Mini-info :
JavaScript peut découper une string caractère par caractère
Ça marche aussi avec les emojis 😎

🚨 Grosse déception : pourquoi on ne peut pas itérer sur un objet ?

const user = {
  name: "Cansu",
  age: 25
};

for (let item of user) {
  console.log(item);
}

💥 ERREUR !

JavaScript dit :

« Frérot… aucune idée de comment parcourir ça 🤷‍♂️ »

Parce que :

• Les objets n’ont pas d’ordre garanti
• JavaScript ne sait pas quelle règle suivre

MAIS…
Nous, on est plus malins que JavaScript 😏

🛠️ Les façons d’itérer sur un objet

(Le trio sauve-la-vie)

1️⃣ Object.keys() – Parcourir les clés

const user = {
  name: "Cansu",
  age: 25,
  job: "Frontend Dev"
};

const keys = Object.keys(user);

for (let key of keys) {
  console.log(key);
}

🧠 Explication :

• Object.keys(user) → ["name", "age", "job"]
• On a maintenant un tableau
• Tableau = iterable 😎

📌 Quand l’utiliser ?
Quand seules les clés t’intéressent.

2️⃣ Object.values() – Parcourir les valeurs

const values = Object.values(user);

for (let value of values) {
  console.log(value);
}

🧠 Résultat :

Cansu
25
Frontend Dev

📌 Quand l’utiliser ?
Quand les clés n’importent pas et que tu veux juste les valeurs.

3️⃣ Object.entries() – MODE LÉGENDAIRE 🔥

const entries = Object.entries(user);

for (let [key, value] of entries) {
  console.log(`${key} → ${value}`);
}

🧠 Résultat :

name → Cansu
age → 25
job → Frontend Dev

📌 Pourquoi c’est génial ?

• Tu obtiens la clé et la valeur
• Destructuring ✨
• Propre, lisible, moderne

Ça donne un vrai vibe de dev senior 😎

⚔️ for...in vs for...of (on clarifie)

for...in

for (let key in user) {
  console.log(key);
}

• Retourne les clés
• Fonctionne sur les objets
• Risqué à cause de la chaîne de prototypes 😬

for...of

for (let item of array) {
  console.log(item);
}

• Retourne les valeurs
• Nécessite un iterable
• Moderne et sûr ✅

📌 Règle d’or :
Objet + JS moderne = Object.entries() + for...of

🧙‍♂️ La vraie magie : Symbol.iterator

Si quelque chose est iterable, il possède cette porte secrète :

Symbol.iterator

Quand JavaScript voit ça, il se dit :

« OK, je sais comment parcourir ça. »

🛠️ Créons notre propre objet iterable (Level Up ⬆️)

const counter = {
  start: 1,
  end: 5,
  [Symbol.iterator]() {
    let current = this.start;
    let last = this.end;

    return {
      next() {
        if (current <= last) {
          return { value: current++, done: false };
        }
        return { done: true };
      }
    };
  }
};

Utilisation :

for (let number of counter) {
  console.log(number);
}

🧠 Résultat :

1
2
3
4
5

🔍 Que se passe-t-il dans ce code ?

• [Symbol.iterator]() → condition pour être iterable
• next() → appelé à chaque tour
• value → valeur courante
• done: true → « c’est fini » 🚦

📌 À quoi ça sert ?

• Structures de données personnalisées
• Contrôle des boucles infinies
• Comprendre les generators en profondeur

🎁 BONUS : la version facile avec les generators

function* counterGen(start, end) {
  for (let i = start; i <= end; i++) {
    yield i;
  }
}

for (let num of counterGen(1, 5)) {
  console.log(num);
}

💡 Plus court
💡 Plus lisible
💡 Plus moderne

🧠 Super astuces (à sauvegarder ⭐)

• forEach → break ne fonctionne pas
• for...of → break & continue fonctionnent
• Besoin de performance ? → for...of
• Parcourir un objet ? → Object.entries()

💬 Conclusion (avec le cœur)

Tout n’est pas iterable en JavaScript…
mais ceux qui savent rendre les choses iterables gagnent la partie 😌✨