Будешь ли итерировать массив через цикл for...in

Будешь ли итерировать массив через цикл for...in

Нет, я НЕ буду использовать for...in для итерации массива. Это неправильный инструмент для этой задачи. Вместо этого нужно использовать for, forEach, for...of или map.

Почему for...in неправильный выбор

for...in итерирует по ключам объекта (включая унаследованные), а не по элементам массива.

const arr = ['a', 'b', 'c'];
const obj = { name: 'John', age: 30 };

// for...in для ОБЪЕКТОВ
for (const key in obj) {
  console.log(key, obj[key]);
}
// Output:
// name John
// age 30

Проблема 1: Возвращает строки, не индексы

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

for (const index in arr) {
  console.log(typeof index); // 'string'!
  console.log(index); // '0', '1', '2' (строки, не числа)
  console.log(arr[index]); // 'a', 'b', 'c'
}

Это может вызвать проблемы при арифметических операциях:

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

for (const index in arr) {
  console.log(index + 1); // '01', '11', '21' (строковое сложение!)
  // Хотел: 1, 2, 3
  // Получил: '01', '11', '21'
}

Проблема 2: Итерирует по всем свойствам объекта

const arr = [10, 20, 30];
arr.customProp = 'I am custom';

for (const index in arr) {
  console.log(index, arr[index]);
}
// Output:
// 0 10
// 1 20
// 2 30
// customProp I am custom  <- НЕОЖИДАННО!

Проблема 3: Итерирует унаследованные свойства

const arr = [1, 2, 3];

// Добавим что-то в prototype
Array.prototype.customMethod = function() {};

for (const key in arr) {
  console.log(key); // 0, 1, 2, customMethod
  // customMethod появился в итерации!
}

Правильные способы итерации массива

1. for (классический цикл)

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

for (let i = 0; i < arr.length; i++) {
  console.log(i, arr[i]); // 0 a, 1 b, 2 c
}

Плюсы:

• Полный контроль
• Быстро (особенно старые браузеры)
• Можно прерывать break, продолжать continue

Минусы:

• Больше кода
• Легко сделать off-by-one ошибку

2. forEach

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

arr.forEach((item, index, array) => {
  console.log(index, item);
});
// Output: 0 a, 1 b, 2 c

Плюсы:

• Читаемый код
• Нет необходимости управлять счётчиком
• Правильный контекст this

Минусы:

• Нельзя использовать break или continue
• Каждая итерация - новая функция (медленнее)

3. for...of

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

for (const item of arr) {
  console.log(item);
}
// Output: a, b, c

// С индексом
for (const [index, item] of arr.entries()) {
  console.log(index, item);
}
// Output: 0 a, 1 b, 2 c

Плюсы:

• Современный синтаксис
• Поддерживает break и continue
• Работает с любыми итерируемыми объектами

Минусы:

• Не работает в старых браузерах (IE11)

4. map (когда нужен результат)

const arr = [1, 2, 3];

const doubled = arr.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

Плюсы:

• Создаёт новый массив
• Функциональный стиль
• Читаемый код

Минусы:

• Создаёт новый массив (память)
• Только для трансформации

Сравнение всех методов

const arr = [10, 20, 30];

// 1. for (классический)
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

// 2. forEach
arr.forEach(item => console.log(item));

// 3. for...of
for (const item of arr) {
  console.log(item);
}

// 4. while
let i = 0;
while (i < arr.length) {
  console.log(arr[i]);
  i++;
}

// 5. map (если нужен результат)
const result = arr.map(item => item * 2);

Когда использовать for...in

for...in используется ТОЛЬКО для объектов:

const user = {
  name: 'John',
  age: 30,
  email: 'john@example.com'
};

// for...in - правильный выбор для объектов
for (const key in user) {
  console.log(key, user[key]);
}
// Output:
// name John
// age 30
// email john@example.com

Практический пример: что НЕ делать

// ПЛОХО: for...in для массива
const scores = [85, 90, 78];

for (const index in scores) {
  const nextScore = scores[index + 1]; // undefined (строковое сложение!)
  console.log(`Current: ${scores[index]}, Next: ${nextScore}`);
}

// ХОРОШО: for или for...of
for (let i = 0; i < scores.length; i++) {
  const nextScore = scores[i + 1]; // 90, 78, undefined
  console.log(`Current: ${scores[i]}, Next: ${nextScore}`);
}

// ИЛИ
for (const score of scores) {
  console.log(`Score: ${score}`);
}

Правильный выбор инструмента

const arr = [1, 2, 3];

// Просто итерировать
for (const item of arr) {}
// или
arr.forEach(item => {});

// Нужен индекс
for (let i = 0; i < arr.length; i++) {}
// или
arr.forEach((item, index) => {});
// или
for (const [index, item] of arr.entries()) {}

// Трансформировать в новый массив
const result = arr.map(item => item * 2);

// Отфильтровать
const filtered = arr.filter(item => item > 5);

// Найти один элемент
const found = arr.find(item => item === 2);

// Итерировать ОБЪЕКТ
const user = { name: 'John', age: 30 };
for (const key in user) {}

Итог

• НИКОГДА не используй for...in для массивов
• for...in - для объектов
• Для массивов используй:
  • for - когда нужен индекс и контроль
  • for...of - когда нужны только значения
  • forEach - когда нужны значения и индекс
  • map, filter, find и др. - когда нужна трансформация
• for...in итерирует все свойства, включая унаследованные и кастомные