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
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 :
Recommandé par LinkedIn
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 👩💻
Expert en Stratégie LinkedIn 🤝 Speaker 🎤 Ghostwriter 🪶
2 ans💡