for...of

Baseline Large disponibilit

Cette fonctionnalit est bien tablie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

En savoir plus
Voir la compatibilit complte

L'instruction for...of permet de crer une boucle Array qui parcourt un objet itrable (ce qui inclut les objets Array, Map, Set, String, TypedArray, l'objet arguments, etc.) et qui permet d'excuter une ou plusieurs instructions pour la valeur de chaque proprit.

Exemple interactif

const array1 = ["a", "b", "c"];

for (const element of array1) {
  console.log(element);
}

// Expected output: "a"
// Expected output: "b"
// Expected output: "c"

Syntaxe

for (variable of iterable) {
  instruction;
}

variable: chaque itration, la valeur d'une proprit diffrente est affecte variable (cette variable peut tre dclare avec const, let ou var).
iterable: L'objet dont on parcourt les proprits numrables.
instruction: Une instruction excuter pour chaque proprit, cette instruction peut tre compose de plusieurs instructions en utilisant un bloc d'instructions.

Exemples

Utiliser `for...of` sur un tableau

let tableauItrable = [1, 2, 3];

for (let valeur of tableauItrable) {
  console.log(valeur);
}
// 1
// 2
// 3

Si la variable n'est pas raffecte dans la boucle, on pourra galement utiliser const la place de let :

let tableauItrable = [1, 2, 3];

for (const valeur of tableauItrable) {
  console.log(valeur);
}
// 1
// 2
// 3

Parcourir une chane de caractres avec `for...of`

let iterable = "pixel";

for (let valeur of iterable) {
  console.log(valeur);
}
// p
// i
// x
// e
// l

Parcourir un tableau typ (`TypedArray`)

let iterable = new Uint8Array([0x00, 0xff]);

for (let valeur of iterable) {
  console.log(valeur);
}
// 0
// 255

Parcourir une `Map`

let iterable = new Map([
  ["a", 1],
  ["b", 2],
  ["c", 3],
]);

for (let element of iterable) {
  console.log(element);
}
// ['a', 1]
// ['b', 2]
// ['c', 3]

for (let [clef, valeur] of iterable) {
  console.log(valeur);
}
// 1
// 2
// 3

Utiliser `Array.prototype.forEach()`

Pour obtenir les mmes valeurs qu'avec une boucle for...of, on peut utiliser la mthode Array.prototype.forEach() :

let arr = [3, 5, 7];
arr.toto = "coucou";

arr.forEach(function (element, index) {
  console.log(element); // affiche "3", "5", "7"
  console.log(index); // affiche "0", "1", "2"
});

// ou avec Object.keys()

Object.keys(arr).forEach(function (element, index) {
  console.log(arr[element]); // affiche "3", "5", "7", "coucou"
  console.log(arr[index]); // affiche "3", "5", "7", undefined
});

Parcourir l'objet `arguments`

Il est possible de parcourir l'objet arguments afin d'examiner l'ensemble des paramtres passs la fonction :

(function () {
  for (let argument of arguments) {
    console.log(argument);
  }
})(1, 2, 3);

// 1
// 2
// 3

Parcourir des collections DOM

Il est possible de parcourir des collections DOM telles que NodeList. Dans cet exemple, on ajoute une classe read aux paragraphes qui sont des descendants directs d'un article :

// Note : Cela ne fonctionnera que pour les plates-formes
// qui implmentent NodeList.prototype[Symbol.iterator]
let articleParagraphs = document.querySelectorAll("article > p");

for (let paragraph of articleParagraphs) {
  paragraph.classList.add("read");
}

Clturer les itrateurs

Dans les boucles for...of, on peut provoquer la fin de l'itrateur avec break, continue, throw, ou return. Dans ces cas, l'itrateur est ferm.

function* toto() {
  yield 1;
  yield 2;
  yield 3;
}

for (let o of toto()) {
  console.log(o);
  break; // L'itrateur est ferm
}

Itrer sur les gnrateurs

Grce cette instruction, on peut galement itrer sur les gnrateurs :

function* fibonacci() {
  // une fonction gnratrice
  let [prev, curr] = [0, 1];
  while (true) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
  }
}

for (let n of fibonacci()) {
  console.log(n);
  // on arrte la squence  1000
  if (n >= 1000) {
    break;
  }
}

