La base de la programación funcional es escribir líneas de código utilizando funciones, con el fin de obtener un código más eficiente y recursivo. Para ello, a menudo se utilizan los métodos para manipular elementos de un array, pues nos permiten añadir, reducir, filtrar y modificar sus elementos. En este post, te enseñaremos cómo funciona el método map en JavaScript para transformar los elementos de un array.
¿Qué es el método map en JavaScript?
Al igual que el método forEach, el método map en JavaScript nos permite recorrer los elementos de un array y aplicarles una función a cada uno. La diferencia es que, con el método map en JavaScript, podemos transformar los elementos de este array y obtener de vuelta un listado de elementos nuevos.
Es decir, este método nos da la posibilidad de convertir un array en otro array con el mismo número de elementos, pero diferente contenido. Gracias al nombre de este método, conocemos esta práctica como mapear un array.
¿Cómo funciona el método map en JavaScript?
Para utilizar el método map en JavaScript, basta con insertar un array inicial seguido del método map con la función que deseemos como parámetro. A continuación, te mostramos un ejemplo de esta escritura:
[2, 3, 4].map (val => val * 2)
En el método anterior, insertamos un array con sus valores de manera directa y, después, denominamos que cada uno de esos valores sea val. Entonces, la arrow function escrita hace que, para cada valor que se recorra, su valor se multiplique por dos. Para ello, utilizamos un operador aritmético.
El resultado de este método podría pintarse en la pantalla usando el comando console.log. Entonces, obtendríamos el siguiente array:
[4, 6, 8]
Recuerda que, cuando insertamos una función como parámetro de un método, esta función se vuelve un callback. Te invitamos a repasar este concepto con nuestros posts sobre qué son los callbacks y cómo se utilizan en JavaScript.
El método map en JavaScript nos sirve para recibir un dato nuevo que ha sido transformado con una función arrow function. Ten presente que la forma en la que escribamos nuestra arrow function es indiferente, pues cualquier estilo tendrá efecto.
Otra parte que podemos modificar en este método y, en general, en los métodos que modifican arrays es la palabra que usamos para describir nuestros elementos. Aunque es muy común ver palabras genéricas como val, element o item, también puede ser muy útil ponerle un nombre que se relacione con tu proyecto. Por ejemplo, si estamos recorriendo un array de nombres de equipos deportivos, entonces podríamos usar team para introducir nuestra función.
¿Qué sigue?
Ahora que sabes cómo funciona el método map en JavaScript, te invitamos a ponerlo en práctica en tus propias líneas de código. Para ello, te recomendamos echarle un vistazo a nuestro Desarrollo Web Full Stack Bootamp, en el que no solo seguirás aprendiendo a dominar este y muchos otros lenguajes de programación, sino que también los pondrás en práctica en tus propios proyectos. Así, en pocos meses, conseguirás ser un experto en desarrollo web y destacarás en este ámbito del sector IT. ¡No te pierdas esta gran oportunidad de seguir formándote y matricúlate ahora!
