Programación funcional en JavaScript, parte 2: Array Map 

Llegué a tu canal por casualidad (algoritmo de youtube), y me he llevado una grata sorpresa por tu contenido, y compré tu curso de Javascript. Intento cambiar de rubro, soy sysadmin (trabajo de mier..). Un abrazo.

es la primera vez que te veo. pero creo que ya se quien será el youtuber programador que me acompañara en el estudio.

Me gustan mucho los métodos de JavaScript para iteraciones , son muy útiles para armar componentes en React y para manipular conjuntos de datos. Buena explicación bro.

Estos videos valen oro! const ty = 'Gracias! ' const agradecer = () => console.log(ty.repeat(1000)); agradecer();

Increible vi este video hace mucho y no lo entendia por que no tenia las baces de Javascript, ahora si que lo entiendo muchas gracias

Muy bien explicado, años trabajando en educación tecnológica y nunca vi a alguien tan didáctico, te merecés lo mejor man!

Excelente vídeo, super clara la explicación muchas gracias

Vikingo super este video!!! Super mega bien explicado...

No queda más que agradecer! Muy buenos vídeos!

Muy buen aporte la verdad, muchas gracias, saludos desde Argentina

Eres el mejor enseñando, me encantan tus videos 🙏🏻

Muchas pero muchas gracias por tan buenos ejemplos y claridad.

Buenísimo, bien explicado. Saludos desde México

Gracias por explicarlo de forma tan clara 🤗

excelente video .... no me pierdo tus videos, eres inspirador

Excelentes estos videos muchas gracias Nico!

Esta función me encanta. La uso muy a menudo

Acabo de comprar tu curso de ES9, HTML, CSS3 y NodeJS desde cero. Un abrazo desde Welly!

Excelente vídeo gracias.

gracias gracias!! muy práctico!

buen vídeo! y muy bien explicado gracias

sos el mejor enseñando man en 0, enseñaste este tema tan importante en javascript

me gusto la explicacion voy a tomar sus videos para capacitarme

Que buena explicacion ahora ya entiendo mas de map

Genial. Saludos desde Madrid

Excelente tema y lo explicas de manera muy didáctica like. Por cierto ¿que plugin usas para alumbrar de esa forma tu codigo ?

sos un kapo. Saludos desde Argentina

Hace muy poco decidí adentrarme al mundo del desarrollo web, estudiando HTML css y java como primera etapa, haciendo cosas con arrays y hacer diseños con css y toda el rollo puedo decir que me está gustando está wea xD. Gracias por el vídeo.

Muy bueno, gracias maestro

muchas gracias Nicolas , por la explicación, he revisados tus cursos, pero no encuentro algo relacionado con js algoritmos, algo asi para coding interview, creo que de tener un curso así sería de muy buena calidad, saludos :D

Muy bien explicado

Con el debido respeto profesor pero usted es un master! saludos desde santiago!

hola buen video gracias por compartir tu conocimiento

Nueva suscriptora :) Muchas gracias por la explciaciòn

Gracias!

Gracias, espero la parte 3. Saludos!

Excelente como explicas brother, suelo usar esas funciones a menudo aunque hay unas semejancias , ejemplo en el ultimo ejemplo se pudo haber usado la funcion Filter para sacar el promedio no? otra cosa dentro de la funcion de map se pudo haber hecho la operacion directa para arrojar el promedio tambien? estoy casi seguro de que si , pero queria saber si seria una buena practica desde tu punto de vista. Saludos

Cuando ejecuto una funcion tipo map y le paso un objeto, al momento de llavar al argumento. algo para ver sus propiedades no me muestra las opciones disponibles, hay alguna forma de habilitar esto en vscode?

Simple y claro, lo suficientemente lento como para quienes no conocemos la función podamos aprender

gracias!!!

Gracias Master

Hermoso javascript 🙂

Buen cherry blue, mejor explicacion.

Un expectaculo!

Crack genial 👍

Genial!

Esta Intro!!! esta quiero en los nuevos videos

Bueeena! Podrias explicar para mas adelante en otro video algunas mezclas de funciones usando chain, tipo array.map().filter().length

Gracias, capo.

Excelente! Oye amigo hay o puedes hacer un ejemplo de arreglos con promesas! Saludos!

gracias a este tipo de videos es cuando me aportabas realmente contenido, hoy en dia los videos que haces son solo tu hablando de lo que haces, y de lo genial que es tu vida como desarrollador en el extrangero y esto y aquello, todo al estilo vlog, una pena