Itrer sur les autres objets itrables

Il est aussi possible d'itrer sur un objet qui implmente le protocole itrable de faon explicite :

var iterable = {
  [Symbol.iterator]() {
    return {
      i: 0,
      next() {
        if (this.i < 3) {
          return { value: this.i++, done: false };
        }
        return { value: undefined, done: true };
      },
    };
  },
};

for (let value of iterable) {
  console.log(value);
}
console.log("fini !");
// 0
// 1
// 2

Les diffrences entre `for...of` et `for...in`

Les deux instructions for...in et for...of permettent de parcourir un ensemble. Mais elles ne parcourent pas le mme ensemble.

L'instruction for...in permet de parcourir les proprits numrables d'un objet dans un ordre arbitraire.

L'instruction for...of permet quant elle de parcourir les donnes contenues dans l'objet itrable vis.

Dans l'exemple qui suit, on illustre la diffrence de comportement entre une boucle for...of et une boucle for...in utilises sur un tableau (Array).

Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};

let iterable = [3, 5, 7];
iterable.toto = "coucou";

for (let i in iterable) {
  console.log(i); // affiche 0, 1, 2, "toto",
  // "arrCustom", "objCustom"
}

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // affiche 0, 1, 2, "toto"
  }
}

for (let i of iterable) {
  console.log(i); // affiche 3, 5, 7
}

Chaque objet hritera de la proprit objCustom et chaque objet qui est un tableau (Array) hritera de la proprit arrCustom car on les ajoute aux prototypes Object et Array. L'objet iterable hrite donc des proprits objCustom et arrCustom grce l'hritage et la chane de prototypes.

for (let i in iterable) {
  console.log(i); // affiche 0, 1, 2, "toto",
  // "arrCustom" et "objCustom"
}

Cette boucle ne parcourt que les proprits numrables de l'objet iterable dans un ordre arbitraire. Les lments du tableau 3, 5, 7 ou hello ne sont pas affichs car ce ne sont pas des proprits (et encore moins des proprits numrables). En revanche, on retrouve bien les indices du tableau et les proprits arrCustom et objCustom. Pour dcrire plus prcisment ce comportement, vous pouvez consulter for...in.

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // affiche 0, 1, 2, "toto"
  }
}

Cette boucle ressemble la premire mais ajoute la mthode hasOwnProperty() qui permet de vrifier si la proprit numrable recense est directement disponible sur l'objet (c'est--dire si elle n'est pas hrite). La console affiche donc les proprits 0, 1, 2 et toto car ce sont des proprits directement rattaches l'objet iterable. En revanche, les proprits arrCustom et objCustom ne sont pas affiches car elles proviennent de l'hritage.

for (let i of iterable) {
  console.log(i); // affiche 3, 5, 7
}

Cette boucle parcourt les valeurs dfinies comme itrables par l'objet itrable et dans ce cas ce sont les lments du tableau 3, 5, 7 et pas les proprits de l'objet.

Attention ne pas rutiliser les gnrateurs

Les gnrateurs ne doivent pas tre rutiliss, mme lorsque la boucle for...of a t interrompue (par exemple lorsque break est utilis). Lorsqu'on quitte une boucle, le gnrateur est cltur et si on l'utilise nouveau, il ne fournira aucun rsultat. Firefox n'a pas encore implment ce comportement standard (cf. bug Firefox 1147371).

var gen = (function* () {
  yield 1;
  yield 2;
  yield 3;
})();
for (let o of gen) {
  console.log(o);
  break; // L'itrateur est ferm
}

// Le gnrateur ne doit pas tre rutilis !
for (let o of gen) {
  console.log(o); // Ceci n'est jamais excut
}

Spcifications

Spcification
ECMAScript 2027 LanguageSpecification # sec-for-in-and-for-of-statements

Compatibilit des navigateurs

Voir aussi

Aider amliorer MDN

Cette page vous a-t-elle t utile ?

Oui Non

Apprendre contribuer

Cette page a t modifie le 22 mai 2026 par les contributeurices du MDN.

Voir cette page sur GitHub Signaler un problme avec ce contenu

for...of

Dans cet article

Parcourir un tableau typ (TypedArray)

Aider amliorer MDN

Parcourir un tableau typ (`TypedArray`)