Sección 3: JavaScript avanzado

Lección 9: Conceptos avanzados de arrays

En esta lección veremos tres importantes métodos que JavaScript nos provee hoy en día para trabajar con arrays: map, filter y reduce.

Comencemos viendo map. Veamos primero un ejemplo:

El método map lo que hará es recorrer todo el array, de manera similar a un forEach, pero en este caso retornará un array en donde cada una de sus posiciones estará multiplicada por 2, de acuerdo al código que se encuentra en el ejemplo.

Vale destacar que es necesario añadir la palabra reservada return cuando se trabaja con el método map.

Si ejecutamos el código, podemos verificar lo antes mencionado:

Si queremos iterar un arreglo y realizar algún tipo de operación sobre cada uno de sus elementos, lo recomendable es usar el método map en lugar del forEach. Debemos tener en cuenta que map posee la restricción de que en cada pasada debe obligatoriamente retornar un valor, el cual almacenerá en la posición correspondiente de un nuevo array, el cual en nuestro ejemplo es mapArray.

En otras palabras, el método map transforma un array. Crea un nuevo array, mientras que forEach no lo hace, al menos de manera automática, ya que si quisiéramos hacerlo, deberíamos crear un nuevo array y añadirle los nuevos elementos a través de su método push.

Una cuestión más antes de pasar al método filter. Cuando tenemos una arrow function (función flecha) con un solo parámetro, podemos evitar escribir los paréntesis que rodean a este parámetro, al igual que si la función contiene una sola sentencia, podemos evitar escribir las llaves. Por lo que podemos hacer lo siguiente:

Vemos que el código luce mucho más prolijo.

Ahora si veamos el método filter. Podemos traducirlo al español como filtrar. Veamos un ejemplo del uso de filter:

Como podemos ver, filter al igual que map crean un nuevo array, pero en este caso el nuevo array estará formado por aquellos elementos que cumplan con la condición, según nuestro ejemplo todos aquellos números mayores a 5.

Podemos colocar cualquier condición queramos, y en caso de que ningún elemento cumpla con esa condición, el nuevo array estará vacío.

Finalmente veamos el método reduce. Este método es muy poderoso. Veamos un ejemplo:

El método recibe dos parámetros: una función y el valor inicial de su acumulador. A su vez, la función recibe también dos parámetros, donde el primero es el acumulador. El nombre de la variable acumulador podría ser cualquier, pero con convención emplearemos este o su nombre en inglés, accumulator.

El acumulador es una variable que nos permite almacenar un valor luego de cada iteración, y el valor de esta variable puede ser empleado y modificado por las sucesivas iteraciones.

Antes de finalizar esta lección, sería bueno compartir un recurso extremadamente útil cuando trabajemos con arrays: https://sdras.github.io/array-explorer/

Bueno, eso fue todo por esta lección.

Nos vemos en la siguiente.

¡Adios!