JavaScript are câteva metode la îndemână care ne ajută să iterăm prin tablourile noastre. Cele două cele mai frecvent utilizate pentru iterație sunt Array.prototype.map() și Array.prototype.forEach().

Dar cred că rămân puțin neclare, mai ales pentru un începător. Pentru că ambii fac o iterație și produc ceva. Deci, care este diferența?

În acest articol, vom analiza următoarele:

Definiții

map metoda primește o funcție ca parametru. Apoi îl aplică pe fiecare element și returnează o matrice complet nouă, cu rezultatele apelării funcției furnizate.

Aceasta înseamnă că returnează o nouă matrice care conține o imagine a fiecărui element al matricei. Se va returna întotdeauna același număr de articole.


const myAwesomeArray = [5, 4, 3, 2, 1]

myAwesomeArray.map(x => x * x)

// >>>>>>>>>>>>>>>>> Output: [25, 16, 9, 4, 1]

Ca map , forEach() metoda primește o funcție ca argument și o execută o dată pentru fiecare element matrice. Cu toate acestea, în loc să returneze o nouă matrice ca map, se întoarce undefined.

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
]

myAwesomeArray.forEach(element => console.log(element.name))
// >>>>>>>>> Output : john
//                    Ali
//                    Mass

1. Valoarea returnată

Prima diferență între map() și forEach() este valoarea returnată. forEach() metoda revine undefined și map() returnează o nouă matrice cu elementele transformate. Chiar dacă fac aceeași treabă, valoarea returnată rămâne diferită.

const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.forEach(x => x * x)
//>>>>>>>>>>>>>return value: undefined

myAwesomeArray.map(x => x * x)
//>>>>>>>>>>>>>return value: [1, 4, 9, 16, 25]

2. Capacitatea de a înlănțui alte metode

A doua diferență între aceste metode de matrice este faptul că map() este înlănțuit. Aceasta înseamnă că puteți atașa reduce(), sort(), filter() și așa mai departe după efectuarea unui map() metoda pe o matrice.

Cu asta nu poți face forEach() pentru că, după cum ați putea ghici, se întoarce undefined.

const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.forEach(x => x * x).reduce((total, value) => total + value)
//>>>>>>>>>>>>> Uncaught TypeError: Cannot read property 'reduce' of undefined
myAwesomeArray.map(x => x * x).reduce((total, value) => total + value)
//>>>>>>>>>>>>>return value: 55

3. Mutabilitate

În general, cuvântul „mutare” înseamnă schimbare, alternare, modificare sau transformare. Și în lumea JavaScript are același sens.

Un obiect mutabil este un obiect a cărui stare poate fi modificată după ce a fost creat. Deci, ce zici de forEach și map cu privire la mutabilitate?

Ei bine, conform Documentația MDN:

forEach() nu mută matricea pe care este apelat. (In orice caz, callback poate face acest lucru).

map() nu mută matricea pe care este apelat (deși callback, dacă este invocat, poate face acest lucru).

JavaScript este ciudat.

Gif

Aici, vedem o definiție foarte similară și știm cu toții că ambii primesc un callback ca argument. Deci, care se bazează pe imuabilitate?

Ei bine, în opinia mea, această definiție nu este însă clară. Și pentru a ști care nu mută matricea originală, trebuie mai întâi să verificăm cum funcționează aceste două metode.

map() metoda returnează o matrice complet nouă cu elemente transformate și aceeași cantitate de date. În cazul în care forEach(), chiar dacă se întoarce undefined, va muta matricea originală cu callback.

Prin urmare, vedem clar că map() se bazează pe imuabilitate și forEach() este o metodă mutatoare.

4. Viteza de performanță

În ceea ce privește viteza de performanță, acestea sunt puțin diferite. Dar, contează? Ei bine, depinde de diverse lucruri, cum ar fi computerul, cantitatea de date cu care aveți de-a face și așa mai departe.

Puteți să-l verificați singur cu acest exemplu de mai jos sau cu jsPerf pentru a vedea care este mai rapid.

const myAwesomeArray = [1, 2, 3, 4, 5]

const startForEach = performance.now()
myAwesomeArray.forEach(x => (x + x) * 10000000000)
const endForEach = performance.now()
console.log(`Speed [forEach]: ${endForEach - startForEach} miliseconds`)

const startMap = performance.now()
myAwesomeArray.map(x => (x + x) * 10000000000)
const endMap = performance.now()
console.log(`Speed [map]: ${endMap - startMap} miliseconds`)

Gânduri finale

Ca întotdeauna, alegerea între map() și forEach() va depinde de cazul dvs. de utilizare. Dacă intenționați să modificați, să alternați sau să utilizați datele, ar trebui să alegeți map(), deoarece returnează o nouă matrice cu datele transformate.

Dar, dacă nu veți avea nevoie de matricea returnată, nu utilizați map() – în schimb utilizați forEach() sau chiar a for buclă.

Sperăm că acest post clarifică diferențele dintre aceste două metode. Dacă există mai multe diferențe, vă rugăm să le împărtășiți în secțiunea de comentarii, altfel vă mulțumim că ați citit-o.

Citiți mai multe articole despre blogul meu

Fotografie de Franck V. pe Unsplash