Virhe JavaScript-taulukon elementin muuttamisessa

Tarkastellaan virhettä, joka syntyy, kun taulukon elementtiä muutetaan väärin. Oletetaan, että meillä on seuraava taulukko:

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

Oletetaan myös, että meillä on funktio, joka ottaa parametrina numeron ja palauttaa sen neliön:

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

Käytetään for-of -silmukkaa käymään läpi taulukkomme ja sovelletaan funktiota jokaiseen sen elementtiin:

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

Tässä kohdassa aloittelijat usein tekevät virheen. Asia on siinä, että muuttujan elem muuttaminen ei johda elementin muuttumiseen itse taulukossa. Varmistutaan tästä:

console.log(arr); // taulukko ei muuttunut

Taulukko ei muutu, koska muuttujassa elem tallennettuna on elementin kopio, ei viittaus siihen. Muuttujan elem muuttaminen vaikuttaa kopioon, mutta ei itse taulukkoon.

Ongelman ratkaisemiseksi täytyy muuttaa nimenomaan taulukon elementtejä:

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

console.log(arr); // nyt taulukko on muuttunut