Array.reduce() in JavaScript explained in less than 12 minutes (video, in Polish)
In the latest video, the author of the Overment channel highlights the diverse applications of the reduce method in JavaScript. He begins by demonstrating that this method is not limited to summing values in arrays but can be utilized for more complex calculations such as averaging. For example, by using the reduce method, viewers can dynamically calculate the average by dividing the sum of all elements by their count. This illustrates the flexibility of the reduce method in the context of array calculations.
Another interesting application of the reduce method, showcased by Overment, is checking for duplicates in an array. Utilizing a callback within the reduce method, the author demonstrates how to create a new array that will only contain unique values, which leads to the conclusion that this can check the presence of duplicates. These examples show that reduce can be creatively used, but also suggest that simpler solutions like the Set object can be employed for straightforward problems, as it automatically filters out duplicates.
Moving further, the author addresses more advanced examples, such as handling nested arrays. Overment proves that the reduce method can be used to combine simple arrays, but for more complex structures like deeply nested objects, many tasks are easier with the Flat method, which operates in newer JavaScript versions. This draws attention to the various techniques that can be applied when manipulating data in JavaScript.
A significant focus in the video is also on transforming objects. The author illustrates how to reshape object data using the reduce method by leveraging keys and object properties. Ultimately, viewers gain practical guidance on applying this method in daily coding, which can be especially beneficial for JavaScript developers. Each of these examples expands knowledge in programming and encourages experimentation with the reduce method.
Finally, Overment shares the video statistics. At the time of writing this article, the video has garnered 11,831 views and 246 likes. These numbers indicate viewer interest and engagement with the topic, which may help this material teach even more programmers how to effectively use the reduce method in JavaScript. The author also encourages participating in a newsletter for additional content not covered in the video. Staying updated with programming innovations is essential, as demonstrated by Overment.
Toggle timeline summary
-
Introduction to the method 'deduce' and its applications.
-
Explaining the basic usage of 'deduce' with examples.
-
Starting with a simple example using an array.
-
Demonstrating how 'deduce' can compute a sum.
-
Describing how 'deduce' processes each element with a callback.
-
Summing the elements in the array using a callback.
-
Exploring further uses of 'deduce' beyond summation.
-
Calculating the average of array elements using 'deduce'.
-
Details on calculating the average value and returning it.
-
Using 'deduce' to check for duplicates in a dataset.
-
Practical application of 'deduce' to find duplicates.
-
Explaining duplicate detection and suggesting alternatives.
-
Introduction to nested arrays and their handling.
-
Transitioning from flattening arrays to handling nested objects.
-
Demonstrating powerful opportunities with 'deduce'.
-
Transforming object structures using the 'deduce' method.
-
Exploring the use of functions as values within 'deduce'.
-
Encouragement to embrace the 'deduce' method.
-
Final thoughts and call to action: subscribe to the newsletter.
Transcription
Cześć! W tym filmie pokażę Ci, że metoda deduce nie służy wyłącznie do sumowania elementów. Pokażę Ci, jak możesz ją wykorzystać na kilku przykładach. Przykłady zaczniemy od tego najprostszego, czyli mam tutaj kilka elementów znajdujących się w tablicy i elementy te przechowują konkretne wartości. Z pomocą metody deduce mogę zamienić te kilka wartości w jedną. Przykładem takiego działania może być wspomniane sumowanie elementów. Jak zapewne wiesz, metoda deduce przyjmuję jako argument callback, który zostaje wykonany dla każdego elementu tablicy, na której wykonujemy metodę deduce. Mało tego, wartość, która zostanie zwrócona z każdego tego callbacku, zostanie zapisana w zmiennej total. I finalnie wartością zwróconą przez metodę deduce będzie wartość zwrócona przez ostatnie wywołanie tego callbacku. Czyli w tej sytuacji, jeżeli zapiszę ten callback w taki sposób, otrzymamy sumę elementów. Wynika to z tego, że ten callback został wykonany dla każdego elementu tej tablicy i przy każdym jego wywołaniu zwracaliśmy sumę bieżącego i poprzedniego elementu. I dzięki temu otrzymaliśmy ich łączną wartość. Mogłoby się teraz wydawać, że zastosowanie metody deduce na tym się kończy. Oczywiście możemy zamieniać tutaj działanie na dodawanie, mnożenie, dzielenie itd. Ale na tym zastosowanie metody deduce wcale się nie kończy. Pójdźmy zatem krok dalej i wykorzystajmy metodę deduce do obliczenia średniej wartości elementów. Aby to zrobić, będziemy musieli wykorzystać pozostałe argumenty, które przyjmuje callback metody deduce. Są to argumenty index oraz array. Index wskazuje oczywiście na indeks bieżącego elementu, a array na całą tablicę, na której wykonujemy metodę deduce. W tym przypadku jest to tablica orders. Obliczenie średniej wartości będzie nieco bardziej skomplikowane niż obliczenie sumy, natomiast w dalszym ciągu mówimy tutaj o sumowaniu elementów. Będziemy je sumować tak długo, aż dojdziemy do ostatniego. Wtedy, jak wspomniałem wcześniej, będziemy zwracać ostateczny wynik metody deduce i w tym przypadku jest to średnia, którą otrzymujemy poprzez podzielenie sumy tych elementów przez ich ilość. Natomiast, jak widzisz, w tej chwili obsługujemy tylko zwracanie wartości w przypadku ostatniego elementu, więc musimy zadbać również o te pozostałe, zwracając wartość total. Czyli, jak widzisz, dochodzi tutaj do sumowania elementów i wartość tej sumy przekazywana jest dalej, natomiast w sytuacji, gdy mamy do czynienia z ostatnim elementem, zwracamy średnią wartość. Tutaj ponownie wynik jest w porządku. Co ciekawe, nie jest to koniec możliwości metody deduce, więc przejdźmy już do kolejnego przykładu. Kolejny scenariusz polega na sprawdzeniu, czy w podanym zestawie danych znajdują się duplikaty. I mam tutaj nową tablicę i wykorzystam teraz metodę deduce do tego, aby to zrobić. W tej sytuacji wystarczy, że w callbacku będę sprawdzał, czy bieżąca wartość elementu znajduje się w nowo tworzonej tablicy, która będzie zwrócona na samym końcu przez metodę deduce. No właśnie, bo do tej pory z wynikiem metody deduce była jakaś wartość, ale oczywiście nic nie stoi na przeszkodzie, aby taką wartością była tablica. Zobaczmy jednak, jak to będzie wyglądało w praktyce. W tym momencie oczywiście otrzymuję błąd, ponieważ w żaden sposób nie poinformowałem metody deduce, że pracujemy na tablicy. Na szczęście jako drugi argument metoda deduce przyjmuje wartość początkową, więc w tej sytuacji będzie to pusta tablica. Dzięki temu wartość, którą przekazałem tutaj, będzie przekazana jako wartość argumentu total, więc w tej chwili wszystko będzie działać. To, co tutaj otrzymałem, to jak widzisz nowa tablica, tym razem nie zawierająca duplikatów, więc aby sprawdzić, czy w tej oryginalnej tablicy istnieją duplikaty, wystarczy, że porównam liczbę elementów w oryginalnej tablicy i w tej nowej. No i faktycznie mamy tutaj potwierdzenie, że w tej tablicy znajdują się duplikaty. Ostatecznie jednak pokazałem Ci ten scenariusz po to, aby zainspirować Cię do wykorzystania metody deduce, ale samo sprawdzanie duplikatów możemy wykonać zdecydowanie prościej, korzystając z obiektu set. Set to specjalny obiekt zawierający wyłącznie unikatowe wartości. Nowy set mogę utworzyć z pomocą konstruktora i przekazując do niego tablicę, otrzymuję od razu nowy zestaw danych pozbawiony duplikatów. Więc ponownie wystarczy, że porównam liczbę elementów, którą zawiera, z liczbą elementów oryginalnej tablicy. No i wynik, jak widzisz, jest dokładnie taki sam. No i teraz możemy przejść do kolejnego przykładu, a będą nim zagnieżdżone tablice. No bo niejednokrotnie może zdarzyć się, że będziemy mieć do czynienia właśnie z zagnieżdżonymi tablicami bądź obiektami. Tego typu struktury danych często musimy w jakiś sposób uprosić. Tak się składa, że w tej sytuacji metoda Reduce świetnie może się sprawdzić. Tutaj akurat mamy dość prosty przykład, ponieważ mamy jednopoziomowe zagnieżdżenie, więc wystarczy, że w callbacku wykonamy metodę concat do tego, aby połączyć te wszystkie tablice ze sobą no i oczywiście otrzymamy jedną tablicę zawierającą te wszystkie elementy. Natomiast wystarczy, że ten przykład byłby w jakiś sposób bardziej złożony, na przykład mielibyśmy podwójne bądź potrójne zagnieżdżenie obiektów, no i nasza metoda Reduce w tym momencie by nie zadziałała. Oczywiście moglibyśmy odpowiednio zmodyfikować kod tego callbacku, natomiast w kontekście obsługiwania zagnieżdżonych tablic istnieje zdecydowanie prostszy sposób. Mam tutaj na myśli metodę Flat, która obecnie jest na czwartym etapie procesu TC39, czyli nie jest jeszcze dla nas oficjalnie dostępna, natomiast pomocą chociażby Babela możemy z niej korzystać już dziś. Efekt jej działania jest dokładnie taki sam, natomiast obsługuje większą ilość przypadków. Ponownie jednak zdecydowałem się pokazać Ci taki scenariusz, ze względu na to, aby zainspirować Cię do wykorzystania metody Reduce w różnego rodzaju scenariuszach. No bo w końcu nie jest możliwe, abym pokazał Ci je wszystkie. Po prostu bądź świadomy, że istnieją takie możliwości wykorzystania tej metody. Oczywiście na spłaszczeniu tablic to wszystko się nie kończy, no bo co w sytuacji, gdy mamy na przykład zagnieżdżony obiekt o strukturze drzewiastej, czyli każdy z elementów może, ale nie musi posiadać właściwości Children będącą tablicą nowych elementów. Co w sytuacji, gdybyśmy chcieli z jakiegoś powodu spłaszczyć taki obiekt? Aby rozwiązać taki problem musimy stworzyć nową metodę, która będzie przyjmowała jako argument obiekt. W tej metodzie przede wszystkim musimy sprawdzić, czy przekazany obiekt jest tablicą. Dlaczego musimy to robić wyjaśnię Ci za chwilę. Tymczasem wartością, która będzie zwrócona przez metodę Flatten będzie wynik metody Reduce. Ostatecznie ta metoda zwróci nam nową tablicę i w pierwszej kolejności zadbamy o to, aby obecny element tej tablicy znalazł się w tej nowotworzonej. Natomiast jak wskazuje nam struktura tego drzewa, może się okazać, że dany element będzie posiadał dzieci. Aby to sprawdzić wykorzystamy tutaj prostego ifa. No i w tym momencie zaczyna się prawdziwa zabawa, ponieważ musimy wykorzystać rekurencję. Aktualne wartości tablicy result przypisujemy do wyniku metody Flatten wykonanej na dzieciach bieżącego elementu. W związku z tym jak działa rekurencja i tego akurat teraz nie będę tłumaczył, nawet w sytuacji, gdy dzieci tego elementu będą posiadać własne dzieci, ostateczny wynik uwzględni je wszystkie. Natomiast to, o co my musimy zadbać, to usunięcie właściwości Children z bieżącego elementu, oczywiście w momencie, gdy ten proces się skończy. No i nie pozostaje nam nic innego, jak zwrócić tablicę result i ostatecznie zainicjalizować ją pustą tablicą. Tak przygotowaną metodę możemy wywołać na naszym obiekcie, a wynik, który otrzymaliśmy w pełni spełnia nasze oczekiwania. Musisz przyznać, że takie wykorzystanie metody Reduce daje ogromne możliwości. No a skoro jesteśmy już przy możliwościach, przejdźmy teraz do przedostatniego przykładu tego filmu. Mianowicie przygotowałem tutaj obiekt o następującej strukturze, którą chciałbym, abyśmy zmodyfikowali do takiej. Oczywiście to wszystko może wydarzyć się z pomocą metody Reduce. Pytanie tylko, jak to dokładnie zrobić. I teraz możesz zatrzymać ten film, pobrać ten przykład z linku z opisu tego filmu, a następnie wrócić do propozycji mojego rozwiązania, które omówię już za chwilę. Ok, jeżeli jesteś już gotowy, możemy przejść dalej. Podstawą tej całej transformacji będą klucze tego obiektu. Wybacz mi tylko brak spójności w ich zapisie. W każdym razie, aby je wykorzystać, skorzystamy z właściwości Keys klasy Object. Dzięki temu otrzymamy tablicę tych właściwości i będziemy mogli na niej wykonać metodę Reduce. Następnie musimy zaimplementować odpowiedni Reducer. Idąc krok po kroku, na początku musimy sprawdzić, czy dana właściwość zawiera podkreślenie. Bo jeżeli go nie zawiera, nie musimy z nią nic robić, tylko po prostu przypisać ją od razu do właściwości nowo tworzonego obiektu. Ale już w sytuacji, gdy podkreślenie w nazwie się znajduje, wykorzystując takie wyrażenie regularne, rozbijamy nazwę względem drugiego podkreślenia. Dzięki temu pierwszym elementem otrzymanej w ten sposób tablicy będzie nasz docelowy klucz. Zatem musimy teraz sprawdzić, czy dany klucz istnieje w nowo tworzonym obiekcie. Jeżeli nie, musimy go po prostu utworzyć. A w momencie, gdy już mamy pewność, że pod tym kluczem znajduje się obiekt, możemy dodać do niego nowe właściwości i do tych właściwości przypisać wartości. Na samym końcu zwracamy rezultat oraz jako drugi argument metody REVIEWS podajemy nowy obiekt. Jak widzisz nasz obiekt został teraz odpowiednio zmodyfikowany. Muszę jednak zaznaczyć, że jeżeli miałeś jakiś problem z rozwiązaniem tego zadania, to proszę Cię absolutnie się nie załamuj. Zastosowanie takiego rozwiązania wymaga po prostu obycia się i doświadczenia z metodą REVIEWS. Na sam koniec przygotowałem jeszcze tylko jeden przykład, który pokazuje, że wartościami, którymi możemy operować wewnątrz metody REVIEWS mogą być również funkcje. Konkretnie spójrz proszę na ten przykład. Mamy tutaj trzy metody i każda z nich wykonuje jakieś działanie na przekazanej wartości. Teraz wszystkie te metody dodaję do nowej tablicy, na której wykonam metodę REVIEWS. Dzięki temu mogę wykorzystać teraz te wszystkie metody do wykonania jakiegoś działania na przekazanej wartości. W tej konkretnej sytuacji będzie to liczba 10. Wynik to oczywiście 18, ponieważ dodaliśmy na początku 1, następnie odjęliśmy 2 i otrzymany wynik pomnożyliśmy przez 2. Naturalnie ten konkretny przykład do niczego się nie nadaje, ale chodzi o samą koncepcję wykorzystania funkcji jako wartości metody REVIEWS. W ten oto sposób zbliżyliśmy się już do końca tego filmu. Mam nadzieję, że metoda REVIEWS na tym etapie jest dla Ciebie bardziej zrozumiała i w głowie pojawiły Ci się pomysły, jak możesz ją wykorzystać. Dlatego oczywiście serdecznie Cię zachęcam i zachęcam Cię również do jeszcze jednej rzeczy. Mianowicie proponuję, abyś przeszedł teraz do mojej strony i zapisał się na newsletter, w którym regularnie mówię o rzeczach, na które nie ma miejsca w tych filmach. Zrób to proszę teraz, a tymczasem ja dziękuję Ci za uwagę. Do usłyszenia w kolejnym filmie. Cześć!