JavaScript reduce(): jak działa metoda i kiedy jej używać

let result = array.reduce((acc, v, i, a) => {
// zwraca nową wartość do zmiennej 
}, initVal);

// result - pojedyncza wartość, która zostaje zwrócona.
// array - tablica, na której działa funkcja redukująca.
// acc - akumulator, który zbiera wszystkie zwracane wartości.
// v - aktualnie przetwarzana wartość
// i - indeks aktualnie przetwarzanej wartości.
// a - tablica źródłowa
// initVal - opcjonalna wartość początkowa.
// Jeśli wartość początkowa nie zostanie podana,
// jako wartość początkowa użyty zostaje element 0.

Metodę reduce można traktować jak pętlę for zbudowaną specjalnie po to, by z wartości tablicy zrobić coś nowego. Spójrz na ten przykład.

var array = [11, 12, 13, 14];
var sum = 0;
for(var i = 0; i  < array.length; i++) {
      sum += array[i];
 }

// sum = 50

Powyższy kod ma znaleźć sumę wszystkich wartości w naszej tablicy. Działa, ale ten sam wynik da się uzyskać prościej.

Zrefaktoryzujmy tę funkcję, używając metody reduce().

let array = [11, 12, 13, 14];
let sum = array.reduce((bcc, v) => bcc + v);
// sum = 50

Ten sam wynik, ani śladu pętli.

Do przenoszenia narastającej sumy użyliśmy zmiennej bcc. W miarę jak reduce() przechodzi przez tablicę, wartość bcc rośnie, aż funkcja się skończy.

Pamiętasz, jak wspomniałem o opcjonalnej wartości początkowej? Ustawia się ją bez trudu. Weźmy ten sam przykład co wcześniej: sumujemy tablicę, ale tym razem chcemy wystartować od wartości 250.

Jak to wygląda, gdy zaczynamy od 250? Poniższy przykład mówi wszystko.

let array = [11, 12, 13, 14];
let sum = array.reduce((bcc, v) => bcc + v, 250);

Jak widzisz, powyższy kod jest niemal identyczny z poprzednim. Zmienił się tylko drugi argument po naszym callbacku: podałem liczbę 250 jako punkt wyjścia. Teraz po uruchomieniu funkcji suma wyniesie 300.

Mam nadzieję, że to się przyda. Znajdziesz tu jeszcze kilka artykułów o JavaScripcie, a zwłaszcza o tablicach, choćby ten o tym, jak połączyć dwie tablice w JavaScripcie.