Array : méthode reduceRight()

Exemple interactif

const array1 = [
  [0, 1],
  [2, 3],
  [4, 5],
];

const result = array1.reduceRight((accumulator, currentValue) =>
  accumulator.concat(currentValue),
);

console.log(result);
// Résultat attendu : Array [4, 5, 2, 3, 0, 1]

Syntaxe

reduceRight(callbackFn)
reduceRight(callbackFn, initialValue)

Paramètres

callbackFn

La fonction à exécuter pour chaque élément du tableau. Sa valeur de retour devient la valeur du paramètre accumulator lors de l'appel suivant de callbackFn. Pour le dernier appel, la valeur de retour devient la valeur retournée par reduceRight(). La fonction est appelée avec les arguments suivants :

accumulator

La valeur résultant de l'appel précédent de callbackFn. Lors du premier appel, sa valeur est initialValue si ce dernier est défini ; sinon, sa valeur est le dernier élément du tableau.

currentValue

La valeur de l'élément courant. Lors du premier appel, sa valeur est le dernier élément si initialValue est défini ; sinon, sa valeur est l'avant-dernier élément.

currentIndex

L'index de currentValue dans le tableau. Lors du premier appel, sa valeur est array.length - 1 si initialValue est défini, sinon array.length - 2.

array

Le tableau sur lequel reduceRight() a été appelé.

initialValue Facultatif

La valeur à utiliser comme accumulateur lors du premier appel de la fonction callbackFn. Si aucune valeur initiale n'est fournie, le dernier élément du tableau sera utilisé et ignoré. Appeler reduceRight() sur un tableau vide sans valeur initiale lève une exception TypeError.

Valeur de retour

La valeur obtenue grâce à la fonction de réduction.

Description

La méthode reduceRight() est une méthode itérative. Elle exécute une fonction de rappel « de réduction » sur tous les éléments du tableau, dans l'ordre décroissant des indices, et les accumule en une seule valeur. Consultez la section méthodes itératives pour plus d'informations sur le fonctionnement général de ces méthodes.

callbackFn n'est appelée que pour les indices du tableau qui ont des valeurs attribuées. Elle n'est pas appelée pour les cases vides dans un tableau creux.

Contrairement aux autres méthodes itératives, reduceRight() n'accepte pas d'argument thisArg. callbackFn est toujours appelée avec la valeur undefined pour this, qui est remplacée par globalThis si callbackFn n'est pas en mode strict.

La méthode reduceRight() est générique. Elle attend seulement que la valeur de this possède une propriété length et des propriétés à clés entières.

Toutes les mises en garde concernant reduce évoquées dans Quand ne pas utiliser reduce() s'appliquent aussi à reduceRight. Comme JavaScript ne possède pas de sémantique d'évaluation paresseuse, il n'y a aucune différence de performance entre reduce et reduceRight.

Exemples

Fonctionnement de reduceRight() sans valeur initiale

L'appel à la fonction de rappel callbackFn de reduceRight ressemblerait à ceci :

arr.reduceRight((accumulator, currentValue, index, array) => {
  // …
});

La première fois que la fonction est appelée, accumulator et currentValue peuvent prendre deux valeurs différentes. Si une initialValue est fournie lors de l'appel à reduceRight, alors accumulator sera égal à initialValue et currentValue sera égal à la dernière valeur du tableau. Si aucune initialValue n'est fournie, alors accumulator sera égal à la dernière valeur du tableau et currentValue sera égal à l'avant-dernière valeur.

Si le tableau est vide et qu'aucune initialValue n'est fournie, TypeError sera levée. Si le tableau ne contient qu'un seul élément (peu importe sa position) et qu'aucune initialValue n'est fournie, ou si initialValue est fournie mais que le tableau est vide, la valeur unique sera retournée sans appeler callbackFn.

Voici quelques exemples d'exécution de la fonction :

[0, 1, 2, 3, 4].reduceRight(
  (accumulator, currentValue, index, array) => accumulator + currentValue,
);

La fonction de rappel sera appelée quatre fois, avec les arguments et valeurs de retour suivants à chaque appel :

Le paramètre array ne change jamais pendant le processus : il reste toujours [0, 1, 2, 3, 4]. La valeur retournée par reduceRight sera celle du dernier appel de la fonction de rappel (10).

Fonctionnement de reduceRight() avec une valeur initiale

