Ποια είναι η διαφορά μεταξύ των βρόχων for...in και for...of;

Ο βρόχος for...in διατρέχει τις κλειδιά (ιδιότητες) των enumerable ιδιοτήτων του αντικειμένου, συμπεριλαμβανομένων αυτών στην αλυσίδα πρωτοτύπων.

Ο βρόχος for...of διατρέχει τις τιμές των iterable αντικειμένων (Array, Map, Set, String, arguments κ.ά.). Δεν διατρέχει τις ιδιότητες του πρωτοτύπου.

	for...in	for...of
Διατρέχει	Κλειδιά (ιδιότητες) αντικειμένων	Τιμές iterable αντικειμένων
Χρησιμοποιείται με	Αντικείμενα	Arrays, strings, Map, Set και άλλα iterable αντικείμενα
Πρωτότυπο	Διατρέχει τις ιδιότητες του πρωτοτύπου	Δεν διατρέχει τις ιδιότητες του πρωτοτύπου
Σειρά διαπερασμού	Δεν εγγυάται για μη-ακέραια κλειδιά	Εγγυάται για arrays (ανά δείκτη)

Παράδειγμα for...in:

const obj = { a: 1, b: 2 };
for (const key in obj) {
  console.log(key, obj[key]); // Εμφανίζει: "a 1", "b 2"
}

Παράδειγμα for...of:

const arr = [1, 2, 3];
for (const value of arr) {
  console.log(value); // Εμφανίζει: 1, 2, 3
}

Γενικά, για την επανάληψη σε arrays και παρόμοιες δομές, προτιμάται η χρήση του for...of, και για την επανάληψη ιδιοτήτων αντικειμένων — το for...in (συχνά σε συνδυασμό με hasOwnProperty για την απομάκρυνση ιδιοτήτων του πρωτοτύπου).