Hoy voy a explicar cómo funciona Array Map en JavaScript. La función map
es una función que tienen todos los arreglos y permite mapear o convertir un arreglo en otro; es decir, Array Map en JavaScript transforma arreglos.
Voy a explicar cómo funciona map
con algunos ejemplos.
La sintaxis es:
arregloMapeado = arreglo.map(función, argumentoThis);
En donde:
argumentoThis
es a lo que se referirá this
dentro de la función. Casi no se usa, pero es bueno tenerlo en cuentafunción
es la función que va a transformar al arreglo. La misma recibe tres argumentos y me recuerda mucho a forEach: Por cierto, Array Map en JavaScript regresa un nuevo arreglo.
Vamos a comenzar con un ejemplo sencillo. Como lo dije, esta función transforma un arreglo. Por lo tanto veamos el siguiente arreglo:
Es un arreglo de objetos que tienen nombre
y edad
. Vamos a transformar a ese arreglo de manera que tengamos un nuevo arreglo pero únicamente con los nombres, ya no nos importan los objetos.
Definimos la función que lo transforma:
La función recibe una persona
y devuelve la propiedad nombre
. Ahora solo resta invocar a map
con esa función, y asignar el resultado a una nueva variable:
La magia sucede en la línea 1, invocamos a map
con la función regresarNombre
. Por cada elemento que haya en personas
, se invocará a regresarNombre
y el resultado será asignado a un nuevo elemento dentro de nombresDePersonas
.
Si quieres puedes probar el ejemplo aquí.
Si no quedó tan claro, veamos otro ejemplo ahora con simples números. Vamos a obtener un nuevo arreglo cuyo contenido sea la raíz cuadrada de cada número en otro arreglo.
Por ejemplo, si tenemos 25, 100 y 81 ahora deberíamos tener 5, 10 y 9. Definimos el arreglo y la función:
Simplemente estamos regresando lo que devuelve Math.sqrt. Ahora solo mapeamos:
Y la salida se puede ver en el código, o en este enlace.
En el ejemplo de arriba, invocamos a la función regresarCuadrada
, pero ya existe una función que regresa la raíz cuadrada y recibe un número, ¿sabes cuál es? exacto, Math.sqrt
así que el ejemplo anterior bien puede ser escrito así:
Como map
solo necesita la función a la que llamar, podemos pasarle la que ya existe. Si no me crees, prueba el ejemplo aquí.
Aunque parece que así puedes reutilizar funciones, recomiendo crear las tuyas. Es decir, mejor definir una función que regrese la raíz cuadrada (aunque internamente invoque a Math.sqrt) y no usar la que ya existe, esto es porque otras funciones ya existentes pueden tener comportamientos inesperados debido a los argumentos que map
pasa.
Hasta el momento hemos usado funciones con nombre o funciones ya definidas. Sin embargo, también podemos definir funciones anónimas.
Veamos el siguiente ejemplo en donde convertimos un arreglo de números como cadena, a números como enteros:
Lo importante de aquí es la línea 10, en ella invocamos a map
pero definimos la función ahí mismo, sin invocarla antes o después, ni definirla.
Esto es una función anónima y viene bien para cuando vamos a usar map
con una función que no vamos a reutilizar después.
Prueba el ejemplo aquí.
Las arrow functions o funciones flecha no son otra cosa más que las funciones pero de manera simplificada. A la función array map en JavaScript no le importa cómo se haya definido la función, aunque de igual manera veamos un ejemplo de función flecha con map
:
Prueba el ejemplo aquí.
Como ves, no es mucha ciencia, solo cambia un poco la sintaxis. De hecho se puede simplificar todavía más:
Si quieres puedes probar el ejemplo aquí.
Finalmente te invito a ver cómo funciona forEach en JS, o a ver más sobre JavaScript en mi blog.
En mi blog te he enseñado a usar youtube-dl para descargar vídeos con permiso del…
Siguiendo con los tutoriales que consumen la API de los Bots de Telegram con cURL…
En un post previo te enseñé a enviar un mensaje en nombre de un Bot…
En este artículo te voy a mostrar una guía para imprimir en una impresora térmica…
La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…
Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…
Esta web usa cookies.
Ver comentarios
Gracias por tu aporte