Te ayudamos a dominar el manejo de Strings y Arrays usando los métodos adecuados de #JavaScript. Aprende a manipular los elementos de cualquier estructura de datos con fluidez creando código más legible y mantenible. ¿Quieres escribir un código más eficiente? 📝👀 ¡Los detalles aquí!
Método .map() en JavaScript
En JavaScript, .map() es un método inmutable que nos permite crear un nuevo array a partir de uno original.
Map recorre cada elemento del array original, lo transforma usando un callback definido y agrega el resultado al nuevo array 🙆🏻♀️
Esencialmente, convierte un array en otro totalmente nuevo transformando cada uno de sus elementos. Tendrá la misma longitud que el original, pero, con elementos modificados.
Método .forEach() JavaScript
En JavaScript, .forEach() es un método para recorrer los arrays que se creó buscando evitar el uso de ciclos anidados for, y al igual que .map(), también puede ejecutar una función callback para cada elemento con la diferencia de:
.foreach() no crea un nuevo array, sino que modifica el original.
¿Cómo funcionan .foreach() y .map() en JavaScript?
Esta es una Analogía de Star Wars jajaja bueno, imagina que tienes un ejército de padawans, en el array original, que deben ser Jedis.
👉🏻 Como maestro Jedi puedes usar .foreach() o .map() para tomar a cada padawan (recorrer a cada elemento del array original) e incrementar sus habilidades y asignarles a cada uno los sables de luz por medio de una técnica especificada dentro de la función callback. Y al final del training, obtendrías a tu nuevo ejército Jedi listo para la acción (en un nuevo array en el caso de map) 🌌🔫🤖.
Sintaxis y parámetros de .map() y .foreach() en JavaScript
const newArray = arrayOriginal.map((elemento, indice, array) => {
// Función callback que transformará cada elemento
return elementoTransformado;
});
arrayOriginal.forEach((elemento, indice, array) => {
// Función callback que se ejecuta para cada elemento
});
elemento: El elemento actual del array que se está recorriendo.
indice: El índice / posición del elemento actual en el array.
Array: El array original que se está recorriendo.¿Cuándo usar .foreach() y .map() JavaScript?
Ejemplo del mismo ejercicio resuelto con map y foreach en JavaScript
const numeros = [1, 2, 3, 4, 5];Calcular la suma de los cuadrados de los elementos del Array. ¿Cuál método usarías? ¿y por qué funcionan los dos?
Solución con .forEach():
const sumarCuadrados = 0;
numeros.forEach(function(numero) {
sumarCuadrados += numero * numero;
});
console.log(sumarCuadrados); // 55Solución con .map():
const cuadrados = numeros.map(function(numero) {
return numero * numero;
});
const sumarCuadrados = cuadrados.reduce((a, b) => a + b, 0);
console.log(`Suma de cuadrados: ${sumaCuadrados}`); // 55
// Se usa .reduce() para sumar los elementos del array 'cuadrados'.Si te das cuenta, tanto map como foreach son útiles para los arrays en JavaScript, obvio escoger entre uno u otro depende... Pero ya sabes que Map es ideal para crear nuevos arrays a partir del original y foreach para recorrer un array y ejecutar cada elemento.
¿Viste que es fácil? Otra duda que suele surgir es si son eficientes:
¿Usar los métodos .map() y .foreach() es eficiente en JavaScript?
Los métodos .map() y .foreach() tienen una Complejidad O(n) en BigO Notation, es decir, su rendimiento es lineal, donde n es la cantidad de elementos o longitud del array original lo que lo hace ideal para trabajar con arrays grandes.
👾Usar .map() y .foreach() puede optimizar tu código al ahorrarte el uso de bucles for tradicionales y código redundante.
Ya sabes ¿Dónde Practicar Algoritmos en línea?
Este TOP 5, publicado también en nuestras redes sociales (que por cierto, ¡síguenos! sacamos tips devs cada semana) recopila las mejores plataformas para practicar algoritmos, con opción gratuita, path de estudios y algunas en español ¡dale click! 👌🏻
¡Gracias por leer!
📍 Conéctate con nosotros en instagram👇