Método Javascript forEach(): examples, index, map, break continue return

Cuando necesites usar arrays y bucles en JavaScript. Uno de los métodos más utilizados es el método forEach(). En este artículo, veremos ejemplos de uso del método forEach(), los parámetros index y array, en qué se diferencia de otros métodos como map(), y cómo utilizar las palabras clave break continue return.

El método forEach() se implementa no sólo para arrays, sino también para la mayoría de los tipos de datos de JavaScript, como conjuntos y mapas. Esta vez sólo veremos el método para arrays.

1. Conceptos básicos de JavaScript forEach()

1.1. Entendiendo el método Array.prototype.forEach()

El método forEach forma parte del objeto Array.prototype, por lo que está disponible para todas las instancias de array. Este método proporciona una forma legible de recorrer un array y realizar una función especificada en cada elemento. El método forEach() toma como parámetro una función callback, que ejecuta para cada elemento del array.

1.2. Sintaxis básica del método forEach()

La sintaxis básica para usar el método forEach() es simple.

array.forEach(function callback(currentValue[, index[, array]]) {
    // Your code here
})

La función callback toma tres parámetros: el valor actual, el índice y el array. El currentValue representa el elemento actual en el array, el index representa su posición, y el array es una referencia al propio array, Los parámetros index y array son opcionales.

He aquí un ejemplo utilizando el método simple forEach().

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(number => console.log(number));

1.3. Comparado con la sentencia for normal

Comparado con la sentencia tradicional for, el método forEach() proporciona una sintaxis más legible y concisa. También previene errores de desarrollo como iteraciones fuera de índice o valores de array que se modifican, causando errores.

Sin embargo, forEach debe utilizarse con la advertencia de que no proporciona el mismo nivel de control que la sentencia for, especialmente cuando se sale de iteraciones o se saltan iteraciones.

2. Diferencias forEach(), map()

Otros métodos disponibles para iterar sobre matrices en JavaScript incluyen filter(), map(), y reduce(). Estos métodos son más especializados que forEach y están optimizados para casos de uso específicos:

• Map(): convierte un array aplicando una función callback a cada elemento y devuelve un nuevo array con los elementos convertidos.
• Reducir(): reduce los valores de una matriz a un único valor aplicando una función que combina el valor anterior con el valor actual.
• Filter(): Crea un nuevo array, manteniendo sólo aquellos elementos que cumplen una condición especificada.

Ten en cuenta que el método map() devuelve una nueva matriz, mientras que el método forEach() siempre devuelve undefined.

Para más información sobre los otros métodos de array, consulta sus respectivos artículos.

3. Palabras clave break, continue, return en el método forEach()

La premisa básica del método forEach() basado en programación funcional es recorrer todos los elementos del array. Como resultado, no soporta el uso de las palabras clave break y continue para pausar o reanudar el recorrido.

Sin embargo, puede utilizar la palabra clave return para sustituir a la palabra clave break.

En el siguiente ejemplo, cuando el valor del elemento es 3, puede ver que la palabra clave return se utiliza para pasar al siguiente elemento.

const array = [1, 2, 3, 4, 5];
 
array.forEach((element) => {
  if (element === 3) {
    return; // Skips the current iteration
  }
 
  console.log(element);
});

4. Ejemplos de uso de forEach()

4.1. Limpieza y formateo de datos

El método JavaScript forEach() puede ser útil para limpiar y formatear datos antes de procesarlos o mostrarlos. Por ejemplo, supongamos que tenemos un array de objetos de usuario con nombres entre mayúsculas y minúsculas.

Puedes utilizar el método forEach() para estandarizar las mayúsculas y minúsculas:

const users = [
    { id: 1, name: "ALICE" },
    { id: 2, name: "BOb" },
    { id: 3, name: "Charlie" }
];
 
users.forEach((user) => {
    user.name =
    user.name.charAt(0).toUpperCase() + user.name.slice(1).toLowerCase();
});
 
console.log(users);
 
// Output:
// [
//   { id: 1, name: 'Alice' },
//   { id: 2, name: 'Bob' },
//   { id: 3, name: 'Charlie' }
// ]

