Virhe taulukon läpikäynnissä for-in-silmukalla JavaScriptissä

Taulukon läpikäyntiin tulisi käyttää for-of-silmukkaa. Toisinaan aloittelijat kuitenkin virheellisesti yrittävät käyttää for-in-silmukkaa. Katsotaanpa tämän virheen tunnusomaisia piirteitä.

Oletetaan, että meillä on taulukko:

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

Käydään läpi tämän taulukon alkiot ja kirjoitetaan ne yhteen merkkijonoon.

Eräs ohjelmoija on jo ratkaissut tämän tehtävän, mutta käytti virheellisesti for-in-silmukkaa. Katsotaanpa, mitä hän sai aikaan:

let res = '';

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

console.log(res); // tulostaa '012'

Niinpä tuloksena saadaan merkkijono '012', eikä 'abc'. Selvitetään, miksi näin kävi.

Miksi taulukko ylipäätään käytiin läpi for-in-silmukalla? Asia on siinä, että taulukko JavaScriptissä on erikoistapaus oliosta. Siksi itse asiassa tässä suhteessa kyseessä on oikea koodi. Mutta näin ei pitäisi tehdä.

Asia on siinä, että for-in tietyissä olosuhteissa voi napata ylimääräistä, ja saat taulukon alkioiden lisäksi läpikäynnissä jotain muuta loista. Käy taulukot läpi ainoastaan for-of-silmukalla.

Selvitetään nyt, miksi näemme tällaisen outon tuloksen. Asia on siinä, että läpikäynnin aikana for-in-silmukalla muuttujaan elem itse asiassa tulevat avaimet, huolimatta tämän muuttujan hämmentävästä nimestä.

Korjataanpa tehty virhe ja kirjoitetaan oikea koodi:

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

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

console.log(res); // tulostaa 'abc'