flatMap() vs map()

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

Методи map() та flatMap() дійсно схожі, але мають одну ключову відмінність: flatMap() не лише трансформує елементи, а й "розплющує" вкладені масиви до одного рівня. Розберемо по кроках:

1. Основна відмінність

Метод	Що робить
`map()`	Перетворює кожен елемент масиву і повертає новий масив того самого розміру
`flatMap()`	Перетворює кожен елемент, а потім об'єднує вкладені масиви в один плоский масив (еквівалентно `map().flat(1)`)

Приклад 1. Звичайний map()

javascript

const words = ["hello", "world"];

const mapped = words.map(word => word.split(""));

console.log(mapped);
// [['h','e','l','l','o'], ['w','o','r','l','d']]

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

Приклад 2. flatMap() робить те саме, але "розплющує" результат

javascript

const words = ["hello", "world"];

const flattened = words.flatMap(word => word.split(""));

console.log(flattened);
// ['h','e','l','l','o','w','o','r','l','d']

flatMap() застосував split() і об'єднав результат в один плоский масив. Те саме, що:

javascript
words.map(word => word.split("")).flat();

Приклад 3. Реальний сценарій - фільтрація і трансформація разом

javascript

const sentences = [
  "hello world",
  "js is awesome"
];

// хочемо масив усіх слів
const words = sentences.flatMap(sentence => sentence.split(" "));

console.log(words);
// ['hello', 'world', 'js', 'is', 'awesome']

Дуже зручно, коли потрібно "розбити і об'єднати" елементи в одну колекцію.

Приклад 4. Відмінність у розмірі результату

javascript

const arr = [1, 2, 3];

const mapped = arr.map(x => [x, x * 2]);
console.log(mapped);
// [[1,2], [2,4], [3,6]] - довжина 3

const flatMapped = arr.flatMap(x => [x, x * 2]);
console.log(flatMapped);
// [1,2,2,4,3,6] - довжина 6

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

Важливо:

flatMap() завжди розплющує лише на 1 рівень (flat(1)).

javascript
[[1], [2, [3]]].flatMap(x => x); // [1, 2, [3]]
Якщо потрібно "розплющити глибше" (flat(2) або більше) - використовуй flat() окремо.
flatMap() не змінює вихідний масив - повертає новий.

Часті помилки

Очікування глибокого розплющування:

javascript

[ [1, [2]], [3, [4]] ].flatMap(x => x);
// [1, [2], 3, [4]] - не глибоке!

Використовуй flat(2):

javascript

[ [1, [2]], [3, [4]] ].flat(2);
// [1, 2, 3, 4]

Забутий return при фігурних дужках

javascript

arr.flatMap(x => { [x, x*2] }); // поверне []

Правильно:

javascript

arr.flatMap(x => [x, x*2]);
// або
arr.flatMap(x => { return [x, x*2]; });

Коли використовувати flatMap()

Мета	Чи підходить `flatMap()`
Перетворити елементи масиву	Так
Отримати плоский список із вкладених результатів	Так
Розплющити масив без трансформації	Ні - використовуй `flat()`
Зберегти вкладеність	Ні - використовуй `map()`

Коротко:

flatMap() = map() + flat(1)

Формула для запам'ятовування: arr.flatMap(fn) → застосовує fn до кожного елемента і об'єднує результат в один рівень.

Порівняння map() vs flatMap()

Критерій	`map()`	`flatMap()`
Перетворює елементи	Так	Так
Повертає вкладені масиви	Так	Ні
"Розплющує" результат	Ні	Так (на 1 рівень)
Змінює вихідний масив	Ні	Ні
Аналог	`arr.map()`	`arr.map().flat(1)`

Реальний приклад: обробка даних API

javascript

const users = [
  { name: 'Tim', hobbies: ['ski', 'guitar'] },
  { name: 'Alex', hobbies: ['books'] },
  { name: 'John', hobbies: ['surf', 'code'] },
];

// отримати всі хобі в один список
const hobbies = users.flatMap(user => user.hobbies);

console.log(hobbies);
// ['ski', 'guitar', 'books', 'surf', 'code']

Ідеальний випадок для flatMap() - коли в колбеку повертаються масиви, і ти хочеш отримати один об'єднаний список.

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

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

Premium

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