JavaScript Array – метод map()

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

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

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

const newArray = array.map(callback(currentValue [, index [, array]]) [, thisArg])

callback – функція, що викликається для кожного елемента масиву. Вона приймає наступні аргументи:

  • currentValue – поточний елемент масиву
  • index (необов’язково) – індекс поточного елемента масиву
  • array (необов’язково) – сам масив

thisArg (необов’язково) – значення, яке буде доступне як this, всередині callback функції.

Розглянемо деякі приклади використання методу map() у JavaScript.

Перетворення масиву чисел

Уявімо, що нам потрібно подвоїти кожне число з масиву:

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

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

Без використання методу map(), цю саму задачу можна виконати наступним чином:

const numbers = [1, 2, 3, 4];
const doubledNumbers = [];

for (const num of numbers) {
  doubledNumbers.push(num * 2);
}

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

Як бачимо, map() дозволяє вирішити задачу в більш скороченому стилі.

Адаптація даних

Припустимо, що API повертає масив об’єктів, і наша задача вибрати з кожного об’єкта лише потрібні поля, та створити на основі цього новий масив:

const apiPosts = [
  { id: 1, title: 'Post 1' },
  { id: 2, title: 'Post 2' },
];

const postTitles = apiPosts.map((post) => post.title);
console.log(postTitles); // ['Post 1', 'Post 2']

За допомогою map() можна зробити також зворотну адаптацію даних, перетворивши масив заголовків на масив об’єктів:

const postTitles = ['Post 1', 'Post 2'];

const apiPosts = postTitles.map((title, index) => ({
  id: index + 1,
  title: title,
}));

console.log(apiPosts);
// [{ id: 1, title: 'Post 1' }, { id: 2, title: 'Post 2' }]

Зверніть увагу, що в останньому прикладі callback функція приймає два аргументи: поточне значення з масиву (title) та його індекс (index).

Відмінність між map(), forEach() та filter()

  • map() – повертає новий масив, перетворюючи кожен елемент
  • forEach() – просто перебирає масив, нічого не повертаючи
  • filter() – повертає новий масив, з елементами що відповідають визначеній умові

Підсумок

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

Докладніше про метод map() можна прочитати на сторінці документації MDN.

Мітки: