Błąd iteracji po tablicy pętlą for-in w JavaScript

Do iteracji po tablicy należy używać pętli for-of. Czasami jednak początkujący błędnie próbują zastosować pętlę for-in. Przyjrzyjmy się charakterystycznym oznakom tego błędu.

Załóżmy, że mamy tablicę:

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

Przejdźmy przez elementy tej tablicy i zapiszmy je w jednym ciągu.

Pewien programista już rozwiązał to zadanie, ale błędnie skorzystał z pętli for-in. Zobaczmy, co mu wyszło:

let res = '';

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

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

A więc w wyniku otrzymujemy ciąg '012', a nie 'abc'. Zastanówmy się, dlaczego do tego doszło.

Dlaczego w ogóle tablica została przeglądnięta przez pętlę for-in? Chodzi o to, że tablica w JavaScript jest szczególnym przypadkiem obiektu. Dlatego tak naprawdę pod tym względem jest to poprawny kod. Ale nie należy tak robić.

Chodzi o to, że for-in w pewnych warunkach może "zahaczyć" o coś dodatkowego i oprócz elementów tablicy możesz podczas iteracji dostać coś jeszcze, pasożytniczego. Przeglądaj tablice tylko za pomocą for-of.

Zastanówmy się teraz, dlaczego widzimy taki dziwny wynik. Chodzi o to, że podczas iteracji przez for-in do zmiennej elem w rzeczywistości będą trafiać klucze, mimo mylącej nazwy tej zmiennej.

Poprawmy popełniony błąd i napiszmy poprawny kod:

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

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

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