En este ejemplo, el método forEach() itera sobre la matriz users, cambiando el nombre de cada usuario a la mayúscula apropiada. Este tipo de organización de datos ayuda a garantizar la coherencia en toda la aplicación, haciendo que los datos sean más fáciles de ver y manipular.

4.2. Manipulación del DOM

El método forEach() facilita la iteración sobre HTMLCCollections para manipular elementos del DOM. Por ejemplo, puedes querer añadir una clase a todos los elementos con un nombre de clase en particular:

const elements = document.getElementsByClassName("target");
 
Array.prototype.forEach.call(elements, (element) => {
    element.classList.add("new-class");
});

También se puede utilizar para cambiar las propiedades o el contenido de los elementos DOM. Por ejemplo, si quisieras cambiar el atributo src de todos los elementos image con un determinado nombre de clase, podrías hacer algo así

const images = document.querySelectorAll(".image-class");
 
images.forEach((image) => {
    image.src = "new-image-source.jpg";
});

4.3. Encadenando forEach con otros métodos de array

Puedes concatenar el método forEach() con otros métodos de array para crear un código más potente y legible. Por ejemplo, supongamos que tenemos un array de pedidos y queremos calcular los ingresos totales de los pedidos de un determinado producto:

const orders = [
    { id: 1, product: "A", price: 10, quantity: 2 },
    { id: 2, product: "B", price: 20, quantity: 1 },
    { id: 3, product: "A", price: 10, quantity: 3 },
    { id: 4, product: "C", price: 30, quantity: 1 }
];
 
const targetProduct = "A";
 
const totalRevenue = orders
    .filter((order) => order.product === targetProduct)
    .map((order) => order.price * order.quantity)
    .reduce((acc, curr) => acc + curr, 0);
 
console.log(totalRevenue);

En este ejemplo, primero filtramos el array de pedidos para quedarnos sólo con los pedidos que contienen el producto objetivo. A continuación, utiliza el método map para calcular los ingresos de cada pedido filtrado. Por último, acumula los ingresos totales utilizando el método reduce. Este enfoque de encadenamiento resulta en un código más legible y funcional, lo que hace que el código sea más fácil de entender y mantener.

5. Uso de parámetros de índice y array en funciones callback

La función callback del método forEach() proporciona referencias para acceder no sólo al valor actual, sino también a cada índice y al propio array. Esto te permite definir una función callback más flexible.

const numbers = [10, 20, 30, 40, 50];
 
numbers.forEach((number, index, array) => {
    console.log(`Index: ${index}, Number: ${number}, Array: ${array}`);
});
 
// Output:
// Index: 0, Number: 10, Array: 10,20,30,40,50
// Index: 1, Number: 20, Array: 10,20,30,40,50
// Index: 2, Number: 30, Array: 10,20,30,40,50
// Index: 3, Number: 40, Array: 10,20,30,40,50
// Index: 4, Number: 50, Array: 10,20,30,40,50

6. Implementación de un método forEach personalizado

En algunos casos, es posible que desee ampliar la funcionalidad de forEach para satisfacer sus necesidades. Por ejemplo, puedes querer crear una función forEach personalizada para salir rápidamente del bucle, como una sentencia break de una sentencia for, o para proporcionar parámetros adicionales a una función callback.

Para crear una función forEach personalizada, puedes utilizar una sentencia for y pasarle los parámetros que quieras. Este es un ejemplo de una función forEach personalizada con una función break:

function customForEach(array, callback) {
    for (let i = 0; i < array.length; i++) {
        const result = callback(array[i], i, array);
        if (result === false)
            break;
    }
}
 
const numbers = [1, 2, 3, 4, 5];
 
customForEach(numbers, (number) => {
    if (number > 3) return false; // "break" when number > 3
        console.log(number);
});
 
// Output:
// 1
// 2
// 3

7. Conclusión

En este artículo, hemos cubierto un ejemplo de uso del método forEach(), en qué se diferencia de otros métodos como index, array parameters, map(), el uso de las palabras clave break, continue, return, etc.

Al comprender los puntos fuertes y las limitaciones del método forEach(), que te permite escribir un código más limpio y eficiente, estarás mejor equipado para enfrentarte a una gran variedad de retos de desarrollo web. Te animo a seguir explorando forEach() y otros métodos de array para mejorar tus habilidades en JavaScript y crear aplicaciones web más efectivas y atractivas.