Hola Nicolás. Una pregunta. Si tengo un array idéntico al array de mascotas que presentas en el video. Existe modo de aplicarle el método indexOf para hayar el índice de uno de sus objetos?. De modo alternativo, he creado un nuevo array con .map, usando uno de los datos de cada objeto y con ello puedo asemejar los indices de ambos arrays . Pero, sería esta la mejor manera o existe una forma de leer parte del objeto original con indexOf? Espero dejarme entender. Muchas gracias. const usersList = user.map( x => x.userName ); // "user" es el array original, de usuarios, similar al array mascotas const usersIndex = usersList.indexOf('Nombre Usuario');

Maravillosox2

El arreglo nuevo creado por map puede ser ordenado (ej: por nombre) ?, pero cuando utilice el .map lo hice con la variable "id" del array original.

Hola Nico, hay alguna posibilidad de que el keyword suma ya no esté disponible ?? No me funciona la suma ni en la consola del navegador ni en páginas web de consolas. Gracias por los videos!!

que video más bueno

En este video muestras como con map puedo enviar pares de un elemento como un arreglo, hay una forma de enviar un objeto en vez de un arreglo? Gracias por el video!

Acabo de salir de una, gracias

grande nicooooo

excelente video de como usar map, pero justo estoy viendo el método y su inmutabilidad pero al momento de utilizar de cierta manera map este puede mutar los objetos , que la copia pude alterar el objeto original y es algo que no me queda claro como si es inmutable ., saludos

Para esa suma es mejor usar la función reduce

buena Nico

Implemente el mismo ejemplo pero con el método reduce para obtener el total de edades y funciono bien. Estaba leyendo que map incluso toma datos vacíos, mantiene la misma cantidad de datos del array original y los datos vacíos los muestra como empty, de que modo uno podría limpiar el array y quedarse o tomar solo los datos que tengan un valor. Supongamos que los objetos edad en algun lado estan empty, si repito la operación me da NaN (no es un numero). Probe con let obtenerDatos = mascotas.map (dato => dato.edad != empty); pero da error. También estoy probando con una cadena de texto como tipo y lo que logre es filtrar dato.tipo.length > 0, con lo que obtengo true o false pero no los datos que quiero. Estoy trabado aqui, si me tiras una soga te lo agradezco. Saludos compañero.

Buen día Nicolas, te cuento que también soy instructor de youtube pero enseño diseño 3d nada que ver, sin embargo siempre me intereso la programación pero llego a un punto donde no se como avanzar, te puedo hacer una pregunta a la cual no le encuentro respuesta, hace tiempo que veo videos de youtube de todo mundo y estudio, incluso realice un par de cursos en linkedin sobre JavaScript y los pase sin mayor problema, ahora estoy viendo w3schools y voy viendo y tomando nota de cada ejemplo y de todo lo que es posible. Y lo entiendo, entiendo el código y las explicaciones (eso esta bueno), sin embargo es tanta la información que mi cabeza parece que explotara y me es imposible retener que hace cada método, como, etc. y para cuando termino de ver a fondo arrays ya no recuerdo arrow function o como implementar una función anónima, etc. Obvio si miro mis apuntes me doy cuenta enseguida. El tema es que si alguien me plantea un problema, como no tengo presente en memoria las opciones de programación para resolverlo no lo puedo hacer, pero cuando veo la solución al problema me digo que pavada como no me di cuenta…. Creo que esto a de ser normal e imagino que le paso a todo mundo al comenzar y también creo que es el punto de inflexión por el cual muchos abandonan. Mi pregunta es como se hace a estudiar, o como se hace a lograr eventualmente poder incorporar esa información en memoria. Tengo que estudiar de memoria, tengo que terminar el curso y volver a verlo 100 veces hasta que se me grabe, o que hay que hacer, como se incorpora tanta información. Esto creo que nadie lo explica en ningún lado, cual es el MÉTODO de estudio, como se debe estudiar programación para eventualmente poder resolver un problema teniendo presente las herramientas, métodos y procedimientos. Como hiciste tu cuando no sabias nada o casi nada para eventualmente ante un problema poder decir para esto utilizare primero A, luego C, de eso me quedo con H y multiplicando X con el método tal me dará Z. Para lograr ese entendimiento tienes que tener en memoria lo que hace cada letra, lo que debes pesarle y lo que te dará. De otro modo no lo puedes hilar en tu cerebro para resolverlo, por lo menos es lo que a mi me pasa. Espero haber sido claro y que me puedas dar una mano. Un gran abrazo a la distancia y perdona el atrevimiento.

