for...of vs for...in

JavaScript 🟢 Junior

Définition

for...of itere sur les valeurs des iterables (Array, Map, Set, String). for...in itere sur les clés enumerables d'un objet, y compris la prototype chain.

Analogie

for...of = lire chaque page d'un livre. for...in = lire la table des matières (et potentiellement celles des annexes héritées).

Exemple de code

const arr = ['a', 'b', 'c'];
for (const val of arr) console.log(val); // a, b, c
for (const idx in arr) console.log(idx); // 0, 1, 2

const obj = { x: 1, y: 2 };
for (const key in obj) console.log(key); // x, y

Cas d'usage

for...of pour les tableaux et iterables, for...in pour les propriétés d'objets (avec hasOwnProperty).

Anti-pattern

Utiliser for...in sur un tableau : parcourt aussi les propriétés du prototype et les index sont des strings.

Termes liés

#core#fondamental#interview

En entretien

Quelle différence entre for...of et for...in ?
for...of itère sur les valeurs des itérables comme Array, Map, Set ou String, alors que for...in itère sur les clés énumérables d'un objet, y compris celles héritées de la prototype chain. C'est comme lire chaque page d'un livre contre lire la table des matières, annexes héritées comprises.
Pourquoi c'est un anti-pattern d'utiliser for...in sur un tableau ?
Parce que ça parcourt aussi les propriétés du prototype et que les index obtenus sont des strings, pas des nombres. Pour un tableau il vaut mieux utiliser for...of, et réserver for...in aux propriétés d'objets avec hasOwnProperty.
Donne-moi un exemple où tu choisirais l'un plutôt que l'autre.
Pour parcourir un tableau ['a','b','c'] je prends for...of qui donne directement les valeurs a, b, c. Pour parcourir les clés d'un objet {x:1, y:2} je prends for...in qui me donne x, y.

Fiche mise à jour le 2026-09-27