Recorrer arreglos en JavaScript.

Segunda parte, función reduce();

Emmanuelle Laguna
Jul 23, 2017 · 3 min read

En la primer parte vimos cómo recorrer arreglos mediante la función map() la cual nos permite crear un nuevo arreglo con los valores de retorno de una función callback. Esta funcionalidad cumple con muchos casos de uso, pero a veces no queremos evaluar cada elemento de un arreglo por separado, sino que necesitamos obtener un resultado a travez de la evaluación de los elementos en total. Aquí es donde entra la función reduce(), la cual nos permite evaluar cada elemento de un arreglo en una función y guardar el resultado en un acumulador. Un caso de uso sería sumar todos los valores de un arreglo. A diferencia de map, reduce no devuelve un arreglo con los nuevos valores, sino que devuelve un único valor, que es el acumulador, evaluado por cada elemento del arreglo.

Descripción.

reduce(function(valorAnterior, valorActual, indice, vector), valorInicial)

Esta función acepta 2 parámetros, una función callback y valor inicial, este ultimo es opcional.

_callback() [Funciona en donde se evaluará el arreglo].

  • valorActual [Toma el valor de retorno de la ultima vez que se ejecuto la función, o el valor del parámetro valorInicial].
  • valorAnterior [Contiene el valor del elemento a esta siendo evaluado].
  • indice [Contiene el indice del elemento que esta siendo evaluado].
  • vector [Contiene el arreglo sobre el cual se esta evaluando la función].

valorInicial [Con este valor podemos inicializar nuestro acumulador y si lo omitimos, el acumulador se inicia en cero]

Casos de uso.

Sumar todos los elementos de un arreglo.

Llegó el momento de ver con ejemplos como funciona reduce() y para empezar vamos a hacer un ejemplo sencillo, pero que da cuenta de cómo podemos utilizar esta función. Vamos a obtener el total de la suma de todos los elementos de un arreglo.

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]let acumulador = arr.reduce( (valorAnterior, valorActual) => { return valorAnterior + valorActual } )

Cuando se termine de ejecutar reduce() el valor del acumulador sera 45, ahora veamos el siguiente ejemplo.

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]let acumulador = arr.reduce( (valorAnterior, valorActual) => { return valorAnterior + valorActual }, 10 )

Aquí el acumulador tiene un valor de 55, ya que usamos el parámetro valor inicial.

Reduce al igual que map pertenece a ECMA-262 y al momento de escribir está entrada es compatible con la mayoría de los navegadores pero es recomendable que si vas a usarlo en un ambiente que no soporte este estándar hagas uso de alguna librería externa como babel o que implementes tu propio prototipo de reduce como se muestra a continuación.

if (!Array.prototype.reduce)
{
Array.prototype.reduce = function(fun /*, inicial*/)
{
var longitud = this.length;
if (typeof fun != "function")
throw new TypeError();

// no se devuelve ningún valor si no hay valor inicial y el array está vacío
if (longitud == 0 && arguments.length == 1)
throw new TypeError();

var indice = 0;
if (arguments.length >= 2)
{
var rv = arguments[1];
}
else
{
do
{
if (indice in this)
{
rv = this[indice++];
break;
}

// si el array no contiene valores, no existe valor inicial a devolver
if (++indice >= longitud)
throw new TypeError();
}
while (true);
}

for (; indice < longitud; indice++)
{
if (indice in this)
rv = fun.call(null, rv, this[indice], indice, this);
}

return rv;
};
}

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade