Los métodos de JavaScript son funciones que pertenecen a un objeto en específico. Por ello, son una parte muy importante en la programación funcional, que se basa en utilizar funciones para crear un código más eficiente y automático. En este post, te enseñaremos qué es y cómo se utiliza el método forEach en JavaScript para manipular el contenido de un array.
¿Los arrays tienen métodos?
En nuestro post sobre los objetos de JavaScript te hemos introducido a la idea de que prácticamente todo elemento en este lenguaje de programación actúa como un objeto, pues es parte de la cadena de prototipos y tiene funciones que lo acompañan. Por ello, los arrays, también conocidos como listas de elementos, tienen métodos. Estos métodos son muy útiles a la hora de recorrer, añadir, filtrar y modificar sus elementos.
Si quieres saber más sobre cómo funcionan los métodos de un array, te invitamos a leer nuestro post sobre los arrays y la programación funcional. A continuación, te explicaremos cómo funciona uno de ellos: el método forEach en JavaScript.
¿Cómo funciona el método forEach en JavaScript?
Al igual que los demás métodos que podemos ejecutar para un array, sobre los que puedes leer en este post de Vincent Will, el método forEach nos permite ejecutar una acción para todos los elementos que componen nuestra lista o array.
Entonces, ¿qué hace el método forEach en JavaScript? Pues este método nos dice que, dado un array cualquiera, aplicamos el método e insertamos una función. La función que se inserte se ejecutará una vez para cada uno de los elementos de nuestro array. A continuación, te mostramos un ejemplo:
[1, 2, 3].forEach(val => console.log(val))
Lo que estamos ejecutando en el método anterior es que, dado el array que contiene los elementos 1, 2 y 3, creamos una función que pinta cada uno de estos valores. Esta es una manera de recorrer los elementos de un array de una forma funcional, en vez de utilizar un bucle for. La diferencia entre estas dos opciones es que el bucle for nos permite detener la repetición con el comando break. En un forEach no tenemos control sobre el recorrido.
Ten presente que, cuando insertamos una función como el parámetro de un método, estamos entrando en el territorio de los callback. Si no conoces nada sobre este territorio o simplemente quieres un repaso, te invitamos a leer nuestros posts sobre qué son los callback y cómo utilizarlos en JavaScript.
Dentro de nuestro callback, debemos definir un arrow function que nos diga que para cada elemento o valor se creará determinada función. La forma en la que escribas esta función es indiferente, pero nosotros lo hemos hecho con el símbolo =>. Te presentamos otro ejemplo en las siguientes líneas de código:
const array1 = [‘a’, ‘b’, ‘c’];
array1.forEach (element => console.log (element.toUpperCase()));
Lo que hace la función anterior es, dado el array 1 que llamamos justo antes del método, se aplicará una función en la que cada uno de sus elementos se pinta en mayúsculas. Como ves, podemos denominar el elemento con cualquier palabra que deseemos. En estos casos hemos usado element o val, pero tu puedes elegir la que más se ajuste a tu proyecto.
En este caso, la función hace que cada elemento se pinte en mayúsculas usando el comando console.log y el método object.toUpperCase. Entonces, el resultado de este código serán las siguientes líneas de código:
>’A’
>’B’
>’C’
Algo que debemos tener muy en cuenta a la hora de utilizar el método forEach en JavaScript es que este no devuelve ningún valor. Por lo tanto, si, por ejemplo, tenemos la siguiente constante igualada a un método forEach, no obtendremos ningún valor:
const array2 = array1.forEach (element => console.log (element.toUpperCase()));
Al pintar esta constante usando el comando console.log (array2) obtendremos un resultado undefined, pues este método no nos devuelve valores nunca.
Ahora que sabes cómo funciona el método forEach en JavaScript, te invitamos a que des el siguiente paso en tu camino hacia dominar este lenguaje de programación con el Desarrollo Web Full Stack Bootcamp. En esta formación intensiva, también aprenderás a dominar otros lenguajes de programación, como CSS y HTML, para que en unos pocos meses te conviertas en un experto del desarrollo web. ¿A qué esperas para ir un paso más allá e inscribirte? ¡Hazlo ya!
