4 полезных способа использования Array.map() в JavaScript

Метод Array.map() это один из самых популярных инструментов работы с массивами в JavaScript. Он позволяет пройтись по каждому элементу массива, применить к нему функцию и вернуть новый массив с результатами. При этом исходный массив не изменяется, что делает map() удобным инструментом для безопасной трансформации данных.

Ниже рассмотрим четыре практических сценария использования map(), которые часто встречаются в реальных проектах.

Что делает map()

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

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

const doubled = numbers.map(num => num * 2);

console.log(doubled);
// [4, 6, 8, 10]

Каждый элемент массива передаётся в функцию, умножается на 2, и возвращается новый массив с результатами.

1. Вызов функции для каждого элемента массива

Самый распространённый сценарий это преобразование значений массива.

Например, можно применить отдельную функцию ко всем элементам:

const makeSweeter = item => item * 2;

const sweetArray = [2, 3, 4, 5, 35];

const sweeterArray = sweetArray.map(makeSweeter);

console.log(sweeterArray);
// [4, 6, 8, 10, 70]

Такой подход делает код более читаемым и позволяет выносить логику преобразования в отдельные функции.

2. Преобразование строки в массив

Метод map() работает только с массивами. Однако иногда нужно применить его к строке. Это можно сделать с помощью метода call(). Идея в том, чтобы использовать контекст метода map() из массива для строки.

const name = "Sammy";

const map = Array.prototype.map;

const newName = map.call(name, letter => `${letter}a`);

console.log(newName);
// ["Sa", "aa", "ma", "ma", "ya"]

Здесь строка обрабатывается как последовательность символов. Каждый символ передаётся в функцию и преобразуется перед добавлением в новый массив.

3. Рендеринг списков в интерфейсе (например, React)

В современных JavaScript-библиотеках map() часто используется для генерации элементов интерфейса. Пример компонента:

const names = ["whale", "squid", "turtle", "coral", "starfish"];

const NamesList = () => (
  <div>
    <ul>
      {names.map(name => (
        <li key={name}>{name}</li>
      ))}
    </ul>
  </div>
);

Здесь массив names преобразуется в список <li>. Каждый элемент массива становится элементом интерфейса. Этот паттерн широко используется во фронтенд-разработке.

4. Преобразование объектов внутри массива

map() особенно полезен при работе с массивами объектов. С его помощью можно изменить структуру данных или подготовить их к отображению. Например:

const users = [
  { name: "shark", likes: "ocean" },
  { name: "turtle", likes: "pond" },
  { name: "otter", likes: "fish biscuits" }
];

const usersByLikes = users.map(item => {
  const result = {};

  result[item.name] = item.likes;
  result.age = item.name.length * 10;

  return result;
});

console.log(usersByLikes);

Результат:

[
  { shark: "ocean", age: 50 },
  { turtle: "pond", age: 60 },
  { otter: "fish biscuits", age: 50 }
]

Такой подход часто используют для:

• подготовки данных из API

• нормализации структуры данных

• преобразования данных перед отображением