Déclaration for…in en JavaScript expliquée : syntaxe, pièges 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 largement utilisés dans le développement web. Parmi ses nombreuses fonctionnalités, le traitement en boucle est essentiel pour manipuler des données de manière répétée.

En particulier, l’instruction for…in est utile lorsqu’on parcourt les propriétés d’un objet.

Objectif de cet article

Cet article explique en détail les points suivants :

• La syntaxe de base et l’utilisation de l’instruction for…in en JavaScript
• Les considérations importantes lors de son utilisation avec des tableaux
• Les différences par rapport à d’autres constructions de boucle comme for…of et forEach
• Les erreurs courantes et leurs solutions

Ce que vous apprendrez dans cet article

• 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 pratiques et comparaisons de performances

Cet article est structuré pour aider les développeurs JavaScript débutants à intermédiaires à acquérir des connaissances pratiques applicables à des projets réels.

Passons maintenant à l’examen des bases de l’instruction for…in dans la section suivante.

2. Qu’est‑ce que l’instruction for…in en JavaScript ? [Basic Explanation]

En JavaScript, l’instruction for…in sert à parcourir 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 l’instruction for…in.

for (variable in object) {
  // 반복 처리
}

Description des paramètres :

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

Exemple : énumération des 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

Note importante : ordre des propriétés énumérées

Avec l’instruction for…in, l’ordre des propriétés n’est pas garanti. Selon la spécification JavaScript, lorsque les clés sont des chaînes, elles ne sont pas nécessairement traitées dans l’ordre d’ajout. Si vous avez besoin d’un ordre strict, vous devez utiliser d’autres approches comme Object.keys().

Caractéristiques principales

1. Accès facile aux clés d’un objet : utile lorsque vous devez récupérer dynamiquement les noms de propriétés d’un objet.
2. Seules les propriétés énumérables sont incluses : 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, ce qui sera expliqué en détail dans la section suivante.

3. Tableaux et l’instruction for…in｜Points importants à surveiller

L’instruction for…in en 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, lorsqu’elle est appliquée aux tableaux, plusieurs mises en garde importantes s’appliquent. Cette section explique son comportement et les pièges potentiels en détail.

Comportement de base avec les tableaux

Considérez 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

Attention 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.
• Lorsque l’ordre ou les index numériques sont importants, for…of ou une boucle for standard est recommandé.

4. Différences entre les instructions for…in et for…of [With Comparison Table]

En JavaScript, les instructions for…in et for…of sont toutes deux utilisées pour itérer, mais leurs objectifs et leurs comportements diffèrent considérablement.

Comparaison de la syntaxe de base

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 comparatif

Exemple pratique｜Différences dans le traitement 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 traiter les clés d’un objet.
• for…of : Idéal pour les tableaux et les objets itérables.

5. Exemples pratiques : utilisation avancée et bonnes pratiques de l’instruction for…in

Cette section présente des exemples avancés utilisant l’instruction for…in de JavaScript, ainsi que des bonnes pratiques utiles en développement réel.

1. Exemple 1｜Filtrage des propriétés d’un 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 efficaces pour le filtrage d’objets et le traitement d’objets imbriqués.
• Utilisez hasOwnProperty() pour éviter les problèmes liés à l’héritage du prototype.

6. Erreurs courantes avec l’instruction for…in et comment les corriger [Beginner-Friendly]

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().
• Traitement des tableaux : Préférez for…of ou forEach.
• Gestion des valeurs indéfinies : Attribuez des valeurs par défaut.

7. Test de performance de l’instruction for…in et des approches alternatives

1. Comparaison de performance

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. Exemple de résultats de comparaison

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

3. Approches recommandées

• Traitement des objets : Object.keys() est recommandé.
• Traitement des tableaux : for…of ou forEach est plus rapide et plus sûr.

Résumé

• L’instruction for…in est pratique, mais vous devez choisir la syntaxe appropriée en fonction des exigences de performance et de sécurité.

8. Résumé｜Comprendre l’instruction for…in et les prochaines étapes

1. Points clés de cet article

1. Syntaxe de base et objectif de l’instruction for…in :

• Utilisée pour parcourir les noms de propriétés d’un objet.
• Spécialisée pour traiter les clés d’objets plutôt que les tableaux.

1. Considérations importantes 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 énumérées.
• Pour le traitement des tableaux, for…of ou forEach() est recommandé.

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

• for…in : Énumère les noms de propriétés (clés).
• for…of : Traite directement les valeurs des tableaux et des objets itérables.

1. Utilisation avancée et bonnes pratiques :

• Traitement des objets imbriqués à l’aide de la récursion.
• Exclure l’héritage du prototype en utilisant hasOwnProperty().
• Améliorer les performances et la sécurité avec des alternatives comme Object.keys() et Object.entries().

1. Optimisation des performances :

• Object.keys() + forEach() est recommandé comme alternative à for…in car il garantit l’ordre et offre de meilleures performances.

2. Réponses aux questions fréquentes

Q1. L’instruction for…in doit‑elle être évitée ?

• 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 performance, d’autres approches comme for…of ou Object.keys() sont plus sûres et plus efficaces.

Q2. Le problème d’énumération des propriétés du prototype se produit‑il toujours ?

• R : Oui. Selon la spécification, les propriétés héritées du prototype sont incluses. Pour éviter cela, vous devez utiliser hasOwnProperty().

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

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

3. Prochaines étapes｜Sujets à approfondir

1. Itérables et objets itérables :

• Structures de données telles que Map, Set, WeakMap et WeakSet, ainsi que les constructions de boucles pour les manipuler.

1. Manipulation des données avec des fonctions d’ordre supérieur :

• Utilisation et exemples pratiques de map(), filter() et reduce().

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

• Traitement des données à l’aide de Object.values() et Object.entries().

1. Fonctions modernes de JavaScript :

• Syntaxe concise utilisant les fonctionnalités ES6+ comme les opérateurs de propagation et le destructuring.

1. Traitement asynchrone avec Promise / Async / Await :

• Application de ces concepts au traitement en temps réel impliquant la récupération de données et la manipulation dynamique d’objets.

4. Conclusion｜Maîtriser le traitement des boucles JavaScript

Cet article porte sur l’instruction JavaScript for…in, couvrant tout, de l’utilisation de base aux exemples avancés, en passant par les pièges et les approches alternatives.

Points les plus importants :

• L’instruction for…in est bien adaptée pour énumérer les propriétés d’un objet, mais des approches alternatives doivent être choisies pour le traitement des tableaux ou les scénarios critiques en termes de performances.
• Pour éviter les erreurs et les comportements inattendus, il est essentiel de toujours suivre les meilleures pratiques et les mesures de sécurité lors de l’écriture du code.

Passez à l’étape suivante !
Approfondissez votre compréhension des approches alternatives et des fonctions d’ordre supérieur présentées dans cet article afin d’amener vos compétences JavaScript au niveau supérieur.