Boucle for…in en JavaScript expliquée : syntaxe, cas d’utilisation et bonnes pratiques

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduction｜Quels problèmes l’instruction for…in peut‑elle résoudre ?

JavaScript est l’un des langages de programmation les plus utilisés dans le développement web. Parmi ses nombreuses fonctionnalités, les boucles sont essentielles pour traiter des données de façon répétée.
En particulier, l’instruction for…in est pratique pour itérer sur les propriétés d’un objet.

Objectif de cet article

Dans cet article, nous aborderons en détail les points suivants :

• Syntaxe de base et utilisation de la boucle for…in en JavaScript
• Précautions à prendre lorsqu’on l’utilise avec des tableaux
• Différences avec les autres constructions de boucle (for…of et forEach)
• Erreurs courantes et comment les corriger

Ce que vous allez apprendre

• Comment traiter efficacement les propriétés d’un objet et les éléments d’un tableau
• Précautions et bonnes pratiques d’utilisation de l’instruction for…in
• Exemples de code concrets et comparaisons de performances

Cet article est structuré pour fournir des connaissances utiles tant aux débutants qu’aux développeurs JavaScript intermédiaires.
Commençons dans la section suivante avec les bases de l’instruction for…in.

2. Qu’est‑ce que l’instruction for…in en JavaScript ?【Explication de base】

En JavaScript, l’instruction for…in sert à itérer sur les propriétés d’un objet. Cette syntaxe est particulièrement adaptée aux objets, vous permettant de traiter chaque nom de propriété (clé) un à un.

Syntaxe de base

Voici la syntaxe de base de la boucle for…in :

for (variable in object) {
  // Repeated processing
}

Explication des paramètres :

• variable : stocke le nom de la propriété courante (clé).
• object : l’objet cible que vous souhaitez parcourir.

Exemple d’utilisation : énumérer les propriétés d’un objet

const person = {
  name: "Taro",
  age: 25,
  city: "Tokyo"
};

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

Sortie :

name: Taro
age: 25
city: Tokyo

Attention : ordre des propriétés énumérées

L’ordre des propriétés dans une boucle for…in n’est pas garanti. Selon les spécifications JavaScript, l’ordre peut ne pas correspondre à l’ordre d’insertion lorsque les clés sont des chaînes de caractères. Si vous avez besoin d’un ordre strict, utilisez des alternatives comme Object.keys().

Résumé des caractéristiques

1. Récupération facile des clés d’un objet : utile lorsqu’on accède dynamiquement aux noms de propriétés.
2. Seules les propriétés énumérables sont ciblées : les propriétés non énumérables (enumerable: false) sont exclues.
3. Les propriétés héritées du prototype sont également énumérées : cela peut poser problème, comme nous le verrons dans la section suivante.

3. Tableaux et instruction for…in｜Points clés à surveiller

L’instruction for…in de JavaScript est conçue pour énumérer les propriétés d’un objet, mais elle peut également être utilisée avec des tableaux. Cependant, plusieurs mises en garde s’appliquent lorsqu’on l’applique aux tableaux. Examinons son comportement et les pièges associés en détail.

Comportement de base avec les tableaux

Considérons l’exemple suivant :

const fruits = ["Apple", "Banana", "Orange"];

for (const index in fruits) {
  console.log(index, fruits[index]);
}

Sortie :

0 Apple  
1 Banana  
2 Orange

Mise en garde 1 : les propriétés du prototype peuvent être énumérées

Array.prototype.newMethod = function () {
  return "New Method";
};

for (const index in fruits) {
  console.log(index, fruits[index]);
}

Sortie :

0 Apple  
1 Banana  
2 Orange  
newMethod undefined

Solution :

for (const index in fruits) {
  if (fruits.hasOwnProperty(index)) {
    console.log(index, fruits[index]);
  }
}

Mise en garde 2 : l’ordre n’est pas garanti

const data = [];
data[10] = "Apple";
data[1] = "Banana";
data[5] = "Orange";

for (const index in data) {
  console.log(index, data[index]);
}

Sortie :

1 Banana  
5 Orange  
10 Apple

Mise en garde 3 : les index sont traités comme des chaînes

const numbers = [10, 20, 30];
for (const index in numbers) {
  console.log(typeof index); // "string"
}

