Guía del método forEach() de JavaScript

En esta guía, aprenda todo lo que necesita saber sobre el método forEach() de JavaScript: recorra una matriz, un conjunto o un mapa, sume elementos o sus campos, alcance variable, parámetros opcionales, async/await, cómo salir de un forEach() /for loop así como la diferencia entre forEach() y for.

Introducción

El método forEach() es uno de los muchos que se pueden usar para recorrer el contenido de una matriz y mostrar cada elemento sucesivamente. Tiene las cualidades distintivas que lo diferencian de otras técnicas de iteración sobre arreglos, lo que significa que depende de usted seleccionar qué método emplear en función de lo que está haciendo.

En esta guía, aprenderá cómo usar el método forEach() y cómo funciona usando ejemplos de código reales. También compararemos el método forEach() y el bucle for para que puedas diferenciar entre dos de ellos y saber cuándo elegir uno sobre el otro.

Sintaxis y parámetros

El método forEach() tiene una sintaxis muy sencilla:

1
forEach(callback(currentElement, index, arr), thisValue);

Como parámetro, acepta una función de devolución de llamada y la ejecuta para cada entrada en la matriz. Esta función callback toma tres argumentos: currentElement (obligatorio), su index (el index del currentElement) y la matriz (arr) a la que pertenece el elemento. Finalmente, el parámetro thisValue (opcional) se utilizará como el valor de this en la devolución de llamada.

{.icon aria-hidden=“true”}

Nota: El único parámetro obligatorio es currentElement, que representa el valor de los elementos de la matriz. Los argumentos index y currentElement serán los que más usará.

Cómo usar el método JavaScript forEach()

Echemos un vistazo al método forEach() en acción. Como dijimos antes, puede usarlo para iterar una matriz y aplicar una función de devolución de llamada a cada elemento de esa matriz. En esta sección, explicaremos cómo declarar una función de devolución de llamada adecuada y cómo utilizar cada uno de sus parámetros.

En versiones anteriores de JavaScript, antes de ES6, debe declarar una función de devolución de llamada de la siguiente manera:

1
2
3
4
5
6
7
8
9
const ages = [20, 28, 19, 56];
const newAges = [];

ages.forEach(function (age) {
    newAges.push(age + 5);
});

console.log(newAges); 
// Output: [25, 33, 24, 61]

Alternativamente, podrías definir la función de devolución de llamada en algún lugar fuera del método forEach() y llamarlo usando la siguiente sintaxis:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
const ages = [20, 28, 19, 56];
const newAges = [];

ages.forEach(increaseAgeBy5);

function increaseAgeBy5(age) {
    newAges.push(age + 5);
}

console.log(newAges); 
// Output: [25, 33, 24, 61]

Ambas son formas bastante legibles y claras de usar un método forEach(), pero podemos simplificar aún más la sintaxis. Desde ES6, podemos definir una función de devolución de llamada como una función de flecha:

1
2
3
4
5
6
7
8
9
const ages = [20, 28, 19, 56];
const newAges = [];

ages.forEach((age) => {
    newAges.push(age + 5);
});

console.log(newAges); 
// Output: [25, 33, 24, 61]

O bien, puede reducir la función a solo:

1
2
3
4
5
6
7
const ages = [20, 28, 19, 56];
const newAges = [];

ages.forEach((age) => newAges.push(age + 5));

console.log(newAges); 
// Output: [25, 33, 24, 61]

El parámetro índice

El índice es un parámetro opcional que se puede utilizar para evaluar la posición de un elemento en la matriz original. Por ejemplo, podríamos mostrar tanto la posición como el valor del elemento:

1
2
3
4
5
const courses = ['Biology', 'Mathematics', 'Chemistry', 'Physics'];

courses.forEach(function (course, index) {
    console.log(index + ': ' + course);
});

Esto resulta en:

1
2
3
4
0: Biology
1: Mathematics
2: Chemistry
3: Physics

El parámetro array

El parámetro array hace referencia a la propia matriz original. Es un parámetro opcional que generalmente usará relativamente raramente, ya que ya tiene acceso a cada elemento individual y puede ejecutar operaciones en ellos. Si lo pasamos como un parámetro de console.log(), la matriz completa se imprimirá una vez para cada elemento de la matriz:

1
2
3
4
5
const courses = ['Biology', 'Mathematics', 'Chemistry', 'Physics'];

courses.forEach(function (course, index, array) {
    console.log(array);
});

Esto resulta en:

1
2
3
4
[ 'Biology', 'Mathematics', 'Chemistry', 'Physics' ]
[ 'Biology', 'Mathematics', 'Chemistry', 'Physics' ]
[ 'Biology', 'Mathematics', 'Chemistry', 'Physics' ]
[ 'Biology', 'Mathematics', 'Chemistry', 'Physics' ]

JavaScript común forEach() Ejemplos

Con la introducción fuera del camino, profundicemos en un par de casos de uso comunes del método forEach(). En esta sección, le mostraremos cómo recorrer una matriz de objetos y cómo calcular la suma de todos los elementos en una matriz; sin embargo, puede definir cualquier función de devolución de llamada arbitraria.

