Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Метод map у масиві». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Метод `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(що_зробити_з_кожним_елементом)` дає `новий_масив`.

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

1. **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; });
   ```

2. **Очікування побічних ефектів від `map()`.** Якщо потрібно просто пройтися по елементах і нічого не повертати, використовуйте `forEach()`: створений `map()` масив у такому разі просто викидається і лише витрачає пам'ять.

3. **Спроба змінити оригінал через `map()`.** Метод не мутує вихідний масив; щоб працювати зі зміненими даними, треба зберегти те, що він повернув.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати526 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.