dexblog.ro
JS Toate comenzile JavaScript

map în JavaScript

Tablouri (array) ES5 (toate browserele moderne)

Creează un tablou nou, transformând fiecare element cu o funcție.

Sintaxă 
tablou.map((element, indice) => valoareNoua)

Ce face map

map aplică funcția dată pe fiecare element și pune rezultatele într-un tablou nou, de aceeași lungime. Tabloul original rămâne neschimbat.

Este metoda folosită pentru transformări: prețuri cu TVA, extragerea unui singur câmp din obiecte, generarea de HTML dintr-o listă de date.

Parametri

Parametru Descriere
element Elementul curent.
indice Opțional. Poziția elementului.

Ce returnează

Un tablou nou cu valorile returnate de funcție.

Exemple

Exemplul 1: Prețuri cu TVA

const preturi = [100, 250, 40];
const cuTva = preturi.map((pret) => pret * 1.21);

console.log(cuTva);
console.log(preturi);

Rezultat

[ 121, 302.5, 48.4 ]
[ 100, 250, 40 ]

Exemplul 2: Un singur câmp din fiecare obiect

const utilizatori = [
  { id: 1, nume: "Ana" },
  { id: 2, nume: "Mihai" },
  { id: 3, nume: "Ioana" },
];

console.log(utilizatori.map((u) => u.nume));

Rezultat

[ 'Ana', 'Mihai', 'Ioana' ]

Exemplul 3: HTML dintr-o listă

const meniu = ["Acasă", "Blog", "Contact"];
const html = meniu.map((link) => `<li>${link}</li>`).join("");

console.log(`<ul>${html}</ul>`);

Rezultat

<ul><li>Acasă</li><li>Blog</li><li>Contact</li></ul>

Greșeli frecvente

  • Funcția cu acolade nu are return: tablou.map((x) => { x * 2 }) dă un tablou plin de undefined.
  • Folosești map doar pentru efecte (afișare) și ignori rezultatul. Pentru asta există forEach.

Comenzi înrudite

  • filter: Creează un tablou nou doar cu elementele care îndeplinesc o condiție.
  • reduce: Combină toate elementele unui tablou într-o singură valoare: o sumă, un obiect, un text.
  • forEach: Rulează o funcție pentru fiecare element dintr-un tablou.