ComparaisonComparaisons

for...in vs for...of

for...of fournit les valeurs successives d’un objet itérable, tandis que for...in fournit les noms successifs des propriétés d’un objet sous forme de chaînes.

Sur cette page

Comparaison point par point
Exemple
Définition et utilisation
Syntaxe
Plus d’exemples
Bonnes pratiques
Entrées associées

Comparaison point par point

Ce qu’elle fournit à chaque tour
for...of
La valeur suivante
for...in
Le nom de propriété suivant (chaîne)
Fonctionne sur les tableaux
for...of
Oui, c’est le choix naturel
for...in
Techniquement oui, mais renvoie les indices comme des chaînes
Fonctionne sur les objets ordinaires
for...of
Non, l’objet n’est pas itérable
for...in
Oui, c’est son usage principal
Propriétés héritées du prototype
for...of
Sans importance, elle itère seulement les valeurs
for...in
Les inclut, il faut filtrer avec Object.hasOwn()
break, continue, await
for...of
Les trois fonctionnent
for...in
break et continue fonctionnent, await non
Usage typique
for...of
Tableaux, Map, Set, chaînes, NodeList
for...in
Rare, plus simple avec Object.keys() et for...of

Critère	for...of	for...in
Ce qu’elle fournit à chaque tour	La valeur suivante	Le nom de propriété suivant (chaîne)
Fonctionne sur les tableaux	Oui, c’est le choix naturel	Techniquement oui, mais renvoie les indices comme des chaînes
Fonctionne sur les objets ordinaires	Non, l’objet n’est pas itérable	Oui, c’est son usage principal
Propriétés héritées du prototype	Sans importance, elle itère seulement les valeurs	Les inclut, il faut filtrer avec `Object.hasOwn()`
break, continue, await	Les trois fonctionnent	`break` et `continue` fonctionnent, `await` non
Usage typique	Tableaux, Map, Set, chaînes, NodeList	Rare, plus simple avec `Object.keys()` et `for...of`

Exemple

JavaScript

const tasks = ['Leçon 1', 'Leçon 2', 'Leçon 3']

for (const index in tasks) {
  console.log(typeof index, index)
}

for (const task of tasks) {
  console.log(task)
}

Console

string 0

string 1

string 2

Leçon 1

Leçon 2

Leçon 3

Définition et utilisation

Les deux boucles fournissent quelque chose de différent à chaque tour. for...of fonctionne sur les objets itérables, comme les tableaux, les chaînes, Map et Set, et renvoie la valeur suivante. for...in fonctionne sur les objets ordinaires et renvoie le nom de propriété suivant (la clé) sous forme de chaîne, et vous lisez la valeur elle-même en plus via object[key].

Sur un tableau, for...in fonctionne aussi techniquement, mais il renvoie les indices sous forme de chaînes ("0", "1") et peut en plus capturer des propriétés énumérables supplémentaires, y compris héritées du prototype. for...of n’a pas ce problème, car il itère sur les valeurs elles-mêmes, et il prend en plus en charge break, continue et await à l’intérieur, ce que for...in ne prend pas totalement en charge.

La règle est simple : pour les tableaux, les chaînes et les autres objets itérables, utilisez for...of. Réservez for...in aux situations rares avec des objets dont vous ne connaissez pas la forme à l’avance, et même là, Object.keys() ou Object.entries() combinés avec for...of sont souvent plus pratiques.

Syntaxe

for (const value of iterable) {
  // instructions
}
for (const key in object) {
  // instructions
}

Plus d’exemples

for...in sur un tableau : le piège des indices

JavaScript

const points = [10, 20, 30]

for (const index in points) {
  console.log(index + 1)
}

for (const [index] of points.entries()) {
  console.log(index + 1)
}

Console

Dans for...in, l’indice est une chaîne, donc + 1 concatène du texte. for...of avec entries() donne un indice numérique, donc l’addition fonctionne normalement.

Objet : for...in contre Object.entries()

JavaScript

const student = { name: 'Lucas', level: 4 }

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

for (const [key, value] of Object.entries(student)) {
  console.log(key, value)
}

Console

name Lucas

level 4

name Lucas

level 4

Pour un objet simple sans propriétés héritées, les deux boucles donnent le même résultat. Object.entries() ne renvoie toutefois que les clés propres, ce qui est plus sûr.

Bonnes pratiques

Pour les tableaux, choisissez toujours for...of (ou forEach(), map()). for...in sur un tableau est une cause fréquente de bugs difficiles à trouver.
Vous avez besoin des clés d’un objet dans une boucle for...of ? Utilisez Object.keys() ou Object.entries(), vous n’avez alors pas besoin de vérifier Object.hasOwn().
Avec await dans une boucle sur un tableau d’opérations asynchrones, seul for...of fonctionne.

Entrées associées

Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.

Leçons gratuitesPratiquez JavaScript dans le cours JavaScript et ReactDes exercices avec indices, un éditeur de code et une progression enregistrée au fur et à mesure.Voir le cours