Ошибка перебора массива циклом for-in в JavaScript

Для перебора массива следует использовать цикл for-of. Иногда, однако, начинающие ошибочно пытаются применить цикл for-in. Давайте посмотрим на характерные признаки этой ошибки.

Пусть у нас есть массив:

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

Давайте переберем элементы этого массива и запишем их в одну строку.

Некий программист уже решил эту задачу, но ошибочно воспользовался циклом for-in. Давайте посмотрим, что у него получилось:

let res = '';

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

console.log(res); // выведет '012'

Итак, в результате получается строка '012', а не 'abc'. Давайте разбираться, почему так произошло.

Почему вообще массив перебрался через цикл for-in? Дело в том, что массив в JavaScript является частным случаем объекта. Поэтому на самом деле в этом плане это корректный код. Но так делать не следует.

Дело в том, что for-in при некоторых условиях может зацепить лишнее, и вы кроме элементов массива получите при переборе еще что-нибудь паразитное. Перебирайте массивы только через for-of.

Давайте теперь разберемся, почему мы видим такой странный результат. Дело в том, что при переборе через for-in в переменную elem на самом деле будут попадать ключи, не смотря на сбивающее с толку название этой переменной.

Давайте исправим допущенную ошибку и напишем корректный код:

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

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

console.log(res); // выведет 'abc'