La fonction reduce() en Javascript / Typescript

La fonction reduce() en Javascript / Typescript

Hello 👋

Dans ce nouveau numéro de codeNews, nous allons aborder la fonction reduce() en Javascript et Typescript.

➡️ Découvrir la fonction Reduce

La fonction reduce() permet de traiter chaque valeur d'une liste (comme map() par exemple) afin de la réduire en une seule valeur.

Prototype de la fonction

array.reduce(callback[, initialValue]);
        

Paramètres

  • callback : La fonction qui sera appelée sur chaque item du tableau. Le callback permet d'accéder à l'accumulateur, la valeur courante, l'index, l'array.
  • initialValue : La valeur initial de l'accumulateur

Retour

La fonction reduce() renvoie la valeur réduite de notre tableau.


➡️ Exemple d'utilisation

Un cas classique d'utilisation de reduce() est d'additionner l'ensemble des valeurs d'un tableau de nombre pour en obtenir le total. Avec une boucle for, on devrait faire :


let array = [56, 12, 43, 69]
let sum = 0

for(let i = 0; i < array.length; i++) {
  sum += array[i]
};

console.log(sum) // 180
        

La fonction reduce() nous permet d'écrire quelque chose de plus simple pour le même résultat.


let array = [56, 12, 43, 69]
let sum = array.reduce((accumulator, item) => accumulator + item)

console.log(sum) // 180
        

On gagne tout de même quelques lignes.

Il est aussi possible d'assigner une valeur par défaut à notre accumulateur. Par exemple :


let array = [56, 12, 43, 69]
let sum = array.reduce((accumulator, item) => accumulator + item, 20)

console.log(sum) // 200
        


➡️ Reduce avec Typescript

Avec typescript, l'utilisation de reduce() est très similaire.

Si on reprend l'exemple ci-dessus, typescript va être capable de détecter le type de notre accumulateur grâce à la valeur par défaut (20). Mais qu'en est-il si l'on souhaite travailler avec des objets un peu plus complexe ?

Prenons un autre exemple. Nous souhaitons transformer un tableau d'objet, avec un propriété value qui contient un nombre, en tableau de nombre. Nous pourrions donc écrire :


let array = [
    { value: 35 },
    { value: 89 },
    { value: 28 }
]


let sum = array.reduce((accumulator, item) => {
    accumulator.push(item.value)
    return accumulator
}, [])
        

Ce code en Javascript ne pose aucun problème. En revanche, dans ce cas, Typescript va lever une erreur.

Ici, nous définissons la valeur par défaut de l'accumulateur tel que [] qui est en fait interprété comme never[] (plus d'information sur never). Le type never à la particularité de ne pas pouvoir être assignable, c'est-à-dire qu'on ne peut pas modifier sa valeur. Typescript va alors lever une exception au niveau de la ligne accumulator.push(item.value):

Argument of type 'number' is not assignable to parameter of type 'never'        

Afin de palier ce problème, il faut définir le type de notre tableau. On pourra donc écrire :


let sum = array.reduce<number[]>((accumulator, item) => {
    accumulator.push(item.value)
    return accumulator
}, [])
        

Cette écriture un peu particulière function<type>() nous permet de définir la valeur de retour de notre fonction. Dans la situation ci-dessus, Typescript va être capable de faire le lien entre notre variable accumulator et le type de retour de la fonction.


---

codeNews, c'est terminé pour aujourd'hui !

N'hesitez pas à t'abonner si ce nouveau numéro t'as plu. On se retrouve jeudi prochain pour un nouveau numéro ! 🤓

Happy coding  👩💻



Gwenaël Laurent

Expert en Stratégie LinkedIn 🤝 Speaker 🎤 Ghostwriter 🪶

2 ans

💡

Identifiez-vous pour afficher ou ajouter un commentaire

Plus d’articles de Etienne PASSOT

  • Les 4 règles du Simple Design

    Les 4 règles du Simple Design

    Dans ce nouvel épisode de codeNews, on va parler des 4 règles du simple design définies par Kent Beck. Souviens-toi, la…

    1 commentaire
  • Pourquoi il est important d'écrire du code propre ?

    Pourquoi il est important d'écrire du code propre ?

    CodeNews est de retour !! Après 9 mois d’absence, j’ai décidé de relancer ma Newsletter. En effet, c’est un très bon…

  • Vacation Time 🏖

    Vacation Time 🏖

    ☀️ L'été arrive, chacun d'entre nous va prendre des vacances, partir bronzer au soleil, voir la famille… C'est donc le…

    5 commentaires
  • 🍍Pinia is the new Vuex

    🍍Pinia is the new Vuex

    Vous avez peut-être déjà entendu parler de Pinia : c'est le nouveau gestionnaire de state recommandé pour Vue 3…

    6 commentaires
  • Installez Node et Changez de Version avec NVM

    Installez Node et Changez de Version avec NVM

    "J'ai un problème, je travaille sur 2 projets qui n'ont pas la même version de Node" J'ai une solution : NVM. NVM ou…

    1 commentaire
  • Comprendre la mémoire en Javascript !

    Comprendre la mémoire en Javascript !

    👋 Dans ce nouveau numéro de codeNews, on va aborder un sujet souvent mis de côté, mais pourtant très important : la…

    7 commentaires
  • Comment résoudre les problèmes de type avec array.filter() en Typescript ? 🧐

    Comment résoudre les problèmes de type avec array.filter() en Typescript ? 🧐

    Hello les devs 👩‍💻 Dans ce nouveau numéro de codeNews, nous allons nous attaquer à un problème de type dont on peut…

  • Any vs Unknown en Typescript

    Any vs Unknown en Typescript

    Bonjour à tous 👋 on se retrouve pour le 10ᵉ numéro de codeNews ! Et oui, le temps passe vite Pour ce nouveau numéro…

    2 commentaires
  • Npm vs Yarn

    Npm vs Yarn

    Bonjour et bienvenue dans ce nouveau numéro de codeNews ! 👋 Aujourd'hui, nous allons parler de Npm et Yarn. Vous avez…

    5 commentaires
  • Quelle est la différence entre number et Number en JavaScript?

    Quelle est la différence entre number et Number en JavaScript?

    Nouveau jeudi, nouveau codeNews ! 🤓 En JavaScript, vous avez sûrement déjà vu un type écrit en minuscule ou avec une…

    1 commentaire

Autres pages consultées

Explorer les sujets