Σφάλμα αλλαγής στοιχείου πίνακα σε JavaScript

Ας εξετάσουμε ένα σφάλμα που προκύπτει όταν αλλάζουμε λανθασμένα ένα στοιχείο πίνακα. Ας υποθέσουμε ότι έχουμε τον ακόλουθο πίνακα:

let arr = [1, 2, 3, 4, 5];

Ας υποθέσουμε επίσης ότι έχουμε μια συνάρτηση που δέχεται μια παράμετρο αριθμό και επιστρέφει το τετράγωνο αυτού του αριθμού:

function func(num) {
	return num ** 2;
}

Ας χρησιμοποιήσουμε τον βρόχο for-of για να διατρέξουμε τον πίνακα μας και να εφαρμόσουμε τη συνάρτησή μας σε κάθε ένα από τα στοιχεία του:

for (let elem of arr) {
	elem = func(elem);
}

Εδώ είναι που οι αρχάριους συχνά κάνουν λάθος. Το γεγονός είναι ότι η αλλαγή της μεταβλητής elem δεν οδηγεί σε αλλαγή του στοιχείου στον ίδιο τον πίνακα. Ας το επαληθεύσουμε:

console.log(arr); // ο πίνακας δεν άλλαξε

Ο πίνακας δεν αλλάζει γιατί στη μεταβλητή elem αποθηκεύεται ένα αντίγραφο του στοιχείου, και όχι μια αναφορά σε αυτό. Η αλλαγή του elem επηρεάζει το αντίγραφο, αλλά όχι τον ίδιο τον πίνακα.

Για να λυθεί το πρόβλημα, πρέπει να αλλάξουμε ακριβώς τα στοιχεία του πίνακα:

for (let i = 0; i < arr.length; i++) {
	arr[i] = func(arr[i]);
}

console.log(arr); // τώρα ο πίνακας άλλαξε