1. Boucle for in : détails et problèmes courants

La boucle for in est conçue pour itérer sur les propriétés énumérables d'un objet. Cependant, son utilisation avec des tableaux peut entraîner plusieurs problèmes :

• L'index retourné est une chaîne de caractères, ce qui peut causer des erreurs lors d'opérasions arithmétiques.
• L'ordre d'itération n'est pas garanti d'être séquentiel.
• Elle parcourt toutes les propriétés énumérables, y compris celles héritées du prototype.

Par conséquent, il est recommandé d'éviter for in pour les tableaux et de l'utiliser principalement pour les objets.

Exemple d'index en chaîne de caractères

let donnees = [10, 20, 30, 40];
donnees.label = "tableau exemple";
for (let idx in donnees) {
    // L'index est une chaîne, donc la concaténation produit "01", "11", etc.
    console.log("Index concaténé : ", idx + 1);
    console.log("Valeur : ", donnees[idx]);
}

Parcours des propriétés héritées

Object.prototype.saluer = function() {
    console.log('Bonjour');
};
let objet = {
    x: 100,
    y: 200,
    z: 300
};

for (let cle in objet) {
    console.log('Clé trouvée :', cle);
}

Filtrage des propriétés propres avec hasOwnProperty

Pour éviter d'itérer sur les propriétés héritées, on peut utiliser hasOwnProperty :

Object.prototype.saluer = function() {
    console.log('Bonjour');
};
let profil = {
    nom: 'Alice',
    age: 30,
    metier: 'Développeuse'
};
profil.taille = '1.65m';
profil['poids'] = '60kg';

for (let cle in profil) {
    if (profil.hasOwnProperty(cle)) {
        console.log('Propriété propre :', cle);
    }
}

Récupération des clés d'un objet avec Object.keys

La méthode Object.keys en ES5 retourne un tableau des clés propres de l'objet, sans les propriétés héritées :

Object.prototype.saluer = function() {
    console.log('Bonjour');
};
let utilisateur = {
    prenom: 'Bob',
    email: 'bob@example.com',
    actif: true
};

let clesPropres = Object.keys(utilisateur);
console.log('Clés propres :', clesPropres);
// Sortie : ["prenom", "email", "actif"]

2. Boucle for of : utilisation pour les itérables

La boucle for of, introduite en ES6, itère sur les valeurs d'objets itérables comme les tableaux, les chaînes de caractères, les Map, les Set, etc.

Parcours d'un tableau d'objets

let eleves = [
    { nom: 'Claire', age: 15 },
    { nom: 'David', age: 16 },
    { nom: 'Eva', age: 14 }
];

for (let eleve of eleves) {
    console.log(eleve);
}

Parcours d'une chaîne de caractères

let message = "JavaScript!";
for (let caractere of message) {
    console.log(caractere);
}

Modification des éléments lors de l'itération

let produits = [
    { id: 1, prix: 10 },
    { id: 2, prix: 20 },
    { id: 3, prix: 30 }
];

for (let item of produits) {
    item.tva = item.prix * 0.2;
}

3. Différences entre for in et for of

• for in itère sur les clés (index ou noms de propriétés), tandis que for of itère sur les valeurs.
• for in est disponible depuis ES5, alors que for of est une fonctionnalité d'ES6.
• for in est adapté aux objets, mais présente des risques avec les tablaeux à cause des propriétés héritées et des index en chaîne. for of évite ces problèmes et fonctionne avec tout itérable.
• Les deux boucles supportent break, continue et return.

En résumé, utilisez for in pour les objets et for of pour les tableaux et autres collections itérables.