A map() tömbfüggvény JavaScriptben

map és nem Map!

A fenti cím egészen pontosan arra utal, hogy a tömbök esetében használt map() függvény, nem összekeverendő a Map objektummal, ami egy másik JavaScript kuriózum.

És még csak nem is a térképre gondoltam, hiába a félrevezető kép. Hehe 🙂

Na, de akkor mi a map?

Szóval a map(), az egy okos kis tömbfüggvény, amit feltehetően sokszor fogunk majd használni. Feladata, hogy egy meglévő tömbből készítsen egy vadonat új tömböt úgy, hogy az eredeti tömböt érintetlenül hagyja.

A művelet végrehajtása után lesz tehát két tömbünk. Az eredeti és az új.

Hogyan működik?

A map függvény úgy működik, hogy szépen végigmegy a tömb minden elemén, feltehetően valamilyen céllal, úgy értem, hogy manipulálja a tömb elemeket. Minden lépésben visszaadja az aktuális (új) tömbelemet. Majd miután elvégezte a dolgát, eredményként rendelkezésünkre áll a teljesen új tömb.

Példa:

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

const tomb2 = tomb.map(
  (aktualisElem) => aktualisElem * 2
);

console.log(`tomb2 = ${tomb2}`);

Először is létrehoztam egy tomb nevű tömböt, 5 értékkel. A célom az volt, hogy kapjak egy olyan tömböt, aminek minden eleme kettővel meg van szorozva.

Készítettem egy tomb2 nevű változót, aminek értékül egy függvényhívást adtam. Meghívtam az arr tömb map() függvényét. Maga a map() függvény egy névtelen (anoním) nyíl függvényt kap paraméterül. Ez a nyíl függvény összesen három paramétert fogadhat:

• Az első paraméter kötelezően megadandó. Ez az aktuálisan feldolgozandó tömb elem, hiszen írtam, hogy a map() minden lépésben fog egy tömb elemet, amivel csinál valamit.
• A második paraméter megadása nem kötelező. Ez az aktuális elem indexét jelenti. Ugye nem felejtettük el, hogy a tömbök elemeinek sorszámozása 0-val kezdődik?
• És végül a harmadik paraméter, ami szintén opcionális, az maga az eredeti tömb.

A fent is látható egyszerű kis példában csak egyetlen paramétert adtam át a map()-nek, az aktualisElem-et. És mit csinál a függvény? Fogja ezt az aktuális elemet, megszorozza kettővel, majd visszaadja, hozzáadja az új tömbhöz (tomb2).

Csak egy megjegyzés, hogy a konzolban való megjelenítéshez az ES6 egyik újítását, a sztring literált használtam.

map() hívása két paraméterrel

Csináltam még egy példát, amiben a map() függvénynek átadtam az aktuális tömbelem sorszámát (index) is:

const tomb3 = tomb.map(
  (aktualisElem, index) => {
    if (index === 2) {
      return aktualisElem * 2;
    }
    return aktualisElem;
  }
)

console.log(`tomb3 = ${tomb3}`);

A nyíl függvény törzsében minden lépésben megvizsgáltam, hogy a soron következő tömbelem indexe egyenlő-e kettővel. Ugyanis én csak a 2. sorszámú tömbelemet akartam megszorozni kettővel. A többihez nem akartam nyúlni.

Működő példa

Készítettem a repl.it oldalán egy példát is erre. Ide kattintva lehet kipróbálni.