Как будешь выбирать между map и for...in для перебора и трансформации массива?

Как выбирать между map и for...in для перебора и трансформации массива

Это часто задаваемый вопрос, потому что различие между ними критично для корректной работы. Я выберу map для трансформации массива в 99% случаев, но объясню разницу и когда использовать каждый метод.

Основные различия:

Array.map() — это метод для трансформации

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
// doubled = [2, 4, 6, 8]

// Преимущества:
// - Создает новый массив
// - Не модифицирует исходный
// - Понятный и декларативный код
// - Возвращает новый массив

for...in — это итератор для ключей объекта

const person = { name: 'John', age: 30 };
for (const key in person) {
  console.log(key); // 'name', 'age'
}

// Проблемы с массивами:
const arr = [1, 2, 3];
for (const index in arr) {
  console.log(index); // '0', '1', '2' - это СТРОКИ, не числа!
  console.log(arr[index]); // 1, 2, 3
}

// Большая проблема:
Array.prototype.customMethod = function() {}; // Добавляем метод
for (const key in arr) {
  console.log(key); // '0', '1', '2', 'customMethod' - ОШИБКА!
}

Почему использовать map для трансформации массива:

1. Функциональный стиль (Functional Programming)

// map - декларативно описывает что мы делаем
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
const doubled_filtered = doubled.filter(num => num > 4);
const result = doubled_filtered.reduce((sum, num) => sum + num, 0);

// Ясно, что мы удваиваем, фильтруем и суммируем
// Это цепочка трансформаций

2. Иммутабельность (Immutability)

// map не меняет исходный массив
const original = [1, 2, 3];
const transformed = original.map(x => x * 2);

console.log(original); // [1, 2, 3] - не изменился
console.log(transformed); // [2, 4, 6] - новый массив

// for...in может привести к мутации
const original2 = [1, 2, 3];
for (const i in original2) {
  original2[i] = original2[i] * 2; // Меняем исходный
}
console.log(original2); // [2, 4, 6] - изменился

3. Типизация (TypeScript friendly)

// map имеет правильные типы
const numbers: number[] = [1, 2, 3];
const doubled: number[] = numbers.map(n => n * 2); // Правильный тип

// for...in усложняет типизацию
for (const key in numbers) { // key имеет тип string | number
  const index = parseInt(key); // Нужно преобразовывать
}

Практические примеры:

Трансформация объектов в массиве

const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 }
];

// map - это правильный выбор
const userNames = users.map(user => user.name);
// ['Alice', 'Bob', 'Charlie']

const adults = users.map(user => ({ 
  ...user, 
  isAdult: user.age >= 18 
}));

Работа с вложенными структурами

const posts = [
  { id: 1, title: 'Post 1', comments: [{}, {}] },
  { id: 2, title: 'Post 2', comments: [{}, {}, {}] }
];

// map для трансформации
const postSummaries = posts.map(post => ({
  id: post.id,
  title: post.title,
  commentCount: post.comments.length
}));

Когда МОЖНО использовать for...in:

1. Для перебора свойств объекта (но лучше Object.entries())

const settings = { theme: 'dark', language: 'en' };

// for...in - не лучший вариант
for (const key in settings) {
  console.log(key, settings[key]);
}

// Лучше использовать Object.entries()
Object.entries(settings).forEach(([key, value]) => {
  console.log(key, value);
});

// Или Object.keys()
Object.keys(settings).forEach(key => {
  console.log(key, settings[key]);
});

2. for...of — лучше для простого перебора массива

const items = ['apple', 'banana', 'orange'];

// Если нужно просто перебрать (не трансформировать)
for (const item of items) {
  console.log(item);
}

// Если нужна трансформация
const lengths = items.map(item => item.length);

Сравнительная таблица:

В контексте React:

// Правильно - map для списков
function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

// Неправильно - никогда не использовать for...in
function UserList({ users }) {
  const items = [];
  for (const i in users) { // Плохо!
    items.push(<li key={i}>{users[i].name}</li>);
  }
  return <ul>{items}</ul>;
}

Итоговый выбор:

Используй map когда:

• Нужно трансформировать массив в новый массив
• Нужна цепочка трансформаций (map -> filter -> reduce)
• Работаешь в React для рендера списков
• Нужна иммутабельность (не менять исходный массив)
• Пишешь на TypeScript

Используй for...of когда:

• Нужно просто перебрать элементы массива
• Нужны побочные эффекты (console.log, запросы)
• Нужно выйти из цикла (break)

Не используй for...in когда:

• Работаешь с массивами (используй map, for...of, forEach)
• Нужна трансформация

В 95% случаев для перебора и трансформации массива — это map().