Метод flatMap()

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

Синтаксис методу flatMap():

const newArray = outputArray.flatMap((element, index, array) => {
    // Повернути трансформований елемент
});

Припустимо у нас є масив з обʼєктами користувачів в яких є властивість languages в якій у формі масивів перераховані мови, які знає користувач. Мови у користувачів можуть повторюватися. А необхідно скласти всі ці мови в один одновимірний масив. Примітка - елементи можуть повторюватися.

Приклад

const users = [
  { name: "Alex", languages: ["ua", "en", "es"] },
  { name: "Mathew", languages: ["ua", "fr", "jp"] },
  { name: "Angelina", languages: ["fr", "en", "de", "it"] },
];

const usersLanguages = users.flatMap((el) => el.languages);

console.log(usersLanguages);
// ['ua', 'en', 'es', 'ua', 'fr', 'jp', 'fr', 'en', 'de', 'it']

Якби ми використали метод map(), то отримали б такий результат. Наведемо, щоб побачити різницю між цими методами.

const usersLanguages = users.map((el) => el.languages);

console.log(usersLanguages);
// [['ua', 'en', 'es'], ['ua', 'fr', 'jp'], ['fr', 'en', 'de', 'it']]

Цей метод корисний, коли необхідно виконати мапування (трансформацію) елементів масиву та вирівняти результат, отриманий після цього мапування.