Jaka jest różnica między pętlami for...in a for...of?

Pętla for...in iteruje po kluczach (właściwościach) enumerowalnych właściwości obiektu, w tym po właściwościach jego łańcucha prototypów.

Pętla for...of iteruje po wartościach obiektów iterowalnych (Array, Map, Set, String, arguments itp.). Nie iteruje po właściwościach prototypu.

	for...in	for...of
Iteruje po	Kluczach (właściwościach) obiektów	Wartościach obiektów iterowalnych
Używa się z	Obiektami	Tablicami, łańcuchami, Map, Set i innymi obiektami iterowalnymi
Prototyp	Iteruje po właściwościach prototypu	Nie iteruje po właściwościach prototypu
Kolejność iteracji	Nie gwarantowana dla kluczy niecałkowitych	Gwarantowana dla tablic (według indeksu)

Przykład for...in:

const obj = { a: 1, b: 2 };
for (const key in obj) {
  console.log(key, obj[key]); // Wyświetli: "a 1", "b 2"
}

Przykład for...of:

const arr = [1, 2, 3];
for (const value of arr) {
  console.log(value); // Wyświetli: 1, 2, 3
}

Ogólnie, do iteracji po tablicach i podobnych strukturach lepiej używać for...of, a do iteracji po właściwościach obiektów — for...in (często w połączeniu z hasOwnProperty, aby wykluczyć właściwości prototypu).