Iteración con map() y forEach()

Clase 54 de 80Curso de JavaScript Desde Cero

Contenido del curso

Primeros Pasos

Funciones y This

Resumen

¿Qué son los métodos .map() y .forEach() en JavaScript?

En el mundo de la programación, conocer los métodos de iteración de arrays en JavaScript es esencial para escribir código limpio y eficiente. En esta ocasión, exploramos los métodos .map() y .forEach(), herramientas poderosas que te permiten manipular y recorrer arrays sin alterar el array original. Mientras que .map() está diseñado para generar un nuevo array basado en el procesamiento de cada elemento, .forEach() ejecuta una función proporcionada pero sin generar un nuevo array. Descubramos cómo funcionan estos métodos con ejemplos prácticos.

¿Cómo se utiliza .map()?

El método .map() es altamente utilizado en JavaScript para procesar cada elemento de un array y generar un nuevo array con los resultados. Su sintaxis simplificada y funcionalidad robusta lo convierten en una opción frecuente para transformar datos con facilidad.

const numbers = [1, 2, 3, 4, 5]; const squaredNumbers = numbers.map(num => num * num); console.log(numbers); // Output: [1, 2, 3, 4, 5] console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25]

En este ejemplo, los números del array se elevan al cuadrado, resultando en un nuevo array squaredNumbers sin modificar el original.

¿Cómo implementamos .forEach()?

El método .forEach(), por otro lado, es ideal para ejecutar funciones en cada elemento de un array sin preocuparse por el retorno de un nuevo array. Este método es útil cuando deseas realizar alguna acción basada en los elementos del array, pero no necesitas un nuevo conjunto de resultados.

const colors = ['red', 'pink', 'blue']; colors.forEach(color => console.log(color)); // Output: red pink blue

Aquí, cada color se imprime en la consola. Aunque la ejecución es visible, .forEach() simplemente itera sin devolver un array nuevo.

Aplicaciones prácticas de .map() y .forEach()

Conversión de temperaturas de Fahrenheit a Celsius

Supongamos que necesitamos convertir un conjunto de temperaturas de Fahrenheit a Celsius. Usamos .map() para aplicar la fórmula de conversión a cada elemento del array.

const fahrenheitTemps = [32, 68, 95, 212]; const celsiusTemps = fahrenheitTemps.map(fahrenheit => (5 / 9) * (fahrenheit - 32)); console.log(fahrenheitTemps); // Output: [32, 68, 95, 212] console.log(celsiusTemps); // Output: [0, 20, 35, 100]

Usamos .map() ya que queremos un nuevo array con las temperaturas convertidas a Celsius.

Suma de elementos en un array

Para sumar todos los elementos dentro de un array, podemos utilizar .forEach() para acumular los valores sin crear un nuevo array.

const numbers = [1, 2, 3, 4, 5]; let sum = 0; numbers.forEach(number => sum += number); console.log(`Array of numbers: [${numbers}]`); // Output: [1, 2, 3, 4, 5] console.log(`Sum of numbers: ${sum}`); // Output: 15

Aquí utilizamos .forEach() para recorrer el array y calcular la suma total de sus elementos.

Reflexiones sobre el uso adecuado de .map() y .forEach()

Comprender cuándo utilizar .map() o .forEach() puede optimizar tu código y ahorrar tiempo de ejecución:

  • Usa .map() cuando planees obtener un nuevo array derivado del original.
  • Emplea .forEach() para realizar acciones o cambios sobre el elemento actual sin la necesidad de un nuevo array.

¡Ahora que conoces estas herramientas, te animamos a probarlas en tus propios proyectos! La mejor forma de aprender es aplicando, así que no dudes en experimentar y compartir tus experiencias.