Cómo recorrer una matriz de objetos por valor {#cómo recorrer una matriz de objetos por valor}

Indiscutiblemente, el caso de uso más común del método forEach() es imprimir cada elemento (o algunos de sus campos) de una matriz:

1
2
3
4
5
6
7
8
9
const students = [
    { firstName: 'John', lastName: 'Doe' },
    { firstName: 'Stephen', lastName: 'Matt' },
    { firstName: 'Abigail', lastName: 'Susu' },
];

students.forEach((student) => {
    console.log(`${student.firstName} ${student.lastName}`);
});

Esto resulta en:

1
2
3
John Doe
Stephen Matt
Abigail Susu

Cómo sumar los elementos de una matriz o sus campos {#cómosumar los elementos de una matriz o sus campos}

Continuemos explicando cómo podríamos agregar todos los elementos en una matriz y mostrar la suma:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
const students = [
    { firstName: 'John', lastName: 'Doe', tuition: 5000},
    { firstName: 'Stephen', lastName: 'Matt', tuition: 7500 },
    { firstName: 'Abigail', lastName: 'Susu', tuition: 6000 },
];

sum = 0;

students.forEach((student) => {
    sum += student.tuition;
});

console.log(sum); 
// Output: 18500

Método forEach() frente a for Loop

JavaScript nos proporciona un par de formas de iterar sobre los elementos de una matriz, sobre todo el bucle for y el método forEach(). Ambos funcionan de manera similar y, al final del día, son bastante equivalentes en términos de rendimiento. Solo hay un par de diferencias entre ellos, por lo que, para ayudarlo a elegir cuál usar, cubriremos esas diferencias en esta sección.

El alcance de los nombres de variables

El método forEach() tiene un alcance de función: mantiene todos los nombres de variables dentro del alcance de su función de devolución de llamada. Si asigna una variable fuera del método forEach() y la usa dentro del bucle, si hay un conflicto (mismo nombre de variable), se usa la que está dentro de la función de devolución de llamada. Por ejemplo, supongamos que creamos una variable student y le asignamos Joy. Si estuviéramos recorriendo a los estudiantes, cada uno representado como estudiante, tendríamos un conflicto de nombres de variables:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const student = 'Joy';
const students = ['Mark', 'Jane', 'John', 'Sarah'];

students.forEach((student) => {
    console.log(student); 
    // Output: "Mark" "Jane" "John" "Sarah"
});

console.log(student);
// Output: "Joy"

No es una buena práctica usar el mismo nombre de variable varias veces y solo aumenta la confusión, pero vale la pena señalar que forEach() tiene un alcance de función.

Manejo de elementos faltantes

Un bucle for y el método forEach() manejan los elementos faltantes de manera diferente. Supongamos que tenemos una matriz en la que faltan algunos elementos:

1
const students = ['Mark', , 'Jane', 'John', , 'Sarah'];

Echando un vistazo a la matriz de arriba, notará que faltan algunos elementos (una infrecuencia en la matriz students). En primer lugar, recorramos la matriz students con el bucle for para ver cómo maneja los valores faltantes:

1
2
3
4
5
6
7
8
9
const students = ['Mark', , 'Jane', 'John', , 'Sarah'];
const studentsList = [];

for (let i = 0; i < students.length; i++) {
    studentsList.push(students[i]);
}

console.log(studentsList); 
// Output: ["Mark",undefined,"Jane","John",undefined,"Sarah"]

En el fragmento de código anterior, notará que estamos obteniendo un valor “indefinido” en el primer y cuarto índice: “estudiantes [1]” y “estudiantes [4]”. El bucle for trata los elementos que faltan como valores indefinidos.

Ahora, echemos un vistazo a cómo el método forEach() trata los valores faltantes en la matriz students:

1
2
3
4
5
6
7
8
9
const students = ['Mark', , 'Jane', 'John', , 'Sarah'];
const studentsList = [];

students.forEach(function (student) {
    studentsList.push(student);
});

console.log(studentsList); 
// Output: ["Mark","Jane","John","Sarah"]

¡forEach() se salta el espacio de valores perdidos y sigue adelante!

Código limpio y legible

Depende totalmente de usted decidir qué forma de recorrer una matriz proporciona un código más limpio y legible. El método forEach() ciertamente tiene una sintaxis más concisa, por lo tanto, generalmente se considera más apropiado si la legibilidad del código ocupa un lugar destacado en una lista de prioridades.

En esta sección, le daremos fragmentos de código de ejemplo y le permitiremos decidir qué método para hacer un bucle de matrices es más fácil de leer y comprender.

Supongamos que tenemos una matriz de estudiantes. Cada estudiante tiene su nombre y una serie de cursos a los que asiste:

1
2
3
4
const students = [
    { name: 'John', courses: ['Maths', 'English', 'Physics'] },
    { name: 'Sarah', courses: ['Chemistry', 'Maths', 'Computer Science'] },
];

Supongamos que queremos mostrar el nombre de cada estudiante y cada curso al que asiste un estudiante individual.

Podemos lograr eso usando dos bucles for. El primer ciclo itera sobre todos los estudiantes y registra el nombre del estudiante. El segundo itera sobre todos los cursos a los que asiste el estudiante actual y los registra uno por uno:

1
2
3
4
5
6
7
8
9
for (let i = 0; i < students.length; i++) {
    let student = students[i];
    console.log(student);

    for (let k = 0; k < student.courses.length; k++) {
        let subject = student.courses[k];
        console.log(subject);
    }
}

El bucle for requiere que acceda a la matriz usando variables temporales i y k, y luego acceda a cada elemento usando la notación de corchetes. Esto puede parecer complicado y puede agregar mucha confusión a su código, ya que no es fácil de entender en comparación con el método forEach():

1
2
3
4
5
6
students.forEach((student) => {
    console.log(student);
    student.courses.forEach((subject) => {
        console.log(subject);
    });
});

El método forEach() nos ayuda a deshacernos de las variables de contador temporales, lo que hace que el código sea mucho más fácil de leer y comprender. Este método usa una función de “devolución de llamada” y la aplica a cada elemento de la matriz, lo que significa que no necesitamos usar una notación de paréntesis para obtener cada elemento.

Salir de un bucle

Hasta ahora, esencialmente solo hemos resaltado ejemplos a favor del método forEach(). Pero una clara ventaja del bucle for es su capacidad para salir antes de un bucle si es necesario.

Por ejemplo, suponga que desea devolver solo un estudiante llamado Sarah de la matriz students. Debe iterar sobre cada estudiante en la matriz, verificar si su nombre es * Sarah * y salir del ciclo si se encuentra el estudiante.

Podría pensar que puede usar tanto el bucle for como el método forEach() para iterar sobre la matriz students. Pero, de hecho, si intenta usar break dentro del método forEach(), arrojará un SyntaxError.

Por lo tanto, si necesita salir del bucle, probablemente debería usar un bucle for:

1
2
3
4
5
6
7
8
9
const students = ['Mark', 'Jane', 'Sarah', 'John', 'Sarah'];

for (let i = 0; i < students.length; i++) {
    if (students[i].name === 'Sarah') {
        console.log(`>> ${students[i].name} is the most brilliant lady in the class`);
        break;
    }
    console.log(`> Name of the current student is ${students[i]}`);
}

Esto resulta en:

1
2
3
> Name of the current student is Mark
> Name of the current student is Jane
>> Sarah is the most brilliant lady in the class

{.icon aria-hidden=“true”}

Nota: Lo mismo se aplica a volver y continuar. No hay forma de salir de un bucle con el método forEach(), ni siquiera con return o continue.

async/await

El método forEach() no es compatible con las funciones async. Incluso si declara una función async dentro del bloque forEach(), no se comportará como se esperaba. No hay manera de hacer que async/await funcione con el método forEach(). Por lo tanto, si necesita hacer que su código sea compatible con async, ¡use el bucle for en su lugar!

Usando forEach() con otras estructuras de datos

Principalmente, el método forEach() se usa para recorrer una matriz de elementos. Alternativamente, puede recorrer otras estructuras de datos: conjuntos y mapas. En esta sección, veremos un par de ejemplos simples que ilustran cómo recorrer un conjunto y un mapa.

Cómo recorrer un conjunto usando forEach()

Puede iterar a través de los elementos de un conjunto de JavaScript usando el método forEach(). Por ejemplo:

1
2
3
4
5
6
7
const nums = new Set([11, 25, 35, 47, 25, 47]);

nums.forEach(myFunction);

function myFunction(num) {
    console.log(num);
}

Esto resulta en:

1
2
3
4
11
25
35
47

{.icon aria-hidden=“true”}

Nota: Un Conjunto es una colección de elementos que son únicos, es decir, ningún elemento puede repetirse.

Cómo recorrer un mapa usando forEach()

Puede iterar a través de los elementos de un mapa utilizando el método forEach(), accediendo a la clave y al valor de cada entrada, en lugar de la entrada en sí:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
// Declaring map
const map = new Map();

// Inserting key/value pairs
map.set('greeting', 'Hello');
map.set('firstName', 'John');
map.set('lastName', 'Doe');

// Loop through with forEach
map.forEach((value, key) => {
    console.log(`${key} - ${value}`);
});

Esto resulta en:

1
2
3
greeting - Hello
firstName - John
lastName - John

Conclusión

En esta guía, hemos echado un vistazo a cómo funciona el método forEach() de JavaScript y cómo podemos usarlo para recorrer los elementos de una matriz. Hemos echado un vistazo a los argumentos que lo acompañan, como currentElement, index y array que le permiten obtener ciertos elementos de una matriz.

Finalmente, echamos un vistazo a varios ejemplos, cubrimos la diferencia entre el método forEach() y el bucle for, e ilustramos cómo recorrer otras estructuras de datos (conjuntos y mapas) usando forEach( ) método. h( )` método.