Метод map()

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

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

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

Що виконує метод:

• Поелементо перебирає вихідний масив.

• Не змінює вихідний масив.

• Результат роботи колбек-функції записується у новий масив.

• Повертає новий масив такої довжини, як і вихідний масив.

Тобто на базі вихідного масива формується новий масив такої самої довжини за якоюсь вимогою. Розгляднемо далі приклади.

Приклад 1

Переберемо вихідний масив методом map() так, щоб повернувся новий масив елементи якого вдвічі більші за елементи вихідного масива.

const array1 = [1, 2, 3, 4, 5];
console.log(array1); // [1, 2, 3, 4, 5]

const array2 = array1.map((item) => {
  return item * 2;
});

console.log(array1); // [1, 2, 3, 4, 5]
console.log(array2); // [2, 4, 6, 8, 10]

Оскільки задача для методу досить проста, то запис можна ще більше упростити використавши неявне повернення.

const array2 = array1.map((item) => item * 2);

Приклад 2

Переберемо вихідний масив і у новий масив покладемо елементи переведені в високий регістр.

const colors = ["Red", "Blue", "Yellow", "Orange"];
console.log(colors); // ["Red", "Blue", "Yellow", "Orange"]

const upperCaseColors = colors.map((el) => el.toUpperCase());

console.log(colors); // ["Red", "Blue", "Yellow", "Orange"]
console.log(upperCaseColors); // ['RED', 'BLUE', 'YELLOW', 'ORANGE']

Як бачимо вихідний масив не змінився, а новий переведено у високий регістр.

Масив обʼєктів

У більшості випадків розробникам доводиться працювати з масивом обʼєктів, які містять велику кількість властивостей. І буденною процедурою буде витягнути на його основі новий масив із якихось властивостей вихідного масива.

Наприклад потрібно витягнути прізвища користувачів.

Приклад 3

const users = [
  { name: "Taras", surname: "Shevchenko" },
  { name: "Lesia", surname: "Ukrainka" },
  { name: "Ivan", surname: "Franko" },
];

console.log(users); // array of objects

const usersSurnames = users.map((el) => el.surname);
console.log(usersSurnames); //  ['Shevchenko', 'Ukrainka', 'Franko']

На практиці метод map() використовується найчастіше.