JS - Métodos de arrays - reduce e reduceRight

Os métodos que serão vistos hoje possuem como finalidade reduzir os valores do "array" para um único valor, onde todos os elementos são percorridos para podermos realizar algum processamento.

reduce

Reduzir um "array" para um único valor acumulado, esse método não altera o valor original do "array", a função desse método pode ter quatro parâmetros, sendo eles o valor acumulado, o item atual, o índice e o próprio "array". Além da função é possível passar outro parâmetro para o método, que representa o valor inicial para a redução, no exemplo abaixo faremos a redução de um "array" de números e outro de texto:

Exemplo com números

var numeros = [1,2,3,4,5];

var reduceNum = numeros.reduce(function(acumulado, item, index, array) {

  return acumulado + item;

}, 0);

O resultado será 15, pois ocorre uma soma conforme o quadro abaixo:

Iteração	Acumulado	Item	Resultado (novo acumulado)
1	0	1	1
2	1	2	3
3	3	3	6
4	6	4	10
5	10	5	15

Exemplo com texto

var texto = ['T', 'e', 'r', 'e', 's', 'a'];

var reduceTxt = texto.reduce(function(acumulado, item, index, array) {

  return acumulado + item;

}, 'Nome: ');

O resultado será 'Nome: Teresa', pois ocorre uma concatenação conforme o quadro abaixo:

Iteração	Acumulado	Item	Resultado (novo acumulado)
1	'Nome: '	'T'	'Nome: T'
2	'Nome: T'	'e'	'Nome: Te'
3	'Nome: Te'	'r'	'Nome: Ter'
4	'Nome: Ter'	'e'	'Nome: Tere'
5	'Nome: Tere'	's'	'Nome: Teres'
6	'Nome: Teres'	'a'	'Nome: Teresa'

reduceRight

Realiza a mesma coisa que o "reduce", porém sua execução é da direita para a esquerda:

Exemplo com números

var numeros = [1,2,3,4,5];

var reduceNum = numeros.reduceRight(function(acumulado, item, index, array) {

  return acumulado + item;

}, 0);

O resultado será 15, pois segue a mesma ideia do exemplo com números de "reduce" acima:

Exemplo com texto

var texto = ['T', 'e', 'r', 'e', 's', 'a'];

var reduceTxt = texto.reduceRight(function(acumulado, item, index, array) {

  return acumulado + item;

}, 'Nome: ');

O resultado será 'Nome: asereT', pois segue a mesma ideia do exemplo com texto de "reduce" acima, porém a concatenação ocorre da direita para a esquerda: