Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos

Contenido del curso

Introducción a JavaScript

Estructuras de Control y Lógica

Funciones y This

Manipulación de Arrays

Programación Orientada a Objetos

Asincronía en JavaScript

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:53

Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos

Curso de Fundamentos de JavaScript

Clase 30 de 55

Clase 30 / 55

Recursos

Dominar la iteración sobre arrays es fundamental para cualquier persona que trabaje con JavaScript. Dos métodos destacan por su capacidad de recorrer elementos sin modificar el array original: map y forEach. Aunque ambos ejecutan una función sobre cada elemento, su comportamiento y lo que devuelven es completamente distinto, y entender esa diferencia marca un antes y un después en la forma de escribir código limpio.

¿Cómo funciona el método map en JavaScript?

El método map es uno de los más utilizados en arrays. Su propósito es aplicar una función a cada elemento y construir un nuevo array con los resultados [01:00]. El array original permanece intacto, lo que lo convierte en una herramienta segura cuando no queremos mutar datos.

Por ejemplo, dado un array de números del uno al cinco, se puede elevar cada número al cuadrado:

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

Cada elemento pasa por la arrow function que lo multiplica por sí mismo.
El resultado se almacena en un nuevo array sin alterar el original.
La función recibe como parámetro cada valor de forma individual.

Este patrón es especialmente útil cuando necesitas transformar datos y conservar la referencia original.

¿Qué diferencia a forEach de map?

El método forEach también itera sobre cada elemento y ejecuta una función proporcionada, pero no devuelve un nuevo array [03:28]. Su valor de retorno es undefined. Esto significa que sirve para ejecutar acciones secundarias, como imprimir valores, pero no para generar una nueva colección.

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

El console.log dentro del callback imprime cada color: red, pink, blue.
Sin embargo, la variable iteratedColors queda como indefinido.
El array original tampoco sufre modificación alguna.

La clave está en que forEach ejecuta efectos secundarios, mientras que map produce un resultado almacenable.

¿Cuándo usar map y cuándo forEach en ejercicios prácticos?

¿Cómo convertir temperaturas de Fahrenheit a Celsius con map?

Cuando necesitas un array nuevo con valores transformados, map es la elección correcta [05:15]. En este ejercicio se toman temperaturas en Fahrenheit y se aplica la fórmula (5/9) * (fahrenheit - 32) a cada elemento:

javascript const temperaturasEnFahrenheit = [32, 68, 95, 212]; const temperaturasEnCelsius = temperaturasEnFahrenheit.map( fahrenheit => (5 / 9) * (fahrenheit - 32) ); console.log(temperaturasEnFahrenheit); // [32, 68, 95, 212] console.log(temperaturasEnCelsius); // [0, 20, 35, 100]

Se obtiene un array nuevo con las temperaturas convertidas.
El array original no se muta en ningún momento.
Cada posición del nuevo array corresponde al resultado de aplicar la fórmula sobre la posición equivalente del original.

¿Cómo sumar todos los elementos de un array con forEach?

Cuando el objetivo no es crear un array sino acumular un valor, forEach resulta más adecuado [08:05]. Aquí se calcula la suma de todos los números:

javascript const newNumbers = [1, 2, 3, 4, 5]; let suma = 0; newNumbers.forEach(number => { suma += number; }); console.log(newNumbers); // [1, 2, 3, 4, 5] console.log(suma); // 15

La variable suma se inicializa en cero y se incrementa con cada iteración.
El operador += es un atajo para suma = suma + number.
No se necesita un array de salida, solo un valor acumulado.

La regla general es sencilla: si necesitas un nuevo array transformado, usa map. Si necesitas ejecutar una acción por cada elemento sin generar un array, usa forEach. Cuéntanos en los comentarios si lograste identificar cuál método correspondía a cada ejercicio antes de ver la solución.

Alejandro Guadalupe Sanchez Sanchez

Hace 2 años

Tanto map() como forEach() son métodos que permiten iterar sobre los elementos de un array en JavaScript, pero tienen diferencias importantes en su funcionalidad y propósito. Aquí te explico cada uno y sus diferencias.

1. forEach()

El método forEach() recorre cada elemento de un array y ejecuta una función proporcionada para cada uno de ellos. No devuelve nada y solo sirve para realizar una acción sobre cada elemento (por ejemplo, imprimir, actualizar, etc.).

Ejemplo:

