Ejemplos de forEach en JavaScript

Existen diferentes formas de utilizar el método forEach en JavaScript. Para tener mayor claridad describo los diferente escenarios a continuación:

Ejemplo para iterar sobre un array de números e imprimir cada número en la consola.

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

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

Ahora vamos a iterar sobre un array de objetos y acceder a una propiedad específica de cada objeto.

const personas = [
  { nombre: 'Juan', edad: 25 },
  { nombre: 'María', edad: 30 },
  { nombre: 'Pedro', edad: 40 }
];

personas.forEach((persona) => {
  console.log(persona.nombre);
});

También podemos modificar los elementos de un array utilizando forEach como en el siguiente ejemplo:

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

numeros.forEach((numero) => {
  duplicados.push(numero * 2);
});

console.log(duplicados);

Otra opción tenemos para filtrar elementos de un array utilizando forEach

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

numeros.forEach((numero) => {
  if (numero % 2 !== 0) {
    impares.push(numero);
  }
});

console.log(impares);

Gente, además podemos utilizar forEach en conjunción con un índice para acceder a elementos específicos por ejemplo:

const letras = ['a', 'b', 'c', 'd', 'e'];

letras.forEach((letra, indice) => {
  console.log(`Letra ${indice}: ${letra}`);
});

Para avanzar un poco en nuestro aprendizaje veamos un ejemplos de consumir información de un JSON con forEach.

fetch('ruta_del_archivo_o_la_url_de.json')
  .then(response => response.json())
  .then(data => {
    data.forEach(item => {
      console.log(item);
    });
  })
  .catch(error => {
    console.log('Error al cargar el archivo JSON:', error);
  });

Finalmente si queremos consumir un archivo JSON localmente para hacer un forEach sería de la siguiente manera:

const data = require('./miarchivo.json');

data.forEach(item => {
  console.log(item);
  // Aquí puedes realizar alguna operaciones con los datos obtenidos desde JSON
});

¿Cómo funciona el forEach en JavaScript?

ForEach recorre cada elemento del array y ejecuta una función de devolución de llamada para cada uno de ellos. La función de devolución de llamada se define como un parámetro de forEach y se llama con tres argumentos: el elemento actual, el índice del elemento y el propio array. forEach no devuelve ningún valor y simplemente itera sobre los elementos del array.

¿Cómo se usa forEach?

se usa con la siguiente manera:

array.forEach(function(elemento, indice, array) {
  // Código a ejecutar en cada iteración
});

La función de devolución de llamada puede ser una función anónima o una función definida previamente. Dentro de la función de devolución de llamada, puedes realizar cualquier operación deseada con el elemento actual del array. Puedes acceder al índice y al array completo si los necesitas en tu lógica.

¿Cuándo usar forEach y cuando MAP?

forEach: simplemente itera sobre cada elemento del array y ejecuta una función de devolución de llamada, pero no devuelve ningún valor. Es útil cuando solo necesitas realizar acciones en cada elemento sin preocuparte por crear un nuevo array o transformar los elementos.

Map: por otro lado, también itera sobre cada elemento, pero crea y devuelve un nuevo array con los resultados de la función de devolución de llamada aplicada a cada elemento. Es útil cuando necesitas transformar los elementos del array original y obtener un nuevo array resultante.

¿Cuándo usar forEach y Map?

Utiliza forEach si solo necesitas realizar operaciones en cada elemento del array y no necesitas un nuevo array resultante.
Utiliza map si deseas transformar los elementos del array original y obtener un nuevo array con los resultados de la transformación.

Ejemplo de la diferencia:

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

// Ejemplo con forEach
const duplicadosForEach = [];
numeros.forEach((numero) => {
  duplicadosForEach.push(numero * 2);
});
console.log(duplicadosForEach); 
// Output: [2, 4, 6, 8, 10]

// Ejemplo con map
const duplicadosMap = numeros.map((numero) => {
  return numero * 2;
});
console.log(duplicadosMap); 
// Output: [2, 4, 6, 8, 10]