Jak korzystać z map JavaScript – .map()

Wprowadzenie

JavaScript to wszechstronny język programowania, mający fundamentalne znaczenie w kreowaniu interaktywnych witryn i aplikacji. Jednym z jego kluczowych elementów jest funkcja .map(), która umożliwia modyfikację i tworzenie nowych zbiorów danych w oparciu o istniejące kolekcje. W niniejszym tekście przeanalizujemy sposób wykorzystania funkcji .map() w JavaScript, jej strukturę, zastosowania i przykłady praktyczne.

Struktura funkcji .map()

Funkcja .map() przyjmuje jako argument funkcję zwrotną (callback function) i generuje nową tablicę, w której każdy element jest wynikiem wykonania tej funkcji dla odpowiadającego mu elementu w tablicy początkowej. Schemat funkcji .map() przedstawia się następująco:


const nowaKolekcja = kolekcja.map((element, indeks, kolekcja) => {
// Kod funkcji zwrotnej
});


• kolekcja – to początkowa tablica, na której operujemy.
• element – aktualnie przetwarzany element tablicy.
• indeks – pozycja bieżącego elementu w tablicy.
• kolekcja – pierwotna tablica dostępna wewnątrz funkcji zwrotnej (opcjonalne).
• => – to składnia funkcji strzałkowej, alternatywa dla słowa kluczowego function.
• {} – to przestrzeń kodu funkcji zwrotnej, w której określamy rezultat dla każdego elementu.

Obszary zastosowań funkcji .map()

Funkcja .map() jest przydatna w wielu scenariuszach, w tym:

• Generowanie nowych tablic na bazie istniejących struktur danych.
• Przekształcanie formatu danych w tablicy.
• Selekcjonowanie danych z tablicy.
• Porządkowanie elementów w tablicy.

Przykłady praktyczne funkcji .map()

Przykład 1: Inicjalizacja nowej tablicy


const numery = [1, 2, 3, 4, 5];

const numeryPodniesioneDoKwadratu = numery.map((numer) => {
return numer * numer;
});

console.log(numeryPodniesioneDoKwadratu); // [1, 4, 9, 16, 25]


W tym przykładzie kreujemy nową tablicę numeryPodniesioneDoKwadratu, przechowującą kwadraty wartości z tablicy numery.

Przykład 2: Modyfikacja danych


const nazwiska = ["Jan", "Maria", "Piotr", "Anna"];

const nazwiskaDuzaLitera = nazwiska.map((nazwisko) => {
return nazwisko.toUpperCase();
});

console.log(nazwiskaDuzaLitera); // ["JAN", "MARIA", "PIOTR", "ANNA"]


W tym przypadku modyfikujemy elementy tablicy nazwiska, zamieniając je na wielkie litery.

Przykład 3: Selekcja danych


const produkty = [
{ nazwa: "Jabłka", cena: 10 },
{ nazwa: "Banany", cena: 15 },
{ nazwa: "Pomarańcze", cena: 20 },
];

const produktyPonizej15zl = produkty.map((produkt) => {
if (produkt.cena < 15) {
return produkt;
}
});

console.log(produktyPonizej15zl); // [{ nazwa: "Jabłka", cena: 10 }, { nazwa: "Banany", cena: 15 }]


W tej sytuacji filtrujemy elementy tablicy produkty, zwracając tylko te, których cena jest niższa niż 15 zł.

Przykład 4: Sortowanie danych


const cyfry = [5, 2, 9, 1, 7];

const cyfryPosortowane = cyfry.map((cyfra, indeks) => {
return { wartosc: cyfra, pierwotnyIndeks: indeks };
}).sort((a, b) => a.wartosc - b.wartosc);

console.log(cyfryPosortowane); // [{ wartość: 1, pierwotnyIndeks: 3 }, { wartość: 2, pierwotnyIndeks: 1 }, { wartość: 5, pierwotnyIndeks: 0 }, { wartość: 7, pierwotnyIndeks: 4 }, { wartość: 9, pierwotnyIndeks: 2 }]


W tym przykładzie porządkujemy elementy tablicy cyfry w porządku rosnącym. Tworzymy nową tablicę z obiektami zawierającymi wartości i oryginalne indeksy, a następnie sortujemy ją na podstawie wartości.

Podsumowanie

Funkcja .map() w JavaScript to efektywne narzędzie do transformacji, selekcji i sortowania informacji w tablicach. Jej prosta składnia i szeroki wachlarz zastosowań czynią ją niezbędnym elementem w pracy każdego programisty JavaScript. Poprzez zrozumienie i umiejętne wykorzystanie funkcji .map(), możemy pisać skuteczny i elastyczny kod w różnych zadaniach programistycznych.

Najczęściej zadawane pytania

1. Co jest wynikiem działania funkcji .map()?

Funkcja .map() tworzy nową tablicę, w której elementy są wynikami wywołania funkcji zwrotnej dla każdego elementu oryginalnej tablicy.

2. Czy funkcja .map() modyfikuje oryginalną tablicę?

Nie, funkcja .map() nie zmienia pierwotnej tablicy. Zamiast tego, tworzy nową tablicę z przekształconymi elementami.

3. W jaki sposób przekazać funkcję zwrotną do funkcji .map()?

Funkcję zwrotną można dostarczyć do funkcji .map() jako funkcję anonimową (lambda) lub zdefiniowaną wcześniej funkcję.

4. Czy funkcja .map() może służyć do filtrowania danych?

Tak, funkcja .map() może służyć do selekcji danych, zwracając null lub undefined dla elementów, które nie mają być uwzględnione w tablicy wynikowej.

5. Czy funkcja .map() umożliwia sortowanie danych?

Tak, funkcja .map() może być użyta do sortowania danych poprzez utworzenie nowej tablicy z obiektami zawierającymi wartości i ich pierwotne indeksy, a następnie posortowanie tej nowej tablicy.

6. Czy funkcja .map() jest łańcuchowa?

Tak, funkcja .map() jest łańcuchowa, co oznacza, że można ją wielokrotnie zastosować do tej samej tablicy.

7. Jakie są inne funkcje o podobnym działaniu do funkcji .map()?

Inne podobne funkcje to .filter(), .reduce(), .find() i forEach().

8. Kiedy korzystać z funkcji .map(), a kiedy używać innych, podobnych funkcji?

• .map() jest przydatna przy tworzeniu nowej tablicy z przekształconymi elementami.
• .filter() jest stosowana do selekcjonowania elementów tablicy na podstawie określonego kryterium.
• .reduce() jest wykorzystywana do redukcji tablicy do pojedynczej wartości.
• .find() służy do znalezienia pierwszego elementu w tablicy, który spełnia zadany warunek.
• forEach() jest używana do wykonania określonych operacji na każdym elemencie tablicy, ale nie tworzy nowej tablicy.