Метод map у масиві

JavaScriptJunior~1 хв читання

Метод map() у JavaScript використовують для перетворення (трансформації) масиву. Він створює новий масив, застосовуючи функцію до кожного елемента вихідного масиву, і при цьому не змінює оригінал.

Теорія

TL;DR

map() повертає новий масив тієї самої довжини, що й вихідний.
Оригінальний масив залишається незмінним, тобто метод не мутує дані.
Callback отримує три аргументи: element, index, array.
Значення, яке повертає callback, стає елементом нового масиву.
Якщо callback нічого не повертає, у новому масиві буде undefined.
Для побічних ефектів без повернення значення використовують forEach().

Швидкий приклад

javascript

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

console.log(doubled); // [2, 4, 6, 8]
console.log(numbers); // [1, 2, 3, 4], вихідний масив не змінився

Синтаксис і параметри callback

javascript

const newArray = array.map((element, index, array) => {
  // повернути нове значення
});

Аргумент	Опис
`element`	Поточний елемент масиву
`index`	Індекс поточного елемента
`array`	Сам вихідний масив

Кожен виклик callback має щось повернути: саме це значення потрапляє в новий масив на позицію з тим самим індексом.

Приклад 1. Перетворення чисел

javascript

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

console.log(doubled); // [2, 4, 6, 8]
console.log(numbers); // [1, 2, 3, 4]

Кожен елемент множиться на 2, результат, це новий масив.

Приклад 2. Витягування властивості з масиву об'єктів

javascript

const users = [
  { name: 'Tim', age: 25 },
  { name: 'Alex', age: 30 },
  { name: 'Maria', age: 28 }
];

const names = users.map(user => user.name);

console.log(names); // ['Tim', 'Alex', 'Maria']

map() часто застосовують, щоб дістати одне поле з масиву об'єктів.

Приклад 3. Зміна структури даних

javascript

const numbers = [1, 2, 3];
const formatted = numbers.map(n => ({ id: n, value: n * 10 }));

console.log(formatted);
// [
//   { id: 1, value: 10 },
//   { id: 2, value: 20 },
//   { id: 3, value: 30 }
// ]

Тут з простого масиву чисел виходить масив об'єктів: форма даних змінилася, кількість елементів, ні.

Коли брати `map()`

Мета	Чи підходить `map()`
Перетворити дані	Так
Змінити вихідний масив	Ні
Виконати дію без повернення значення (лог, запит тощо)	Ні, краще `forEach()`

Формула для запам'ятовування: arr.map(що_зробити_з_кожним_елементом) дає новий_масив.

Типові помилки

Callback нічого не повертає. Фігурні дужки роблять тіло стрілочної функції блоком, тому неявного повернення немає:

javascript
const arr = [1, 2, 3]; const result = arr.map(num => { num * 2 }); // [undefined, undefined, undefined]

Правильно:

javascript
const result = arr.map(num => num * 2); // або const result = arr.map(num => { return num * 2; });
Очікування побічних ефектів від map(). Якщо потрібно просто пройтися по елементах і нічого не повертати, використовуйте forEach(): створений map() масив у такому разі просто викидається і лише витрачає пам'ять.
Спроба змінити оригінал через map(). Метод не мутує вихідний масив; щоб працювати зі зміненими даними, треба зберегти те, що він повернув.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.