Ici, on réduit le même tableau avec le même algorithme, mais en passant une initialValue de 10 comme second argument à reduceRight() :

[0, 1, 2, 3, 4].reduceRight(
  (accumulator, currentValue, index, array) => accumulator + currentValue,
  10,
);

La valeur retournée par reduceRight dans ce cas sera bien sûr 20.

Additionner toutes les valeurs d'un tableau

const sum = [0, 1, 2, 3].reduceRight((a, b) => a + b);
// sum vaut 6

Exécuter une liste de fonctions asynchrones avec des rappels en série, chaque résultat étant passé à la suivante

const waterfall =
  (...functions) =>
  (callback, ...args) =>
    functions.reduceRight(
      (composition, fn) =>
        (...results) =>
          fn(composition, ...results),
      callback,
    )(...args);

const randInt = (max) => Math.floor(Math.random() * max);

const add5 = (callback, x) => {
  setTimeout(callback, randInt(1000), x + 5);
};
const mul3 = (callback, x) => {
  setTimeout(callback, randInt(1000), x * 3);
};
const sub2 = (callback, x) => {
  setTimeout(callback, randInt(1000), x - 2);
};
const split = (callback, x) => {
  setTimeout(callback, randInt(1000), x, x);
};
const add = (callback, x, y) => {
  setTimeout(callback, randInt(1000), x + y);
};
const div4 = (callback, x) => {
  setTimeout(callback, randInt(1000), x / 4);
};

const computation = waterfall(add5, mul3, sub2, split, add, div4);
computation(console.log, 5); // Affiche 14

// équivalent à :

const computation2 = (input, callback) => {
  const f6 = (x) => div4(callback, x);
  const f5 = (x, y) => add(f6, x, y);
  const f4 = (x) => split(f5, x);
  const f3 = (x) => sub2(f4, x);
  const f2 = (x) => mul3(f3, x);
  add5(f2, input);
};

Différence entre reduce et reduceRight

const a = ["1", "2", "3", "4", "5"];
const gauche = a.reduce((prev, cur) => prev + cur);
const droite = a.reduceRight((prev, cur) => prev + cur);

console.log(gauche); // "12345"
console.log(droite); // "54321"

Définir des fonctions composables

La composition de fonctions est un mécanisme permettant de combiner des fonctions, où la sortie de chaque fonction est passée à la suivante, et la sortie de la dernière fonction est le résultat final. Dans cet exemple, on utilise reduceRight() pour implémenter la composition de fonctions.

Voir aussi Composition de fonctions ^(angl.) sur Wikipédia.

const compose =
  (...args) =>
  (value) =>
    args.reduceRight((acc, fn) => fn(acc), value);

// Incrémente le nombre passé en argument
const inc = (n) => n + 1;

// Double la valeur passée en argument
const double = (n) => n * 2;

// Utilisation de la fonction de composition
console.log(compose(double, inc)(2)); // 6

// Utilisation de la fonction de composition
console.log(compose(inc, double)(2)); // 5

Utiliser reduceRight() avec des tableaux creux

reduceRight() ignore les éléments manquants dans les tableaux creux, mais n'ignore pas les valeurs undefined.

console.log([1, 2, , 4].reduceRight((a, b) => a + b)); // 7
console.log([1, 2, undefined, 4].reduceRight((a, b) => a + b)); // NaN

Appeler reduceRight() sur des objets ressemblant à des tableaux

La méthode reduceRight() lit la propriété length de this puis accède à chaque propriété dont la clé est un entier non négatif inférieur à length.

const objetSimilaireTableau = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
  3: 99, // ignoré par reduceRight() car length vaut 3
};
console.log(
  Array.prototype.reduceRight.call(objetSimilaireTableau, (x, y) => x - y),
);
// -1, soit 4 - 3 - 2

Spécifications

Compatibilité des navigateurs

Voir aussi

• Guide des collections indexées
• L'objet global Array
• La méthode Array.prototype.map()
• La méthode Array.prototype.flat()
• La méthode Array.prototype.flatMap()
• La méthode Array.prototype.reduce()
• La méthode TypedArray.prototype.reduceRight()
• La méthode Object.groupBy()
• La méthode Map.groupBy()
• Prothèse d'émulation de Array.prototype.reduceRight dans core-js ^(angl.)
• Prothèse d'émulation es-shims de Array.prototype.reduceRight ^(angl.)