Solution :

for (const index in numbers) {
  const numIndex = parseInt(index, 10);
  console.log(numIndex, numbers[numIndex]);
}

Résumé

• L’instruction for…in convient mieux aux objets qu’aux tableaux.
• Pour le traitement de l’ordre et des index numériques, for…of ou une boucle for traditionnelle est recommandée.

4. Différences entre for…in et for…of【Tableau de comparaison】

En JavaScript, les deux boucles for…in et for…of sont disponibles pour itérer, mais leurs cas d’utilisation et leur comportement diffèrent.

Comparaison de syntaxe

for…in:

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key); // Retrieves keys
}

for…of:

const arr = [10, 20, 30];
for (const value of arr) {
  console.log(value); // Retrieves values
}

Tableau de comparaison

Exemple pratique｜Gestion des tableaux

const arr = ['a', 'b', 'c'];

// for...in
for (const index in arr) {
  console.log(index); // Output: 0, 1, 2
}

// for...of
for (const value of arr) {
  console.log(value); // Output: 'a', 'b', 'c'
}

Résumé

• for…in : Idéal pour gérer les clés d’objets.
• for…of : Idéal pour les tableaux et les objets itérables.

5. Utilisation pratique : Applications et bonnes pratiques de l’instruction for…in

Ici, nous explorerons les applications pratiques de l’instruction for…in en JavaScript et présenterons des bonnes pratiques utiles dans le développement réel.

1. Exemple 1｜Filtrage des propriétés d’objet

const user = {
  name: "Tanaka",
  age: 30,
  email: "tanaka@example.com",
  password: "secret123"
};

const publicData = {};
for (const key in user) {
  if (key !== "password") {
    publicData[key] = user[key];
  }
}
console.log(publicData);

Sortie :

{ name: 'Tanaka', age: 30, email: 'tanaka@example.com' }

2. Exemple 2｜Traitement d’objets imbriqués

const data = {
  user: {
    name: "Sato",
    info: {
      age: 28,
      city: "Osaka"
    }
  }
};

function printNested(obj) {
  for (const key in obj) {
    if (typeof obj[key] === "object") {
      printNested(obj[key]);
    } else {
      console.log(`${key}: ${obj[key]}`);
    }
  }
}

printNested(data);

Sortie :

name: Sato
age: 28
city: Osaka

3. Bonne pratique｜Exclusion des propriétés du prototype

const obj = { a: 1, b: 2 };
Object.prototype.c = 3;

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(`${key}: ${obj[key]}`);
  }
}

Sortie :

a: 1
b: 2

Résumé

• Nous avons présenté des cas d’utilisation appropriés pour le filtrage et la gestion d’objets imbriqués.
• Utilisez hasOwnProperty() pour empêcher l’énumération non intentionnelle d’héritages du prototype.

6. Erreurs courantes et solutions avec for…in【Débutants】

1. Exemple d’erreur 1｜Les propriétés du prototype sont énumérées

const obj = { a: 1, b: 2 };
Object.prototype.c = 3;

for (const key in obj) {
  console.log(key, obj[key]);
}

Sortie :

a 1
b 2
c 3

Solution :

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key, obj[key]);
  }
}

2. Exemple d’erreur 2｜Utilisation de for…in avec des tableaux

const arr = [10, 20, 30];
Array.prototype.extra = "Additional Data";

for (const index in arr) {
  console.log(index, arr[index]);
}

Sortie :

0 10
1 20
2 30
extra undefined

Solution :

for (const value of arr) {
  console.log(value);
}

3. Exemple d’erreur 3｜Gestion des valeurs indéfinies

const obj = { a: 1, b: undefined, c: 3 };

for (const key in obj) {
  console.log(key, obj[key]);
}

Solution :

for (const key in obj) {
  const value = obj[key] ?? "Default Value";
  console.log(key, value);
}

Résumé

• Problèmes de propriétés du prototype : Utilisez hasOwnProperty().
• Gestion des tableaux : Privilégiez for…of ou forEach plutôt que for…in.
• Valeurs indéfinies : Assignez des valeurs par défaut avec l’opérateur de coalescence nulle ( ?? ).

7. Tests de performance et alternatives à for…in

1. Comparaison de performance

