JavaScript reduce() : 3 exemples UTILES de cette fonction compliquée mais compréhensible en 10 min

Comprendre reduce() c'est bien, pouvoir s'en servir dans ses applications, c'est mieux :)
Nous allons voir comment utiliser reduce() puis le mettre en oeuvre dans 3 cas de figures réalistes.
Comprendre reduce() pourra en outre vous permettre de répondre à des questions d'entretien technique sur des postes de développeur JavaScript où l'on attendra de vous de connaître JavaScript lui-même, en plus d'un framework.

Formations Front, Back et FullStack :

Programmez votre propre outil no-code avec HTML CSS et JavaScript :

Accès rapide :
0:00 comprendre reduce() en apprenant à calculer le total d'un caddie
2:12 reduce() pour regrouper des objets par catégorie
5:54 reduce() pour transformer la structure de données retournées par une API REST

[jeromediaz]

Je n'avais jamais tellement compris.
Merci bcp, en effet ça a l'air bien pratique pour réformer un tableau a sa convenance, certainement moins gourmand que de faire un foreach.

[yspoon]

J'adore tes explications sont super claires. Merci beaucoup pour ton aide !

[clem]

Fonction très puissante mais qui est souvent considérée comme obscure par beaucoup de devs. Bonne vidéo et bons exemples qui expliquent concrètement ce qu'on peut en faire !
PS: petite amélioration dans les 3ème exemple, on peut utiliser directement le 'id' issu de la décomposition plutôt que 'curr.id' =)

[davenpaint]

Parfait. En effet, la petite remarque sur le data structuring des datas fetch sur des API c'est super important, à mes débuts, je galérais indéfiniment à muter tout ça continuellement dans mes Apps. Perso, je me sers énormément de Map() et Set() en corrélation, mais peu de reduce finalement. Toujours pertinentes ces vidéos!

[armandwadji]

Vraiment sous-estimé cette méthode Reduce…
Merci d’éclairer la lanterne

[francoismonfret]

Salut, merci beaucoup pour cette vidéo

[joeNonos]

Merci, c'est une vidéo claire et concise, très utile.

reduce a l'air de sacrément s'inspirer des pliures à gauche et à droite en haskell et plus précisément foldl et foldr.
En javascript le pliage est-il plutôt à gauche ou à droite ?

[omararharbi]

pour l'exemple 2 :
const total = objects.reduce((acc, e) => {
acc[e.type] = ++acc[e.type] || 1
return acc;
}, {})

[n-l-b]

bonne vidéo ! petite question par exemple est-il possible si on ajoutait un musicien jouant des Drums d'obtenir un objet avec le nom de l'instrument et le nombre de musiciens pour cet instrument ?