Hola a todos, hoy voy a explicar como usar dos de las funciones más geniales para trabajar con operar con arrayis en JavaScript: reduce y map. Así que vamos ya manos a la obra con los ejemplos.

Array.prototype.map (callback [, thisArg])

Map es una función que nos permite crear un nuevo array como resultado de operar con los elementos de otro array existente. El array resultante tendrá la misma longitud que el array original usado.

La función callback tiene tres argumentos:

• El elemento actual del array.
• El índice actual que se está recorriendo del array.
• El array original que estamos usando como entrada.

Puedes usar thisArg para indicar que objeto será accedido al usar this en la función de callback.

Una vez sabemos esto podemos escribir un breve ejemplo:

var arr = [{a:5, b:2}, {a:7, b:1}, {a:2, b:7}, {a:12, b:6}];

var restas = arr.map(function( element, index, array) {
     return element.a - element.b;
});

console.log(restas); // Mostrará un array que contiene [3, 6, -5, 6]

Como puedes ver el array resultante tiene la misma longitud que el primero que hemos usado y sus valores corresponden al valor devuelto por la función callback. ¡Muy fácil de usar y además útil! Y además mucho más cómodo de leer que un bucle.

Array.prototype.reduce(callback [, initValue])

Reduce es una función que nos permite crear un nuevo valor como resultado de operar con los elementos de un array.

La función callback tiene 4 argumentos:

• Elemento anterior
• Elemento actual
• El índice actual que estamos recorriendo en el array
• El array de entrada completo

Puedes usar el argumento initValue para indicar cual será el primer valor del atributo del callback Element anterior, en este caso el atributo Elemento actual tomará el valor del primer elemento del array recorrido. En el caso de que no se haya inicializado con ningún valor, se usará el primer elemento del array como elemento previo y se empezará recorriendo el segundo elemento en Elemento actual. El atributo Elemento anterior tomará a partir de la segunda iteración el valor devuelto en el callback. El resultado de reduce puede ser una variable que desees: una cadena, un número, un array, un objeto… ¡Tú decides!

Veamos un ejemplo. esta vez generaremos un objeto que cuenta las veces que aparece cada caracter en una cadena:

var str = "Hello, this is just a reduce test!";
var strArr = str.split("");

var charCount = strArr.reduce(function( valorAnterior, valorActual, index, array) {
    if(valorAnterior[valorActual]){ 
      valorAnterior[valorActual]++; //Si el valor actual ha aparecido en iteraciones anteriores simplemente incrementamos su valor en nuestro objeto
    } else { previousValue[actualValue] = 1; // Si no ha aparecido, inicializamos la cuenta de ese caracter con 1
}
    return valorAnterior; //Devolvemos valorAnterior para usarlo de nuevo como valorAnterior en la siguiente iteración
}, {});  //Usamos un objeto vacío como primer valorAnterior 

console.log(charCount); // En la consola se mostrará algo lo siguiente: "Object { H: 1, e: 4, l: 2, o: 1, ,: 1,  : 6, t: 4, h: 1, i: 2, s: 4, 7 more… }"

What a magic experience!

With this short post I hope you have understood correctly how this great functions work and now it only depends on what you do and how you use it in your awesome applications.

See you in future posts!