Что делает map?

Что делает метод map() в JavaScript?

Метод map() — это один из фундаментальных методов работы с массивами в JavaScript, принадлежащий к группе методов функционального программирования. Его основная задача — преобразовать каждый элемент исходного массива и создать новый массив на основе результатов этого преобразования. В отличие от методов, изменяющих исходный массив (мутирующих), map() является не-мутирующим (non-mutating), то есть он не изменяет оригинальный массив, что соответствует принципам чистых функций и делает код более безопасным и предсказуемым.

Основная логика работы map()

Метод map() принимает функцию-колбэк (callback function) как аргумент и последовательно применяет эту функцию к каждому элементу массива. Колбэк-функция получает три параметра (обычно используются первый и второй):

1. currentValue — текущий обрабатываемый элемент массива.
2. index (опционально) — индекс текущего элемента.
3. array (опционально) — ссылка на исходный массив.

После обработки всех элементов, map() возвращает новый массив той же длины, состоящий из результатов вызова колбэк-функции для каждого элемента. Это ключевое отличие от, например, метода forEach(), который просто выполняет операции над элементами без возврата нового массива.

Синтаксис и базовый пример

const newArray = originalArray.map((currentValue, index, array) => {
  // Возвращаем преобразованное значение для каждого элемента
  return transformedValue;
});

Пример: Преобразование массива чисел, умножение каждого элемента на 2.

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map((num) => {
  return num * 2;
});

console.log(doubledNumbers); // [2, 4, 6, ?, 10]
console.log(numbers); // [1, 2, 3, 4, 5] // Оригинальный массив не изменён!

Практические применения map() в разработке

Метод map() чрезвычайно полезен в реальных проектах, особенно в современном фронтенде с использованием React, Vue и других фреймворков:

• Преобразование данных API: Часто ответ от сервера содержит данные в одном формате, а фронтенд требует другого. map() идеально подходит для такой трансформации.

  const apiUsers = [
    { id: 1, name: 'Alice', age: 25 },
    { id: 2, name: 'Bob', age: 30 }
  ];
  
  const userNames = apiUsers.map(user => user.name);
  console.log(userNames); // ['Alice', 'Bob']
  

• Рендеринг списков в React: Это классический用例. map() используется для преобразования массива данных в массив React-элементов.

  function TodoList({ tasks }) {
    return (
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>{task.title}</li>
        ))}
      </ul>
    );
  }
  

• Математические операции и форматирование: Быстрое применение вычислений или изменение формата данных (например, добавление символа валюты).

  const prices = [10, 20, 30];
  const formattedPrices = prices.map(price => `$${price.toFixed(2)}`);
  console.log(formattedPrices); // ['$10.00', '$20.00', '$30.00']
  

Важные особенности и сравнение

• Возвращает новый массив: Это позволяет использовать цепочки (chaining) методов. После map() можно сразу вызвать filter(), reduce() или другой map().

  const result = numbers
    .map(num => num * 3)
    .filter(num => num > 10)
    .map(num => num / 2);
  

• Сохраняет длину массива: Если исходный массив имеет 5 элементов, новый массив также будет иметь 5 элементов (включая undefined, если колбэк ничего не возвращает). Это отличается от filter(), который может изменить длину.

• Использование с другими структурами: Для объектов, не являющихся массивами (например, NodeList из DOM), необходимо сначала преобразовать их в массив с помощью Array.from() или оператора распространения (...).

Когда не стоит использовать map()

• Если вам нужно отфильтровать элементы (изменить длину массива) — используйте filter().
• Если вам нужно просто выполнить итерацию без создания нового массива (например, для логирования) — используйте forEach().
• Если вам нужно аккумулировать результат в одно значение (сумма, конкатенация) — используйте reduce().

Таким образом, map() является мощным и выразительным инструментом для трансформации данных. Его понимание и правильное применение — обязательная часть навыков фронтенд-разработчика, позволяющая писать чистый, декларативный и эффективный код. Он лежит в основе многих операций по обработке данных в пользовательских интерфейсах.