Simple, efficace, et le genre d’itération qui te fait dire
« Pourquoi je n’ai pas utilisé ça plus tôt ? » 🔁✨
À un moment donné en JavaScript, tu arrives à ce moment-là…
Tu écris ton code, tout se passe bien.
Puis quelqu’un te dit :
« Parcours les éléments de ce tableau un par un. »
Et, par réflexe, tu fais ça :
for (let i = 0; i < array.length; i++) {
console.log(array[i]);
}
Puis, discrètement, dans ta tête :
« Ce n’est pas un peu… long ? » 😐
C’est là que for…of te regarde et te dit :
« Allez… ne complique pas les choses. »
Qu’est-ce que for…of ? (En langage humain)
for…of te permet d’itérer sur les valeurs à l’intérieur de structures itérables.
Que signifie “itérable” ?
Si tu peux répondre « oui » à cette question, c’est itérable :
« Puis-je parcourir son contenu un par un ? »
✔ Array
✔ String
✔ Set
✔ Map
✔ NodeList (provenant du DOM)
❌ Objets simples {} (on y revient)
La structure de base de for…of (Anatomie 🧠)
for (const item of iterable) {
// faire quelque chose
}
Tu peux lire ça comme :
« Pour chaque élément dans cet itérable, fais ceci… »
Pourquoi c’est si agréable ?
- Pas de
i - Pas de
length - Pas de
array[i] - Pas de surchauffe cérébrale 🔥❌
L’exemple le plus simple : for…of avec un tableau
const colors = ["red", "blue", "green"];
for (const color of colors) {
console.log(color);
}
Étape par étape — Que se passe-t-il ?
1️⃣ La boucle démarre
2️⃣ Le premier élément de colors est pris → "red"
3️⃣ Il est assigné à la variable color
4️⃣ console.log(color) s’exécute
5️⃣ On passe à l’élément suivant
📌 Important :
Ici, color n’est pas un index, c’est la valeur elle-même.
for classique vs for…of (Un peu de commérages 😄)
for classique (Discipliné mais froid)
for (let i = 0; i < colors.length; i++) {
console.log(colors[i]);
}
- Tu gères l’index toi-même
- Un petit
i <= lengthpar erreur, et c’est fini - Plus de code, plus de risques d’erreur
for…of (Détendu, chill 😎)
for (const color of colors) {
console.log(color);
}
- « Voilà la valeur, utilise-la »
- Plus lisible
- Moins d’erreurs
🧠 Règle de lisibilité :
Le code est écrit pour les humains, pas seulement pour les machines.
for…of avec les strings (Un peu de magie 🪄)
const word = "JavaScript";
for (const char of word) {
console.log(char);
}
📤 Résultat :
J
a
v
a
S
c
r
i
p
t
Pourquoi c’est cool ?
- Parcourt caractère par caractère
- Gère correctement les emojis (détail très important !)
for (const emoji of "🔥🚀") {
console.log(emoji);
}
Les anciennes méthodes ne faisaient pas toujours ça correctement.
for…of avec Set (Salut aux ennemis des doublons 👋)
const uniqueNumbers = new Set([1, 2, 2, 3, 4]);
for (const num of uniqueNumbers) {
console.log(num);
}
📌 À propos de Set :
- Chaque valeur est stockée une seule fois
- L’itération se fait dans l’ordre
for…of se sent parfaitement à l’aise ici.
for…of avec Map (Niveau professionnel 🎩)
const user = new Map([
["name", "Cansu"],
["age", 26],
["role", "Frontend Developer"]
]);
for (const entry of user) {
console.log(entry);
}
📤 Résultat :
["name", "Cansu"]
["age", 26]
["role", "Frontend Developer"]
Mais on peut faire mieux 😌
Avec le destructuring
for (const [key, value] of user) {
console.log(`${key}: ${value}`);
}
🎯 Propre
🎯 Lisible
🎯 Une vraie vibe « je sais ce que je fais »
for…of vs for…in (Le sujet le plus confus ⚠️)
Que fait for…in ?
- Retourne les clés / index
const arr = ["a", "b", "c"];
for (const i in arr) {
console.log(i);
}
📤 Résultat :
0
1
2
Que fait for…of ?
- Retourne les valeurs
for (const val of arr) {
console.log(val);
}
📤 Résultat :
a
b
c
📌 Règle d’or :
- Tableaux → dans 90 % des cas, utilise
for…of - Objets →
for…inouObject.entries
Pourquoi for…of ne fonctionne pas avec les objets simples ?
const person = { name: "Cansu", age: 26 };
for (const item of person) {
console.log(item); // ❌ TypeError
}
Parce que les objets simples ne sont pas itérables.
La solution : Object.entries
for (const [key, value] of Object.entries(person)) {
console.log(key, value);
}
🧠 for…of + entries = 💖
break et continue avec for…of (On garde le contrôle 🕹️)
break
for (const num of [1, 2, 3, 4, 5]) {
if (num === 3) break;
console.log(num);
}
📤 Résultat :
1
2
continue
for (const num of [1, 2, 3, 4, 5]) {
if (num === 3) continue;
console.log(num);
}
📤 Résultat :
1
2
4
5
📌 Cette liberté n’est pas aussi simple avec map ou forEach.
Quand for…of est-il un choix parfait ?
✔ Quand seules les valeurs comptent
✔ Quand tu veux un code lisible
✔ Quand tu veux pouvoir arrêter la boucle
✔ Quand tu travailles avec Array / String / Map / Set
Quand faut-il l’éviter ?
❌ Quand tu as besoin de l’index
❌ Quand tu parcours directement des objets simples
❌ Quand tu dois supporter des navigateurs fossiles comme IE 🦖
Coin des mini-astuces 💡
🔹 Utilise const → la valeur ne change pas
🔹 Les performances sont largement suffisantes
🔹 Le favori des amateurs de clean code
🔹 Fait dire « nice » en code review 😄
Résumé court mais efficace
for…of= simple + puissant- Axé sur les valeurs
- Améliore fortement la lisibilité 🚀
- Donne une sensation moderne en JavaScript
Et si un jour tu te dis :
« Cette boucle est un peu moche… »
Tu connais déjà la réponse :
Simple, efficace, et le genre d’itération qui te fait dire
« Pourquoi je n’ai pas utilisé ça plus tôt ? » 🔁✨
À un moment donné en JavaScript, tu arrives à ce moment-là…
Tu écris ton code, tout se passe bien.
Puis quelqu’un te dit :
« Parcours les éléments de ce tableau un par un. »
Et, par réflexe, tu fais ça :
for (let i = 0; i < array.length; i++) {
console.log(array[i]);
}
Puis, discrètement, dans ta tête :
« Ce n’est pas un peu… long ? » 😐
C’est là que for…of te regarde et te dit :
« Allez… ne complique pas les choses. »
Qu’est-ce que for…of ? (En langage humain)
for…of te permet d’itérer sur les valeurs à l’intérieur de structures itérables.
Que signifie “itérable” ?
Si tu peux répondre « oui » à cette question, c’est itérable :
« Puis-je parcourir son contenu un par un ? »
✔ Array
✔ String
✔ Set
✔ Map
✔ NodeList (provenant du DOM)
❌ Objets simples {} (on y revient)
La structure de base de for…of (Anatomie 🧠)
for (const item of iterable) {
// faire quelque chose
}
Tu peux lire ça comme :
« Pour chaque élément dans cet itérable, fais ceci… »
Pourquoi c’est si agréable ?
- Pas de
i - Pas de
length - Pas de
array[i] - Pas de surchauffe cérébrale 🔥❌
L’exemple le plus simple : for…of avec un tableau
const colors = ["red", "blue", "green"];
for (const color of colors) {
console.log(color);
}
Étape par étape — Que se passe-t-il ?
1️⃣ La boucle démarre
2️⃣ Le premier élément de colors est pris → "red"
3️⃣ Il est assigné à la variable color
4️⃣ console.log(color) s’exécute
5️⃣ On passe à l’élément suivant
📌 Important :
Ici, color n’est pas un index, c’est la valeur elle-même.
for classique vs for…of (Un peu de commérages 😄)
for classique (Discipliné mais froid)
for (let i = 0; i < colors.length; i++) {
console.log(colors[i]);
}
- Tu gères l’index toi-même
- Un petit
i <= lengthpar erreur, et c’est fini - Plus de code, plus de risques d’erreur
for…of (Détendu, chill 😎)
for (const color of colors) {
console.log(color);
}
- « Voilà la valeur, utilise-la »
- Plus lisible
- Moins d’erreurs
🧠 Règle de lisibilité :
Le code est écrit pour les humains, pas seulement pour les machines.
for…of avec les strings (Un peu de magie 🪄)
const word = "JavaScript";
for (const char of word) {
console.log(char);
}
📤 Résultat :
J
a
v
a
S
c
r
i
p
t
Pourquoi c’est cool ?
- Parcourt caractère par caractère
- Gère correctement les emojis (détail très important !)
for (const emoji of "🔥🚀") {
console.log(emoji);
}
Les anciennes méthodes ne faisaient pas toujours ça correctement.
for…of avec Set (Salut aux ennemis des doublons 👋)
const uniqueNumbers = new Set([1, 2, 2, 3, 4]);
for (const num of uniqueNumbers) {
console.log(num);
}
📌 À propos de Set :
- Chaque valeur est stockée une seule fois
- L’itération se fait dans l’ordre
for…of se sent parfaitement à l’aise ici.
for…of avec Map (Niveau professionnel 🎩)
const user = new Map([
["name", "Cansu"],
["age", 26],
["role", "Frontend Developer"]
]);
for (const entry of user) {
console.log(entry);
}
📤 Résultat :
["name", "Cansu"]
["age", 26]
["role", "Frontend Developer"]
Mais on peut faire mieux 😌
Avec le destructuring
for (const [key, value] of user) {
console.log(`${key}: ${value}`);
}
🎯 Propre
🎯 Lisible
🎯 Une vraie vibe « je sais ce que je fais »
for…of vs for…in (Le sujet le plus confus ⚠️)
Que fait for…in ?
- Retourne les clés / index
const arr = ["a", "b", "c"];
for (const i in arr) {
console.log(i);
}
📤 Résultat :
0
1
2
Que fait for…of ?
- Retourne les valeurs
for (const val of arr) {
console.log(val);
}
📤 Résultat :
a
b
c
📌 Règle d’or :
- Tableaux → dans 90 % des cas, utilise
for…of - Objets →
for…inouObject.entries
Pourquoi for…of ne fonctionne pas avec les objets simples ?
const person = { name: "Cansu", age: 26 };
for (const item of person) {
console.log(item); // ❌ TypeError
}
Parce que les objets simples ne sont pas itérables.
La solution : Object.entries
for (const [key, value] of Object.entries(person)) {
console.log(key, value);
}
🧠 for…of + entries = 💖
break et continue avec for…of (On garde le contrôle 🕹️)
break
for (const num of [1, 2, 3, 4, 5]) {
if (num === 3) break;
console.log(num);
}
📤 Résultat :
1
2
continue
for (const num of [1, 2, 3, 4, 5]) {
if (num === 3) continue;
console.log(num);
}
📤 Résultat :
1
2
4
5
📌 Cette liberté n’est pas aussi simple avec map ou forEach.
Quand for…of est-il un choix parfait ?
✔ Quand seules les valeurs comptent
✔ Quand tu veux un code lisible
✔ Quand tu veux pouvoir arrêter la boucle
✔ Quand tu travailles avec Array / String / Map / Set
Quand faut-il l’éviter ?
❌ Quand tu as besoin de l’index
❌ Quand tu parcours directement des objets simples
❌ Quand tu dois supporter des navigateurs fossiles comme IE 🦖
Coin des mini-astuces 💡
🔹 Utilise const → la valeur ne change pas
🔹 Les performances sont largement suffisantes
🔹 Le favori des amateurs de clean code
🔹 Fait dire « nice » en code review 😄
Résumé court mais efficace
for…of= simple + puissant- Axé sur les valeurs
- Améliore fortement la lisibilité 🚀
- Donne une sensation moderne en JavaScript
Et si un jour tu te dis :
« Cette boucle est un peu moche… »
Tu connais déjà la réponse :
Écris
for…ofet avance. 😎