Instruction for…in :

const obj = { a: 1, b: 2, c: 3 };
console.time("for...in");
for (const key in obj) {
  console.log(key, obj[key]);
}
console.timeEnd("for...in");

Object.keys() :

console.time("Object.keys");
Object.keys(obj).forEach(key => {
  console.log(key, obj[key]);
});
console.timeEnd("Object.keys");

2. Résultat de comparaison d’exemple

for...in: 0.015ms
Object.keys: 0.005ms

3. Alternatives recommandées

• Gestion des objets : Privilégiez Object.keys() pour de meilleures performances et une plus grande sécurité.
• Gestion des tableaux : Utilisez for…of ou forEach pour une itération plus rapide et plus fiable.

Résumé

• L’instruction for…in est pratique, mais choisissez la construction de boucle la plus appropriée en tenant compte des performances et de la sécurité.

8. Conclusion｜Comprendre l’instruction for…in et les étapes suivantes

1. Points clés

1. Syntaxe de base et utilisation de for…in :

• Utilisé pour parcourir les noms des propriétés d’un objet.
• Spécialisé pour les clés d’objet, pas pour les tableaux.

1. Précautions lors de l’utilisation avec des tableaux :

• L’ordre n’est pas garanti et les propriétés de la chaîne de prototypes peuvent être incluses.
• Pour les tableaux, utilisez for…of ou forEach() à la place.

1. Différences entre for…in et for…of :

• for…in : Parcourt les noms des propriétés (clés).
• for…of : Parcourt les valeurs réelles des tableaux ou des objets itérables.

1. Applications pratiques et bonnes pratiques :

• Gestion des objets imbriqués avec récursion.
• Exclusion de l’héritage du prototype avec hasOwnProperty().
• Amélioration des performances et de la sécurité avec Object.keys() ou Object.entries().

1. Optimisation des performances :

• Object.keys() + forEach() est recommandé pour garantir l’ordre et l’efficacité, constituant une alternative plus sûre à for…in.

2. Réponses aux questions fréquentes

Q1. Dois-je éviter d’utiliser l’instruction for…in ?

• R : Elle convient pour énumérer les propriétés d’un objet, mais pour les tableaux ou les tâches critiques en termes de performances, for…of ou Object.keys() est plus sûr et plus efficace.

Q2. Les propriétés du prototype seront-elles toujours énumérées ?

• R : Oui. Selon la spécification, les propriétés héritées du prototype sont également incluses. Utilisez hasOwnProperty() pour éviter ce problème.

Q3. Quelle est la meilleure boucle selon les tableaux ou les objets ?

• Objets : Utilisez for…in ou Object.keys().
• Tableaux : Utilisez for…of ou forEach().

3. Étapes suivantes｜Ce qu’il faut apprendre ensuite

1. Itérables et objets itérables :

• Structures de données comme Map, Set, WeakMap, WeakSet et les boucles pour les manipuler.

1. Fonctions d’ordre supérieur pour la gestion des données :

• Utilisation pratique de map(), filter(), reduce().

1. Techniques avancées pour les objets et les tableaux :

• Utilisation de Object.values() et Object.entries() pour un traitement efficace des données.

1. Fonctionnalités modernes de JavaScript :

• Fonctionnalités ES6+ comme l’opérateur de propagation et la déstructuration pour un code plus propre.

1. Programmation asynchrone avec Promise/Async/Await :

• Appliquer les boucles dans le traitement en temps réel comme la récupération de données et la gestion dynamique d’objets.

4. Réflexions finales｜Maîtriser les boucles JavaScript

Dans cet article, nous nous sommes concentrés sur l’instruction JavaScript for…in, couvrant son utilisation de base, ses applications avancées, ses pièges et ses alternatives.

Points les plus importants :

• for…in est idéal pour énumérer les propriétés d’un objet, mais pour les tableaux ou les tâches axées sur la performance, d’autres approches doivent être utilisées.
• Suivez toujours les meilleures pratiques et les mesures de sécurité pour éviter les erreurs et les comportements inattendus dans votre code.

Prochaine étape !

Approfondissez votre compréhension des méthodes alternatives et des fonctions d’ordre supérieur pour amener vos compétences JavaScript au niveau supérieur.