Iteradores clave de Array en JavaScript: forEach(), map(), filter() y reduce()

En JavaScript, existen varios métodos de bucle para iterar sobre los elementos de un arreglo y realizar diferentes operaciones en ellos. A continuación, te presento los métodos más comunes: forEach(), map(), filter() y reduce().
forEach()
El método forEach() itera sobre los elementos de un arreglo y llama a una función para cada elemento y, a diferencia de los que veremos más adelante, no devuelve un nuevo arreglo. La sintaxis es la siguiente:
array.forEach((currentValue, index, arr) => {
// código a ejecutar
});
donde:
currentValue: El valor actual del elemento.index: El índice actual del elemento.arr: El arreglo que se está iterando.
Aquí hay un ejemplo de cómo usar forEach() para imprimir cada elemento de un arreglo:
const frutas = ["Manzana", "Banana", "Naranja"];
frutas.forEach((fruta) => {
console.log(fruta);
});
// Manzana
// Banana
// Naranja
map()
El método map() itera sobre los elementos de un arreglo y devuelve un nuevo arreglo con los resultados de la función de retorno de llamada. La sintaxis es la siguiente:
const new_array = arr.map((currentValue, index, arr) => {
// código a ejecutar
});
donde:
currentValue: El valor actual del elemento.index: El índice actual del elemento.arr: El arreglo original.
Aquí hay un ejemplo de cómo usar map() para duplicar los valores de un arreglo:
const numeros = [1, 2, 3];
const doblados = numeros.map((numero) => {
return numero * 2;
});
console.log(doblados);
// [2, 4, 6]
filter()
El método filter() itera sobre los elementos de un arreglo y devuelve un nuevo arreglo que contiene sólo los elementos que pasan una función de prueba. La sintaxis es la siguiente:
const new_array = arr.filter((currentValue, index, arr) => {
// código a ejecutar
});
donde:
currentValue: El valor actual del elemento.index: El índice actual del elemento.arr: El arreglo original.
Aquí hay un ejemplo de cómo usar filter() para obtener sólo los números pares de un arreglo:
const numeros = [1, 2, 3, 4, 5, 6];
const numerosPares = numeros.filter((numero) => {
return numero % 2 === 0;
});
console.log(numerosPares);
// [2, 4, 6];
reduce()
El método reduce() itera sobre los elementos de un arreglo y devuelve un único valor que resulta de la función de retorno de llamada. La sintaxis es la siguiente:
const result =
arr.reduce((accumulator, currentValue, index, arr) => {
// código a ejecutar
}, initialValue);
donde:
accumulator: El valor acumulado.currentValue: El valor actual del elemento.index: El índice actual del elemento.arr: El arreglo original.initialValue(opcional): El valor inicial del acumulador.
Aquí hay un ejemplo de cómo usar reduce() para sumar los valores de un arreglo:
const numeros = [1, 2, 3, 4, 5];
const suma = numeros.reduce((acumulador, numero) => {
return acumulador + numero;
}, 0);
console.log(suma);
// 15
Estos métodos son herramientas poderosas para iterar y operar con eficacia en arreglos. Recuerda que, a partir de ES6, se recomienda usar const en lugar de var para declarar variables que no cambiarán su valor. ¡Feliz programación!
Fuentes:
About the author
I'm a tech lead at WOM Chile, I love React, Javascript, Node, Python, Rust & Dart, so let's talk about it!
Comments
Join the discussionNo comments yet. Be the first to comment.
Basics Javascript
En esta serie incluiré todos los aspectos básicos del lenguaje tanto para empezar como confirmar tu conocimiento en Javascript. ¡Disfrútalo!



