В чём разница между итерацией через for...of и for...in по массиву?

const arr = ['a', 'b', 'c'];
 
// for...of — значения
for (const value of arr) {
  console.log(value); // 'a', 'b', 'c'
}
 
// for...in — индексы
for (const index in arr) {
  console.log(index); // '0', '1', '2' (строки!)
}

const fruits = ['яблоко', 'банан', 'апельсин'];
 
// Получаем значения напрямую
for (const fruit of fruits) {
  console.log(fruit); 
}
// 'яблоко'
// 'банан' 
// 'апельсин'
 
// Работает и с числами
const numbers = [1, 2, 3];
for (const num of numbers) {
  console.log(num); // 1, 2, 3
}

const fruits = ['яблоко', 'банан', 'апельсин'];
 
// Получаем индексы (в виде строк!)
for (const index in fruits) {
  console.log(index);        // '0', '1', '2' (строки!)
  console.log(fruits[index]); // 'яблоко', 'банан', 'апельсин'
}
 
// Индексы — это строки!
console.log(typeof index); // 'string'

const numbers = [10, 20, 30];
 
// for...of — числа
for (const num of numbers) {
  console.log(num + 1); // 11, 21, 31
}
 
// for...in — строки!
for (const index in numbers) {
  console.log(index + 1); // '01', '11', '21' (строки!)
}

const sparse = ['a', , 'c']; // Пропущен элемент
 
// for...of — перебирает всё, включая дыры
for (const value of sparse) {
  console.log(value); // 'a', undefined, 'c'
}
 
// for...in — только существующие индексы
for (const index in sparse) {
  console.log(index); // '0', '2' (нет '1'!)
}

// ✅ Когда нужны сами элементы
const items = ['ручка', 'карандаш', 'ластик'];
for (const item of items) {
  console.log(`У меня есть: ${item}`);
}

// ✅ Когда нужны индексы
const items = ['ручка', 'карандаш', 'ластик'];
for (const index in items) {
  console.log(`На месте ${index}: ${items[index]}`);
}

const arr = ['a', 'b', 'c'];
 
// ❌ Ошибка — думают, что for...in даёт значения
for (const item in arr) {
  console.log(item); // '0', '1', '2' — индексы, не значения!
}
 
// ✅ Правильно — использовать for...of для значений
for (const item of arr) {
  console.log(item); // 'a', 'b', 'c' — значения
}

const arr = [10, 20, 30];
 
// ❌ Ошибка — индексы — строки!
for (const index in arr) {
  console.log(arr[index] + 5); // Работает
  console.log(index + 5);      // '05', '15', '25' — строки!
}
 
// ✅ Правильно — преобразовать в число
for (const index in arr) {
  console.log(+index + 5); // 5, 6, 7 — числа
}