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

Поделиться
HTML-код
  • Опубликовано: 7 фев 2025

Комментарии • 21

  • @jeromediaz5333
    @jeromediaz5333 2 года назад +2

    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.

    • @codeconcept
      @codeconcept  2 года назад +1

      Merci Jérôme,
      reduce() est une fonction qui fait peur, mais en jouant avec, on prend le pli (et quand on arrête de jouer avec, on oublie vite :D). Comprendre reduce() ça permet de comprendre le codes des autres développeurs qui s'en serve et de ne pas tomber dans certains pièges d'entretiens techniques.
      Pour les perfs, rien ne vaut des benchmarks, leanylabs.com/blog/js-forEach-map-reduce-vs-for-for_of/

  • @clem440
    @clem440 2 года назад +2

    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' =)

    • @codeconcept
      @codeconcept  2 года назад

      Merci Clem :)
      Et bien vu pour l'id ;)

  • @yspoon3500
    @yspoon3500 2 года назад +4

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

    • @codeconcept
      @codeconcept  2 года назад

      Merci Yspoon :) Content que ce soit éclairant, parce que c'est une fonction parmi les plus difficiles à comprendre en JavaScript ;)

  • @davenpaint
    @davenpaint 2 года назад +2

    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!

    • @codeconcept
      @codeconcept  2 года назад

      Merci David :) Content de voir que je n'ai pas été le seul à me prendre la tête avec des données qui n'avaient pas la structure qui convenait pas mon app. Map() et set() sont aussi très utiles dans ces cas de figure (set() notamment pour virer les doublons ;))

  • @armandwadji7405
    @armandwadji7405 2 года назад +1

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

    • @codeconcept
      @codeconcept  2 года назад +1

      Merci Armand. Oui, reduce peut faire ce qu'on fait d'ordinaire avec plusieurs fonctions à la suite ou bien avec une ou plusieurs boucles. C'est une sacrée fonction ;).

  • @francoismonfret8108
    @francoismonfret8108 Год назад +1

    Salut, merci beaucoup pour cette vidéo

  • @MakdoKro
    @MakdoKro Год назад +1

    Excellent merci

  • @joeNonos
    @joeNonos Год назад +1

    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 ?

    • @codeconcept
      @codeconcept  Год назад

      Merci N joen :)
      N'ayant jamais fait de Haskell, je ne pourrais pas préciser. Je connais seulement sa réputation de langage réellement fonctionnel.
      Concernant reduce(), il traite le tableau de gauche à droite. Je viens de voir qu'il existe un reduceRight() pour traiter un tableau ... de droite à gauche ;)

  • @omararharbi4705
    @omararharbi4705 Год назад +2

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

  • @n-l-b
    @n-l-b 2 года назад +1

    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 ?

    • @n-l-b
      @n-l-b 2 года назад

      const musicians = [
      { name: "Jimmy Hendrix", instrument: "guitar"},
      { name: "Chopin", instrument: "Piano"},
      { name: "Liszt", instrument: "Piano"},
      { name: "Liszt", instrument: "Piano"},
      { name: "Paul Mc Cartney", instrument: "Bass"},
      ]
      const nbMusicianPerInstrument = (musicians.reduce( ( acc, musician) => {
      if (acc[musician.instrument]== null) acc[musician.instrument] = 1
      else acc[musician.instrument] += 1
      return acc
      }, []))
      console.log(nbMusicianPerInstrument)
      nous donne
      [ guitar: 1, Piano: 3, Bass: 1 ]
      Désolé pour le formatage du code dans les commentaires...

    • @codeconcept
      @codeconcept  2 года назад

      Oui c'est possible. Il faut tester si l'accumulateur, qui est un objet, comporte déjà une propriété, la propriété drums par exemple. Avec un "if(drums in musicians){}"). Si oui, on incrémente: musicians[drums]++, sinon, on ajoute la propriété drums qu'on initialise à 1 : musicians[drums] = 1 Je fais ça de tête, je n'ai pas l'exemple sous les yeux, mais c'est l'esprit de la chose :)