En una publicación previa ya me había referido a unos métodos que consideraba los más comunes para recorrer un array. Por mantener la sencillez tanto de la publicación, como del vídeo relacionado y la infografía, opté por no referirme al método forEach en Javascript.
El método forEach podría decirse que es de los más populares he importantes de Javascript. La utilidad del método forEach es amplia y reemplaza efectivamente los típicos métodos for y while de siempre.
forEach es una gran herramienta que permite utilizar menos líneas de código, facilita un código más legible, más sencillo de entender y replicar.
Video Explicativo método forEach
Código al que hago referencia en el vídeo
Ejemplo básico de como recorrer un Array con el método ForEach
El primer argumento que requiere un forEach() es una función llamada callback, que es la que por medio del forEach va a recorrer cada registro del forEach. El segundo elemento es opcional, es el valor de su conjunto en la devolución de llamada.
array.forEach(callback [, el argumento])A continuación se muestra el código de como trabaja un array, con un arreglo de tres cadenas de texto:
const arreglo = ['rojo','azul','verde'];
function recorrer(registro) {
console.log(registro);
}
arreglo.forEach(recorrer)recorrer es la llamada función callback, arreglo.forEach(recorrer) ejecuta la función recorrer por cada registro del array arreglo. Esa es la forma en que trabaja el forEach.
Parámetro index en el Array
Sabemos que los array tienen un índice que arranca desde cero, la primera posición del índice desde la izquierda hacia la derecha va aumentando.
Hay ocasiones en las que se requiere mostrar el índice, aunque este escenario será más común en los objetos que utilizan llave y valor.
A continuación se muestra un ejemplo de como imprimir los registros de un arreglo y sus índices respectivos.
const arreglo = ['rojo','azul','verde'];
function recorrer(registro,indice) {
console.log(`El registro ${registro} tiene como índice al ${indice});
}
arreglo.forEach(recorrer)En este caso la función callback recorrer, itera tanto con sus registros, como con sus índices respectivos.
Ejemplo de como acceder a un array dentro de la función callback
Existe un tercer parámetro que podemos utilizar con la función callback y es el array mismo que fue llamado, con esta posibilidad podremos realizar operaciones lógicas más complejas.
En el siguiente tramo de código, se va a imprimir un mensaje de que ya se imprimió el último registro cuando esto suceda.
const arreglo = ['rojo','azul','verde'];
function recorrer(registro,indice,arreglo) {
console.log(registro);
if (indice === arreglo.length - 1){
console.log('Ese fue el último registro');
}
}
arreglo.forEach(recorrer);El tercer párametro de la función callback fue el mismo arreglo y con esto, se pudo calcular su tamaño y con eso implementar la lógica para imprimir posterior al último registro.
El uso de this dentro de la función callback
this es un objeto de javascript, que toma el contexto de donde se encuentre para ser utilizado en la lógica de programación, pronto hablaré con mayor profundidad de este objeto, por el momento si deseas saber más sobre this puedes ingresar en el siguiente enlace:
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/this
El this en el siguiente ejemplo se encuentra al alcance del objeto global, por esto da como resultado true al compararlo con este.
De este modo se logra realizar el recorrido del array efectivamente:
const arreglo = ['rojo','azul','verde'];
function recorrer(registro) {
console.log(this === window);
}
arreglo.forEach(recorrer)Conclusión forEach
Debes tener en cuenta que el forEach puede borrar el campo de entrada en la función de devolución. En adición no puedes interrumpir la iteración de forEach. Si requieres terminar el ciclo según algún criterio específico se recomienda utilizar el for o el while.
Cualquier duda quedo al pendiente.
