forEach en JavaScript: Cómo recorrer un arreglo en JS

Artículo original escrito por: Cem Eygi
Artículo original: JavaScript forEach – How to Loop Through an Array in JS
Traducido y adaptado por: Keiler Guardo Herrera

El método forEach de JavaScript es una de las varias formas de recorrer un arreglo. Cada método tiene diferentes características, y depende de ti, dependiendo de lo que estés haciendo, decidir cuál usar.

En este post, vamos a echar un vistazo más de cerca al método forEach de JavaScript.

Teniendo en cuenta que tenemos el siguiente arreglo a continuación:

const numeros = [1, 2, 3, 4, 5];

Utilizando el tradicional "bucle for" para recorrer el arreglo sería así:

for (i = 0; i < numeros.length; i++) {
  console.log(numeros[i]);
} 

¿Qué hace diferente al método forEach( )?

El método forEach también se utiliza para recorrer un arreglo, pero utiliza una función diferente a la del clásico "bucle for".

El método forEach pasa una función callback para cada elemento del arreglo junto con los siguientes parámetros:

• Valor actual (requerido) - El valor del elemento actual del arreglo
• Index (opcional) - El número de índice del elemento actual
• Arreglo (opcional) - El objeto del arreglo al que pertenece el elemento actual

Permítame explicar estos parámetros paso a paso.

En primer lugar, para recorrer un arreglo utilizando el método forEach, se necesita una función callback (o función anónima):

numeros.forEach(function() {
    // código
});

La función se ejecutará para cada elemento del arreglo. Debe tomar al menos un parámetro que represente los elementos del arreglo:

numeros.forEach(function(numero) {
    console.log(numero);
});

Eso es todo lo que tenemos que hacer para recorrer el arreglo:

Como alternativa, puede utilizar la representación de la función de flecha de ES6 para simplificar el código:

numeros.forEach(numero => console.log(numero));

Parámetros opcionales

Index

Bien, ahora continuemos con los parámetros opcionales. El primero es el parámetro "index", que representa el número de índice de cada elemento.

Básicamente, podemos ver el número de índice de un elemento si lo incluimos como segundo parámetro:

numeros.forEach((numero, index) => {
    console.log('Indice: ' + index + ' Valor: ' + numero);
});

Arreglo

El parámetro del arreglo es el propio arreglo. También es opcional y se puede utilizar si es necesario en varias operaciones. En caso contrario, si lo llamamos, simplemente se imprimirá tantas veces como el número de elementos del arreglo:

numeros.forEach((numero, index, arreglo) => {
    console.log(arreglo);
});

Puedes ver el ejemplo de uso del método forEach( ) en este vídeo:

Soporte para navegadores

El método Array.forEach es compatible con todos los navegadores, excepto con la versión 8 o anterior de IE:

Si quieres aprender más sobre desarrollo web, no dudes en visitar el canal de Youtube del autor original de este artículo.

Gracias por leer.