for…of în JavaScript

for (const element of colectie) { ... }

Ce face for...of

for...of este cea mai simplă buclă pentru a trece prin toate elementele unui tablou. Nu ai nevoie de contor: la fiecare pas, variabila primește următorul element.

Merge și pe șiruri de caractere (literă cu literă), pe Map, Set și pe listele de elemente din pagină. Spre deosebire de forEach, acceptă break, continue și await.

Nu confunda cu for...in, care parcurge cheile unui obiect, nu valorile.

Exemple

Exemplul 1: Elementele unui tablou

const fructe = ["mere", "pere", "prune"];

for (const fruct of fructe) {
  console.log(fruct);
}

Rezultat

mere
pere
prune

Exemplul 2: Indice și valoare cu entries()

const pasi = ["Descarcă", "Instalează", "Pornește"];

for (const [indice, pas] of pasi.entries()) {
  console.log(`${indice + 1}. ${pas}`);
}

Rezultat

1. Descarcă
2. Instalează
3. Pornește

Exemplul 3: Oprirea la primul rezultat

const comenzi = [120, 45, 980, 300];

for (const suma of comenzi) {
  if (suma > 500) {
    console.log("Prima comandă mare: " + suma);
    break;
  }
}

Rezultat

Prima comandă mare: 980

Greșeli frecvente

• Folosești for...in pe un tablou. Primești indicii ca text ("0", "1"), nu valorile.
• Încerci for...of direct pe un obiect simplu și primești TypeError: obiect is not iterable. Folosește Object.entries(obiect).

Comenzi înrudite

• for: Repetă un bloc de cod de un număr cunoscut de ori, folosind un contor.
• forEach: Rulează o funcție pentru fiecare element dintr-un tablou.
• Object.entries: Transformă un obiect într-un tablou de perechi [cheie, valoare], ușor de parcurs.