MAS CLARO QUE EL AGUA PAPA

hola, gracias por compartir conocimiento, tengo una consulta, mencionas que la función suma no debería implementarse como lo muestran en tu vídeo, cómo sería una mejor manera? gracias por tu respuesta

no inventes estaba atorado con un ejercicio de callback en el que tenia que usar .map y ya llevaba como 3 hrs, vi tu video y en media hora quedo XD

Si entendí bien, filter retorna una copia del arreglo con una longitud menor y map retorna una copia del arreglo con la misma longitud? Gracias de antemano a quien responda esto.

Hola, muy buen video. Una consulta: un arreglo ¿Es lo mismo que un array? ¿O son dos cosas distintas? Ya que array en castellano = colección. Muchas gracias!

Pregunta: el "map" retorna un array nuevo que deben ser guardado en una variable o constante y "forEach" no retorna nada, sino que modifica el array original? Es así? Gracias.

El array.map me sirve mucho en react para renderizar una porción de código igual por cada elemento del array en un componente, como una ul o una ol.

¿Cómo debiese hacer la suma acumulada?

tu eres el barbon

Nooo... Broth Ese nananananeneneoooo del Intro debio durar mas... Juaz Juaz Juaz

Hola, si quiera saber solo la edad promedio de los perros?

cual es diferencia con el foreach??

Una forma más elegante 1:30 seria: // Forma abreviada const getSum = n => n.reduce((total, num) => total + num); // Forma extendida const getSum1 = n => { const totalSum = n.reduce((total, num) => { return total + num; }) return totalSum; }; Ejemplo: const numberList = [1,2,3,4,5,6,7,8,9]; console.log(getSum(numberList)); //45 console.log(getSum1(numberList)); //45

Estupida y sensual programación funcional

Por qué no lo vi antes, me siento culpable, saludos.

Hermano realiza un video sobre this en javascript por favor

intro de serie de los 90's....

como sería una implemtacion mas elegante ? 1:30 saludos

hay un metodo que se llama .map.call, puede ser?

6:02 Ese codigo se puede refactorizar asi: const mascotas = [ // Array q contiene objeto literal [{}] { nombre: 'Puchini', edad: 12 }, { nombre: 'Chanchito feliz', edad: 3 }, { nombre: 'Pulga', edad: 10 }, { nombre: 'Pelusa', edad: 12 }, ]; console.log(mascotas); /* [ { nombre: 'Puchini', edad: 12 }, { nombre: 'Chanchito feliz', edad: 3 }, { nombre: 'Pulga', edad: 10 }, { nombre: 'Pelusa', edad: 12 } ] */ /* .map() Transformar array q contiene objeto literal [{}] en array [] con los numeros de las edades */ const arrayEdad = mascotas.map((elemento) => elemento.edad); console.log(arrayEdad); // (4) [12, 3, 10, 12] // numero total de ELEMENTOS del array contando desde 1 const numeroElementos = arrayEdad.length; console.log(numeroElementos); // 4 /* .reduce() Edad promedio de las mascotas (12 + 3 + 10 + 12) / 4 = 9.25 */ const promedio = arrayEdad.reduce((acumulador, elemento) => acumulador + elemento) / numeroElementos; console.log(promedio); // 9.25

9:21 .map() DEVOLVER un nuevo array con el RESULTADO de ejecutar una funcion a CADA UNO de los elementos de un array existente (MAPEAR Array) .map () hace lo siguiente: 1) Itera (recorre) el array. 2) MODIFICA los elementos del array2 copiado con el resultado de aplicar la función .map() a cada uno de los elementos del array1 original (existente) 3) Devuelve una copia de un nuevo array2 a partir de uno existente array1 y NO modifica el array1 original 4) (array1.length = array2.length) El numero de elementos .length del array1 original y su copia array2 es EL MISMO

La x que pasa por parámetro de donde sale?

Forma elegante de calcular el promedio de edades: const ageAverage = pets .map(pet => pet.age) .reduce((total, age) => total + age) / pets.length; console.log(ageAverage);

Con base en*

1:30 Para los que vamos empezando en el mundo de la programacion ¿porque es horrible esa implementacion? [Pregunto como ignorante]

pero no debio ser primero explicar map que filter? :S

Quién te ha dicho esa chorrada de los perros?

Como puede ser que hoy en dia tengas tanta barba si hace un año no tenias nada

jaja no seria ni raza ni tipo seria especie jeje Xd

Me desagrada el sonido de tu teclado.