Fout bij het wijzigen van een array-element in JavaScript

Laten we een fout bekijken die optreedt bij het onjuist wijzigen van een array-element. Stel dat we de volgende array hebben:

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

Stel dat we ook een functie hebben die een getal als parameter accepteert en het kwadraat van dat getal teruggeeft:

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

Laten we met een for-of lus onze array doorlopen en op elk van zijn elementen onze functie toepassen:

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

Op dit punt maken beginners vaak een fout. Het probleem is dat het wijzigen van de variabele elem niet leidt tot wijziging van het element in de array zelf. Laten we dit controleren:

console.log(arr); // array is niet veranderd

De array verandert niet omdat de variabele elem een kopie van het element bevat, en geen verwijzing ernaar. Het wijzigen van elem beïnvloedt de kopie, maar niet de array zelf.

Om het probleem op te lossen, moeten de array-elementen zelf worden gewijzigd:

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

console.log(arr); // nu is de array veranderd