Cómo usar la funcion array map de javascript

La forma de utilizar estructuras de datos está cambiando gracias a las nuevas funciones introducidas en la versión 6 de JavaScript (ES6).

Una de estas "mejoras" al lenguaje es la función Array.map para manipular los elementos de un array y se está volviendo cada vez más popular entre los desarrolladores JavaScript. Veamos como se usa.

¿Qué hace Array.map?

La función Array.map recorre los elementos de un array uno por uno y construye un nuevo array de nuevos elementos basados en los elementos originales.

Esto es muy útil en situaciones donde necesitamos "transformar" los elementos de un array. Un caso muy común lo encuentras en aplicaciones web cuando tienes que solicitar información y mostrarla como elementos de la interfaz gráfica.

¿Cómo se usa Array.map?

La sintaxis es la siguiente:

let new_array = original_array(callback_function)

Entonces:

• let new_array - El resultado de ejecutar la función map siempre será un array con el mismo número de elementos del array original
• original_array - Este es el array "original" que contiene los elementos que queremos transformar
• callback_function - La función map recibe como argumento una función que recibe cada uno de los elementos originales y devuelve un nuevo elemento como resultado de la "transformación"

La función para transformar los elementos del array tiene la siguiente estructura:

callback_function (elementoActual[, posicion[, array]]) {return <nuevo elemento>}

• elementoActual - Este argumento es prácticamente requerido. Es el elemento original que hay que transformar
• posicion - Es la posición del elemento recibido dentro del array original (no es requerido)
• array - Es el array original sobre el que se ejecuta la función map (no es requerido y lo mejor es no cambiarle nada)
• El valor devuelto por esta función puede ser cualquier cosa que se necesite como resultado de la transformación

Ejemplo de uso de Array.map

Supongamos un ejemplo común: Tenemos un listado de personas que usan nuestra aplicación con datos como el nombre y la fecha de nacimiento, y queremos mostrar la edad actual de cada usuario. Por simplicidad no voy a usar ninguna librería externa de manejo de fechas y solamente voy a tomar en cuenta el año de nacimiento, de ninguna forma este es un ejemplo que se pueda usar en la vida real 🤓.

// el resultado de arrayOriginal.map se almacena en const nuevoArray
const nuevoArray = arrayOriginal.map((original) => { //la funcion recibe cada elemento como el argumento "original"
    const añoActual = new Date().getFullYear() // se obtiene el año actual
    const añoNacimiento = new Date(original.nacimiento).getFullYear() // se calcula el año de nacimiento a partir de la fecha del elemento original
    // devuelve un nuevo objeto con la misma información del nombre y el calculo de la edad
    return {
        nombre: original.nombre,
        edad: añoActual - añoNacimiento
    }
})

Y si ahora inspeccionamos el contenido de nuevoArray encontraremos el mismo número de elementos con la diferencia de que ahora todos tienen una propiedad nueva con el cálculo de la edad de cada usuario.

//nuevoArray
[
    {nombre:  "Hugo",  edad:  35},
    {nombre:  "Paco",  edad:  35},
    {nombre:  "Luis",  edad:  35}
]

Y ahí lo tienes. De esta forma puedes ejecutar la función map() sobre los elementos de un array para modificarlos como lo necesites.

Hasta la próxima 👋.