Tout savoir sur la boucle « for…in » en JavaScript

La boucle « for…in » est une des structures de boucles js fondamentales pour parcourir les propriétés d’un objet. Bien qu’elle soit simple à utiliser, elle présente des spécificités importantes à comprendre afin de l’utiliser efficacement. Dans ce guide complet, nous allons explorer la boucle « for…in », de sa syntaxe à ses applications pratiques, avec des exemples clairs, des explications détaillées et une FAQ pour répondre à toutes vos questions.

---

Qu’est-ce qu’une boucle « for…in » ?

La boucle « for…in » est une instruction qui permet d’itérer sur les propriétés énumérables d’un objet. Contrairement à d’autres types de boucles, elle ne parcourt pas directement les valeurs, mais les noms des propriétés (ou clés) d’un objet.

Différences entre « for…in » et autres boucles

• Boucle « for » classique : Parcourt les index d’un tableau ou un nombre d’itérations précisé.
• Boucle « for…of » : Itère sur les valeurs des objets itérables (tableaux, chaînes, etc.).
• Boucle « for…in » : Spécifique aux noms de propriétés des objets.

Cas d’utilisation principaux

• Parcourir les propriétés d’un objet : Utile pour lire ou manipuler des clés et leurs valeurs associées.
• Analyser dynamiquement un objet : Idéal pour des situations où les propriétés de l’objet ne sont pas connues à l’avance.

---

Syntaxe de la boucle « for…in »

Voici la structure de base d’une boucle « for…in » :

for (variable in objet) {
  // Code à exécuter
}

• variable : Une variable qui recevra successivement chaque nom de propriété énumérable de l’objet.
• objet : L’objet sur lequel itérer.

Exemple simple :

const utilisateur = { nom: "Alice", âge: 30, ville: "Paris" };

for (let prop in utilisateur) {
  console.log(`Propriété : ${prop}, Valeur : ${utilisateur[prop]}`);
}

Output :

Propriété : nom, Valeur : Alice
Propriété : âge, Valeur : 30
Propriété : ville, Valeur : Paris

Explication :

• La variable prop contient les noms des propriétés de l’objet.
• L’expression utilisateur[prop] permet d’accéder aux valeurs associées à ces clés.
• Ce type de boucle est très utile pour analyser des objets dont on ne connaît pas les clés à l’avance.

---

Bonnes pratiques pour utiliser « for…in »

1. Utiliser « for…in » uniquement pour les objets

Pourquoi ? Bien que possible, utiliser « for…in » sur un tableau peut donner des résultats imprévisibles car l’ordre des clés n’est pas garanti. Pour les tableaux, préférez « for…of » ou des méthodes comme forEach.

2. Combiner « for…in » avec hasOwnProperty

Objectif : Empêcher l’itération sur des propriétés héritées du prototype.

const objet = Object.create({ proprietaire: "Jean" });
objet.nom = "Livre";

for (let prop in objet) {
  if (objet.hasOwnProperty(prop)) {
    console.log(`${prop} : ${objet[prop]}`);
  }
}

Output :

nom : Livre

3. Éviter d’utiliser « for…in » sur des Symboles

Les clés de type Symbole ne seront pas itérées par « for…in ». Utilisez des méthodes comme Object.getOwnPropertySymbols() pour les manipuler.

---

Exemples pratiques avec la boucle « for…in »

Exemple 1 : Parcourir un objet

const voiture = { marque: "Toyota", modèle: "Corolla", année: 2021 };

for (let prop in voiture) {
  console.log(`${prop} : ${voiture[prop]}`);
}

Output :

marque : Toyota
modèle : Corolla
année : 2021

Détails :

• Chaque clé de l’objet voiture est itérée.
• Le format ${prop} : ${voiture[prop]} permet d’afficher dynamiquement le nom de la propriété et sa valeur associée.

---

Exemple 2 : Utiliser « for…in » avec des conditions

const notes = { math: 18, anglais: 15, histoire: 12 };

for (let matiere in notes) {
  if (notes[matiere] >= 15) {
    console.log(`${matiere} : Excellent (${notes[matiere]})`);
  }
}

Output :

math : Excellent (18)
anglais : Excellent (15)

Analyse :

• La condition notes[matiere] >= 15 permet de filtrer les matières avec des notes élevées.
• Ce type de logique conditionnelle est utile pour appliquer des règles personnalisées lors de l’itération sur un objet.

---

Exemple 3 : Gérer les propriétés héritées

function Personne(nom, âge) {
  this.nom = nom;
  this.âge = âge;
}

Personne.prototype.ville = "Paris";

const utilisateur = new Personne("Alice", 25);

for (let prop in utilisateur) {
  console.log(`${prop} : ${utilisateur[prop]}`);
}

Output :

nom : Alice
âge : 25
ville : Paris

Explication :

• La propriété « ville » appartient au prototype de Personne. Elle est donc incluse par « for…in ».
• Utilisez hasOwnProperty pour exclure les propriétés héritées si nécessaire.

---

Alternatives à la boucle « for…in »

1. Object.keys()

Retourne un tableau des clés énumérables de l’objet.

const utilisateur = { nom: "Alice", âge: 30 };
Object.keys(utilisateur).forEach((key) => {
  console.log(`${key} : ${utilisateur[key]}`);
});

Output :

nom : Alice
âge : 30

---

2. Object.values()

Retourne un tableau des valeurs de l’objet.

Object.values(utilisateur).forEach((value) => {
  console.log(value);
});

Output :

Alice
30

---

3. Object.entries()

Retourne un tableau de paires [clé, valeur].

Object.entries(utilisateur).forEach(([key, value]) => {
  console.log(`${key} : ${value}`);
});

Output :

nom : Alice
âge : 30

---

FAQ : 10 Questions Fréquemment Posées sur « for…in »