Σφάλμα διάσχισης πίνακα με βρόχο for-in στην JavaScript

Για τη διάσχιση πίνακα θα πρέπει να χρησιμοποιείται ο βρόχος for-of. Μερικές φορές, ωστόσο, οι αρχάριοι λανθασμένα προσπαθούν να εφαρμόσουν τον βρόχο for-in. Ας δούμε τα χαρακτηριστικά σημάδια αυτού του σφάλματος.

Ας υποθέσουμε ότι έχουμε έναν πίνακα:

let arr = ['a', 'b', 'c'];

Ας διασχίσουμε τα στοιχεία αυτού του πίνακα και ας τα γράψουμε σε μία γραμμή.

Κάποιος προγραμματιστής έχει ήδη λύσει αυτό το πρόβλημα, αλλά λανθασμένα χρησιμοποίησε τον βρόχο for-in. Ας δούμε τι κατάφερε:

let res = '';

for (let elem in arr) {
	res += elem;
}

console.log(res); // θα εμφανίσει '012'

Έτσι, ως αποτέλεσμα προκύπτει η συμβολοσειρά '012', και όχι 'abc'. Ας ανακαλύψουμε γιατί αυτό συνέβη.

Γιατί γενικά ο πίνακας διασχίστηκε μέσω του βρόχου for-in; Το γεγονός είναι ότι ο πίνακας στην JavaScript είναι μια ειδική περίπτωση αντικειμένου. Επομένως, στην πραγματικότητα από αυτή την άποψη αυτός είναι σωστός κώδικας. Αλλά δεν πρέπει να γίνεται έτσι.

Το γεγονός είναι ότι ο for-in υπό ορισμένες συνθήκες μπορεί να πιάσει επιπλέον πράγματα, και εκτός από τα στοιχεία του πίνακα θα λάβετε κατά τη διάσχιση και κάτι άλλο παρασιτικό. Διασχίστε πίνακες μόνο μέσω for-of.

Ας ανακαλύψουμε τώρα γιατί βλέπουμε ένα τόσο παράξενο αποτέλεσμα. Το γεγονός είναι ότι κατά τη διάσχιση μέσω for-in στη μεταβλητή elem στην πραγματικότητα θα μπαίνουν τα κλειδιά, παρά το συγχέον όνομα αυτής της μεταβλητής.

Ας διορθώσουμε το σφάλμα που έγινε και ας γράψουμε σωστό κώδικα:

let arr = ['a', 'b', 'c'];
let res = '';

for (let elem of arr) {
	res += elem;
}

console.log(res); // θα εμφανίσει 'abc'