[javascriptCopiar códigolet numbers = [1, 2, 3, 4];

numbers.forEach(function(number) { console.log(number * 2); });

Salida:

Copiar código2 4 6 8

Características de forEach():

No devuelve un nuevo array.
Modifica el array si es necesario o realiza alguna operación en cada elemento, pero no genera un valor de retorno.
No se puede encadenar con otros métodos, ya que no devuelve ningún valor.

2. map()

El método map() también recorre cada elemento del array, pero devuelve un nuevo array con los resultados de aplicar una función a cada uno de sus elementos. Es útil cuando quieres transformar cada elemento en algo nuevo.

Ejemplo:

javascriptCopiar códigolet numbers = [1, 2, 3, 4];

let doubledNumbers = numbers.map(function(number) { return number * 2; });

console.log(doubledNumbers);

Salida:

csharpCopiar código[2, 4, 6, 8]

Características de map():

Devuelve un nuevo array con los resultados de la función aplicada a cada elemento.
No modifica el array original.
Se puede encadenar con otros métodos porque devuelve un array.

Diferencias clave entre map() y forEach():

Retorno: map() devuelve un nuevo array, mientras que forEach() no devuelve nada.
Uso: Usa forEach() cuando solo necesitas ejecutar un bloque de código para cada elemento, pero si necesitas transformar los elementos de un array y devolver un nuevo array, debes usar map().
Encadenamiento: map() se puede encadenar con otros métodos de arrays, pero forEach() no, ya que no devuelve ningún valor.

Ejemplo de comparación:

javascriptCopiar códigolet numbers = [1, 2, 3, 4];

// Con forEach numbers.forEach(function(number) { console.log(number * 2); // Solo imprime los valores multiplicados });

// Con map let doubledNumbers = numbers.map(function(number) { return number * 2; }); console.log(doubledNumbers); // Devuelve un nuevo array con los valores multiplicados

Juan Roberto Adolfo Esquivel Segovia

Hace un año

Me robe tu apunte para mi libreta de notion, muchas gracias que la virgencita de Guadalupe te tenga en su gloria

Comentarios (56)56 comentarios

hernan ismael cuello

Laura Ximena Bermudez Perez

Oliver Fabian Avila Tamayo

Pablo Luna Guzmán

Jorge Miranda Zúñiga

Cristhian Mucun

Emilio Ciappi

Elver David Matacea Lopez

Diego Zazueta

Agustina Corvo

Alejandro Sánchez Yalí

Miguel Angel Osornio

Hace 8 meses•editado

Daniel Vergel

Hace 3 meses

Diego Peraza

Miguel Jonathan Madrigal González

Alexander Bonilla Garcia

Tino Ponce

JOSE MARIA SUAREZ GIESE

Arturo Emiliano Sánchez Romero

Jafeth Jesús Sánchez Sánchez

Gorka Gallardo Castany

Hernán García Urrutia

Hace 3 meses•editado

Santiago Amaya

Hace 10 meses

David Rangel

Introducción a JavaScript

Fundamentos de JavaScript para Principiantes

Instalación y Configuración de JavaScript en Visual Studio Code

Instalación y configuración de Visual Studio Code y Node.js en Windows

Variables y Buenas Prácticas en JavaScript

Tipos de datos primitivos y complejos en JS

Manipulación de Strings en JavaScript: Escritura, Concatenación y Substrings

Números y Operaciones Matemáticas en JavaScript

Conversión de Tipos en JavaScript: Implícita y Explícita

Conversión de Tipos en JavaScript: Explícita e Implícita

Estructuras de Control y Lógica

Operadores de Comparación en JavaScript: Igualdad y Desigualdad

Operadores Lógicos en Programación: AND, OR y NOT

Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript

Juego de Adivinanza: Programación con Estructuras Condicionales

Cómo funciona switch en JavaScript

Ciclo For: Iteración de Listas y Uso de Console.log en JavaScript

Cómo usar for of con arrays en JavaScript

Iteración sobre Objetos con forIn en JavaScript

Uso del ciclo while para iteración en programación

Ciclos doWhile: Estructura y Diferencias con While

Funciones y This

Funciones en JavaScript: Cómo Calcular Precios con Descuentos

Diferencias entre Funciones y Métodos en JavaScript

Funciones Puras e Impuras en Programación: Conceptos y Ejemplos

Arrow functions y lexical binding en JS

Scope chain y contextos en JavaScript

Closures y Ámbito Léxico en JavaScript

Fundamentos del Desarrollo Web: Frontend y Backend

Manipulación de Arrays

Arrays: Propiedades, Acceso y Creación en Programación

Mutabilidad e inmutabilidad en arrays JS

Mutabilidad en arrays con push y pop

Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos

Métodos Filter y Reduce en JavaScript: Uso y Ejemplos Prácticos

Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos

Uso del método slice para extraer porciones de un array en JavaScript

Uso del Spread Operator en JavaScript: Copia, Combinación y Más

Programación Orientada a Objetos

Objetos en JavaScript: propiedades y métodos

Creación y Manipulación de Objetos en JavaScript

Función constructora y gestión de instancias en JavaScript

Clases en JavaScript con sintaxis moderna

Herencia y prototipos en JavaScript

Prototipos y Herencia en JavaScript: Construcción y Uso Práctico

Métodos y herencia prototípica en JavaScript

Uso de "this" en Clases y Funciones Constructoras

Validación de Usuarios en una Red Social: Algoritmo Básico

Cómo el return false dentro del for rompe tu login

Asincronía en JavaScript

Programación Síncrona y Asíncrona en JavaScript

Promesas en JavaScript: estados y métodos

Uso de Async/Await para Promesas Asíncronas en JavaScript

Peticiones asíncronas con for await en JavaScript

Fundamentos de HTTP: Cliente-Servidor y Métodos de Petición

Peticiones HTTP en Frontend: Uso de Fetch y Análisis en Network

Función reutilizable para peticiones fetch

Enviar un POST con Fetch API y formularios

Cómo borrar posts con fetch y delegation pattern

Manejo de IDs en JavaScript para eliminar artículos del DOM

Actualizaciones y Nuevas Funciones en JavaScript

Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos