Me gusto el video , muy claro y bien explicado. Ahora con ES6 seria: var platosPrincipales = almuerzos.map((almuerzo)=>almuerzo.principal); console.log(platosPrincipales)
Coño mano primera vez que veo un video de un paisano para aprender programacion. Jajaja. Estuvo muy bueno, tu video me ayudo bastante en freecodecamp en el modulo de programacion funcional, a entender el metodo map. Yo siempre era de matarme con ciclos for me ha ayudado mucho. Gracias
Hermano, te felicito, explicas de una manera increíble, me gustó muchísimo tu vídeo porque me quedo clarísimo con tus ejemplos y explicaciones el uso del mismo, 10/10
si estos ejercicios con estas propiedades de los arreglos con muy importantes seria excelente que se hicieran mas... mil gracias superbien esta explicacion
Hola me encantó tu video, única critica es que se escucha muy bajita, pero explicas perfectamente y en detalle para quienes estamos aprendiendo y necesitamos el detalle sobretodo de donde salen los parámetros, etc. Me gustaria si podes explicar la función indexOf complementando la fx map. Muchas gracias
cuando hablas de almuerzo.principal ¿hay alguna forma de hacer que .principal pueda ser el argumento de una función? es decir que pueda ser dinámico y cambiar
hoy este video me salvo la vida ! podrias sacar un video explicando lo distintos tipos de caso en los cuales podriamos aplicar .map, .reduce y filter combinados???
Me encantan tus videos, muy claras tus explicaciones, qué enorme es el JS y todo lo que se puede hacer con ese lenguaje históricamente subestimado. De dónde sos, o sea, de qué país?
ahorita es que javascript esta agarrando vuelo, realmente antes no tenia mucha utilidad mas que dar eventos y transiciones a la interfaz, ahorita que se estan metiendo con la programacion orientada a objetos es que esta poniendose interesante.
Hola, queria preguntarle si uds tienen un video de los metodos mas usados en javascript y si no es el caso, podria decirme donde puede encontrarlos de una manera entendible para un principiante. gracias.
Holaa muy bueno el video, explicación precisa. Me queda una duda, porque el argumento de la función anónima es almuerzo y no almuerzos en plural? Se puede poner cualquier nombre o tiene que ser el nombre del array original en singular?
Respuesta rápida: El nombre que te de la gana 😊 Cualquier nombre que quieras puedes usar, menos palabras reservadas evidentemente (como index que tiene su propia función) El mismo nombre en singular es una buena práctica para saber lo que se está haciendo, pero imagínate que tienes esa lista en otro objeto entonces ahí no le pondràs el nombre en singular seguramente. Un saludo!
Respecto a lo que dijiste que no se modifica el array principal. Pero si igualamos una propiedad del array principal este si se modifica. Como en el siguiente código almuerzos.map((almuerzo)=>{ almuerzo.principal = "texto"; //{ principal: 'text', postre: 'Arepa' } }) porque a mi si me funciono.
Hola Carlos, correcto. Eso es lo esperado porque el array esta compuesto de objetos y durante el map tienes referencias a ellos. Si haces lo mismo con un array de números o strings, vas a ver que el array original no cambia. Esto se debe a la forma en que se referencian los objetos en la memoria. Puedo hacer un video de esto para poder explicarlo a fondo! Sin embargo, algo importante es que durante un map, como buena práctica no debes modificar el objeto que recibes como parámetro. Si quieres modificarlo puedes clonarlo, cambiar la propiedad y retornas ese clon para evitar eso que estas viendo. -Ricardo.
si estuviera haciendo eso con ciertos numeros y ocupo el map para separas los pares de los impares y de ahí que me de los pares y los quiero sumar, como le puedo hacer? var arreglo=[ {ipar:'3'}, {par:'2'}, {ipar:'5'}, {ipar:'3'}, {par:'4'}, {par:'6'}, {ipar:'7'}, {ipar:'9'}, {par:'8'} ]; var numerosPares = arreglo.map(function(arreglo){ return arreglo.par }) console.log(numerosPares);
@@williamramirez5009 Aquí les dejo el código según lo que entendí de tu pregunta, solo llama a la función y listo: function Numbers(){ const numbers = [ {pair: 4 , odd: 9}, {pair: 2 , odd: 3}, {pair: 6 , odd: 7}, {pair: 8 , odd: 13} ]; var sum = 0; let pairs = numbers.map((element) => { return element.pair; }) for(let index in pairs){ sum+=pairs[index]; //Lo mismo que sum = sum + pairs[index] } console.log(`Response : ${sum}`); };
la funcion map es lo mismo que la recurcion en el paradigma funcional? , crea un nuevo array en la memoria con cada iteracion? y cada array es un objeto con todos los metodos y atributos de un array? , cunado iteras 20 veces es bueno , pero si necesitar iterar miles de veces , el crear miles de objetos en memoria no consume demaciados recursos?
Hola! La función map es no es lo mismo que la recursión. Por cada iteración se crea un nuevo objeto en la memoria que corresponde a lo que retorna la función anónima que le suministras a map. Teóricamente si es posible que consumas muchos recursos si el número de elementos en el Array es muy grande. Sin embargo, en los años que tengo en la industria nunca he visto ese problema. Personalmente no me preocuparía, uno de los beneficios de map es hacer que el código sea mucho más conciso y simplificado.
Hola hazlosipuedes! La función Map no usa recursión. Esta crea un solo array en la memoria para guardar los resultados de llamar el callback con cada argumento. Este array es del mismo tamaño que en el que fue llamado map. Aquí puedes ver una pequeña implementación de Map: Array.prototype.myMap = function(callback) { arr = []; for (var i = 0; i < this.length; i++) arr.push(callback(this[i], i, this)); return arr; }; Como puedes ver, map crea y retorna un nuevo array. El array con el que uno llama la función no es mutado. Esto es muy importante, debido a que nos permite hacer cadenas con otros métodos que son funciones puras como filter y reduce. El verdadero método Map es más complejo porque produce excepciones cuando hay errores. Por ejemplo, cuando le pasas un callback que no es una función te da un TypeError. Puedes ver algo que se aproxima más a la verdadera implementación de Map en la sección "Polyfill" de esta página: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Polyfill Déjame saber si no respondí tu duda! - Daniel
Appdelante gracias por contestar.... vi una masterclass de paradigma funcional, donde la recursion (que es lo que más se utiliza en haskell) crea nuevos staks en memoria y es la manera de manejar la inmutabilidad al no tocar el estado original, y esto lo hace de manera muy económica gracias al cálculo lambda, y que los lenguajes enfocados en objetos son muy caros en gestión de memoria porque crean nuevos objetos muy pesados, y pusieron ejemplos donde la memoria se bloqueaba y en Mozart usando recursion (funcional) se podían hacer cálculos enormes... lo comento porque JS tiene el futuro de la web en sus manos y las web apps algún día podrán manejar cálculos científicos en tiempo real... (claro yo que soy un aprendiz nunca implementar e nada más allá de una página web) pero me gusta indagar a fondo como funcionan los lenguajes, y me preocupa pensar que estoy haciendo programación funcional cuando solo hago azúcar sintáctico... me encantan tus videos, eres un buen maestro, me encantaría en lugar de que hagas un curso de JS desde cero que hicieras un curso solo de manejo y operaciones de arrays a fondo, o el de inmutabilidad a fondo, o el manejo correcto de la recursion en JS, mil gracias.
Alguien podría decirme como es que la variable ‘platosPrincipales’ se imprime en el minuto 4:37? Es que no veo cómo está siendo llamada para que se imprima en la consola
Hola amigo, voy a tratar de explicarte pero me dices si algo no te queda claro o si no me expliqué bien! Primeramente, el array verde de arriba en ese minuto ,""["Arepa","Tacos"... etc]" ya estaba para cuando hizo run. lo que imprimió fué el parametro "almuerzo" que recibe la función dentro del .map . te puede fijar que imprime 4 veces 1 objeto (cada uno de los que está en el array ó lista "almuerzos") y como está imprimiento "almuerzo" en cada iteracion del .map "almuerzo" vale 1 objeto del array, o sea. En la primera vuelta vale {principal: "Arepa", postre: "Helado"} y en la segunda vuelta vale {principal: "Tacos" , postre: "Torta de queso"} y así sucesivamente hasta terminar. si te fijas el console.log imprimiendo imprimiendo almuerzo que tiene esos objetos como valor. si imprimiera almuerzo.principal imprimiera solo las strings de los platos principales de cada objeto dentro de "ALMUERZOS". también ten en cuenta que .map retorna automaticamente un array con todo lo que va recibiendo como parametro. por lo que la VAR platos principales termina siento un array con todos los almuerzo.principal. Escríbeme cualquier cosa te ayudo. No sé si fuí claro!
@@jorgenghazi8823 Muchas gracias por la explicación, pero tal vez mi pregunta no está clara. Me sucede lo siguiente: 1. Entiendo la funcionalidad para imprimir cada elemento 'almuerzo' a través de array.map(function(){}) 2. Entiendo que esa funcionalidad está encapsulada en la variable 'platosPrincipales' 3. Lo que no entiendo es cómo se imprime la variable 'platosPrincipales' sin ser llamada con un console.log(platosPrincipales'), ya que el que se muestra está comentado con '//'
Me genera la siguiente pregunta ¿Si pongo un 'console.log' dentro de una variable o función, esta se imprimirá sin necesidad de poner console.log(variable ó función)?
@@ADRHP Hola de nuevo, De hecho, 'platosPrincipales' nunca se imprime como tal la variable. ten en cuenta que cuando usas la función .map sobre un array eso retorna otro array con los cambios hechos dentro de la función. fijate que esta 'platosPrincipales es igual (=) al resultado de almuerzos.map' el console.log estaría haciendose desde la función dentro del .map una vez por cada elemento del array original 'almuerzos'. y se está imprimiendo son los objetos completos del array 'almuerzo'.
@@ADRHP No, no funciona así. de hecho estaría mál, ya que console.log() no retorna ningún valor. solo imprime por consola. no es una dato que puedas usar en alguna variable por ejemplo. Si quieres más detalles con lo que no te queda claro pásame un correo ghazijj98@gmail.com y avisame por acá que lo enviaste. jajaja saludos!
Cientos de devs han amado nuestros cursos. Echales un ojo: appdelante.com/cursos
Muchas gracias por tu excelente explicación saludos desde Bolivia
Me gusto el video , muy claro y bien explicado. Ahora con ES6 seria:
var platosPrincipales = almuerzos.map((almuerzo)=>almuerzo.principal);
console.log(platosPrincipales)
Correcto Gustavo!
ahora en vez de var, let jajaja
Excelente tutorial para los array.. Gracias desde Venezuela 05/03/2021)
Bastante clara tu explicación.
Buen video.
Excelentemente explicado. Creo que por fin entendí como funciona el método map.
Aprendiendo en el 2020 con un video del 2017. Gracias.
mano, mejor explicado no se podria... buen aporte
Coño mano primera vez que veo un video de un paisano para aprender programacion. Jajaja. Estuvo muy bueno, tu video me ayudo bastante en freecodecamp en el modulo de programacion funcional, a entender el metodo map. Yo siempre era de matarme con ciclos for me ha ayudado mucho. Gracias
GRACIAS POR COMPARTIR TU CONOCIMIENTO!
Explicas de maravilla.
Hermano, te felicito, explicas de una manera increíble, me gustó muchísimo tu vídeo porque me quedo clarísimo con tus ejemplos y explicaciones el uso del mismo, 10/10
Que gran simpleza para explicar. Gracias.
Excelente explicación
Gracias por el video y por explicar !
Excelente explicación!
Muchas gracias. Veo el método map en muchos sitios y con diferentes lenguajes. Con tu explicación creo que empiezo a entender su uso 🙂👍
Excelente pana excelente muy claro
Muy buen explicado 👍
gracias Por el video es dan gran utilidad
Bien explicado ojala y ganes 100,000 subcriptores te lo meceres, Dios te bendiga
Gracias Weslin!! 🙏
muy bueno. gracias
Gracias!! Muy util!!
¡Muchas gracias amigo!
Excelente explicación. Gracias.
Explicación muy clara, muchas gracias.
Increible!!!
Muy buen video amigo, me ayudo muchísimo
Muchas gracias.
Buenísima explicación Gracias
Muy util!
Excelente video !! (y)
si estos ejercicios con estas propiedades de los arreglos con muy importantes seria excelente que se hicieran mas... mil gracias superbien esta explicacion
Que buen vídeo!! tengo mucho tiempo usandola pero nunca me había quedado tan claro, mira que hay que tener suerte. Grande, sigue así!!
Gracias por este primer video ¡lo explicas de maravilla!
A la orden Isaac!
Muchas gracias
muy buen contenido, super entendible, Gracias!
me encantooooooo
Excelente explicación. Me ayudó muchísimo!!!
Excelente vídeo, muy buen ejemplo!!! Saludos desde República Dominicana y feliz año nuevo hermano!
Gracias por tus videos. Explicas muy bien, deberías de subir cursos a Udemy.
Muy buen video!! excelente explicación
muchas gracias, muy buen video
genio! me encanto el video, por mas videos asi :D con mas ejemplos
Hola me encantó tu video, única critica es que se escucha muy bajita, pero explicas perfectamente y en detalle para quienes estamos aprendiendo y necesitamos el detalle sobretodo de donde salen los parámetros, etc. Me gustaria si podes explicar la función indexOf complementando la fx map. Muchas gracias
Hola Gia, muchas gracias. Listo voy a ponerlo en mi lista para agregarlo a la serie.
Saludos,
-Ricardo.
cuando hablas de almuerzo.principal ¿hay alguna forma de hacer que .principal pueda ser el argumento de una función? es decir que pueda ser dinámico y cambiar
Excelente video amigo, saludos.
Eres un crack amigo!
buena explicacion me quedo mas claro
👏👏👏👏
que bonito explicas :)
muy buena explicacion, estaria bueno que expliques algunos ejemplo con join() y reduce() porfavor
hoy este video me salvo la vida ! podrias sacar un video explicando lo distintos tipos de caso en los cuales podriamos aplicar .map, .reduce y filter combinados???
mi salvu la vida
solo como comentario me gustaria que hablaras un poco mas fuerte o subas el volumen del micro,gracias
yo escuchando el principio: este chamo parece venezolano, sera?
cuando veo el ejemplo con la arepa...ES VENEZOLANO!!!!
excelente explicacion gracias!
Muy bueno!
y se puee hacer que retorne el principal y postre?
Nuevo sub, muy bueno!!!
Gracias hermano
Por nada hermano. Gracias por el comentario!
Me encantan tus videos, muy claras tus explicaciones, qué enorme es el JS y todo lo que se puede hacer con ese lenguaje históricamente subestimado. De dónde sos, o sea, de qué país?
ahorita es que javascript esta agarrando vuelo, realmente antes no tenia mucha utilidad mas que dar eventos y transiciones a la interfaz, ahorita que se estan metiendo con la programacion orientada a objetos es que esta poniendose interesante.
Genial !
hay una forma de llenar ese arreglo con un map ? en vez de hacerlo estatico
Hola, queria preguntarle si uds tienen un video de los metodos mas usados en javascript y si no es el caso, podria decirme donde puede encontrarlos de una manera entendible para un principiante. gracias.
Holaa muy bueno el video, explicación precisa. Me queda una duda, porque el argumento de la función anónima es almuerzo y no almuerzos en plural? Se puede poner cualquier nombre o tiene que ser el nombre del array original en singular?
Respuesta rápida: El nombre que te de la gana 😊
Cualquier nombre que quieras puedes usar, menos palabras reservadas evidentemente (como index que tiene su propia función)
El mismo nombre en singular es una buena práctica para saber lo que se está haciendo, pero imagínate que tienes esa lista en otro objeto entonces ahí no le pondràs el nombre en singular seguramente.
Un saludo!
Respecto a lo que dijiste que no se modifica el array principal. Pero si igualamos una propiedad del array principal este si se modifica. Como en el siguiente código
almuerzos.map((almuerzo)=>{
almuerzo.principal = "texto"; //{ principal: 'text', postre: 'Arepa' }
})
porque a mi si me funciono.
Hola Carlos, correcto. Eso es lo esperado porque el array esta compuesto de objetos y durante el map tienes referencias a ellos.
Si haces lo mismo con un array de números o strings, vas a ver que el array original no cambia.
Esto se debe a la forma en que se referencian los objetos en la memoria. Puedo hacer un video de esto para poder explicarlo a fondo!
Sin embargo, algo importante es que durante un map, como buena práctica no debes modificar el objeto que recibes como parámetro. Si quieres modificarlo puedes clonarlo, cambiar la propiedad y retornas ese clon para evitar eso que estas viendo.
-Ricardo.
gracias por responder, lo tomare en cuenta!
Como se trae desde mysql esos datos?
Colombiano suscrito
si estuviera haciendo eso con ciertos numeros y ocupo el map para separas los pares de los impares y de ahí que me de los pares y los quiero sumar, como le puedo hacer?
var arreglo=[
{ipar:'3'}, {par:'2'}, {ipar:'5'},
{ipar:'3'}, {par:'4'}, {par:'6'},
{ipar:'7'}, {ipar:'9'}, {par:'8'}
];
var numerosPares = arreglo.map(function(arreglo){
return arreglo.par
})
console.log(numerosPares);
alguien te respondio me interesa saber
@@williamramirez5009 Aquí les dejo el código según lo que entendí de tu pregunta, solo llama a la función y listo:
function Numbers(){
const numbers = [
{pair: 4 , odd: 9},
{pair: 2 , odd: 3},
{pair: 6 , odd: 7},
{pair: 8 , odd: 13}
];
var sum = 0;
let pairs = numbers.map((element) => {
return element.pair;
})
for(let index in pairs){
sum+=pairs[index]; //Lo mismo que sum = sum + pairs[index]
}
console.log(`Response : ${sum}`);
};
que diferencia hay entre map y foreach?
map te regresa un arreglo nuevo con los valores.
Venezolano suscrito
como hago el .map() n veces ?????
la funcion map es lo mismo que la recurcion en el paradigma funcional? , crea un nuevo array en la memoria con cada iteracion?
y cada array es un objeto con todos los metodos y atributos de un array? , cunado iteras 20 veces es bueno , pero si necesitar iterar miles de veces , el crear miles de objetos en memoria no consume demaciados recursos?
Hola! La función map es no es lo mismo que la recursión.
Por cada iteración se crea un nuevo objeto en la memoria que corresponde a lo que retorna la función anónima que le suministras a map.
Teóricamente si es posible que consumas muchos recursos si el número de elementos en el Array es muy grande. Sin embargo, en los años que tengo en la industria nunca he visto ese problema.
Personalmente no me preocuparía, uno de los beneficios de map es hacer que el código sea mucho más conciso y simplificado.
Hola hazlosipuedes!
La función Map no usa recursión. Esta crea un solo array en la memoria para guardar los resultados de llamar el callback con cada argumento. Este array es del mismo tamaño que en el que fue llamado map. Aquí puedes ver una pequeña implementación de Map:
Array.prototype.myMap = function(callback) {
arr = [];
for (var i = 0; i < this.length; i++)
arr.push(callback(this[i], i, this));
return arr;
};
Como puedes ver, map crea y retorna un nuevo array. El array con el que uno llama la función no es mutado. Esto es muy importante, debido a que nos permite hacer cadenas con otros métodos que son funciones puras como filter y reduce.
El verdadero método Map es más complejo porque produce excepciones cuando hay errores. Por ejemplo, cuando le pasas un callback que no es una función te da un TypeError. Puedes ver algo que se aproxima más a la verdadera implementación de Map en la sección "Polyfill" de esta página: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Polyfill
Déjame saber si no respondí tu duda!
- Daniel
Appdelante gracias por contestar.... vi una masterclass de paradigma funcional, donde la recursion (que es lo que más se utiliza en haskell) crea nuevos staks en memoria y es la manera de manejar la inmutabilidad al no tocar el estado original, y esto lo hace de manera muy económica gracias al cálculo lambda, y que los lenguajes enfocados en objetos son muy caros en gestión de memoria porque crean nuevos objetos muy pesados, y pusieron ejemplos donde la memoria se bloqueaba y en Mozart usando recursion (funcional) se podían hacer cálculos enormes... lo comento porque JS tiene el futuro de la web en sus manos y las web apps algún día podrán manejar cálculos científicos en tiempo real... (claro yo que soy un aprendiz nunca implementar e nada más allá de una página web) pero me gusta indagar a fondo como funcionan los lenguajes, y me preocupa pensar que estoy haciendo programación funcional cuando solo hago azúcar sintáctico... me encantan tus videos, eres un buen maestro, me encantaría en lugar de que hagas un curso de JS desde cero que hicieras un curso solo de manejo y operaciones de arrays a fondo, o el de inmutabilidad a fondo, o el manejo correcto de la recursion en JS, mil gracias.
Alguien podría decirme como es que la variable ‘platosPrincipales’ se imprime en el minuto 4:37? Es que no veo cómo está siendo llamada para que se imprima en la consola
Hola amigo, voy a tratar de explicarte pero me dices si algo no te queda claro o si no me expliqué bien! Primeramente, el array verde de arriba en ese minuto ,""["Arepa","Tacos"... etc]" ya estaba para cuando hizo run. lo que imprimió fué el parametro "almuerzo" que recibe la función dentro del .map . te puede fijar que imprime 4 veces 1 objeto (cada uno de los que está en el array ó lista "almuerzos") y como está imprimiento "almuerzo" en cada iteracion del .map "almuerzo" vale 1 objeto del array, o sea. En la primera vuelta vale {principal: "Arepa", postre: "Helado"} y en la segunda vuelta vale {principal: "Tacos" , postre: "Torta de queso"} y así sucesivamente hasta terminar. si te fijas el console.log imprimiendo imprimiendo almuerzo que tiene esos objetos como valor. si imprimiera almuerzo.principal imprimiera solo las strings de los platos principales de cada objeto dentro de "ALMUERZOS". también ten en cuenta que .map retorna automaticamente un array con todo lo que va recibiendo como parametro. por lo que la VAR platos principales termina siento un array con todos los almuerzo.principal.
Escríbeme cualquier cosa te ayudo. No sé si fuí claro!
@@jorgenghazi8823 Muchas gracias por la explicación, pero tal vez mi pregunta no está clara. Me sucede lo siguiente:
1. Entiendo la funcionalidad para imprimir cada elemento 'almuerzo' a través de array.map(function(){})
2. Entiendo que esa funcionalidad está encapsulada en la variable 'platosPrincipales'
3. Lo que no entiendo es cómo se imprime la variable 'platosPrincipales' sin ser llamada con un console.log(platosPrincipales'), ya que el que se muestra está comentado con '//'
Me genera la siguiente pregunta ¿Si pongo un 'console.log' dentro de una variable o función, esta se imprimirá sin necesidad de poner console.log(variable ó función)?
@@ADRHP Hola de nuevo, De hecho, 'platosPrincipales' nunca se imprime como tal la variable. ten en cuenta que cuando usas la función .map sobre un array eso retorna otro array con los cambios hechos dentro de la función. fijate que esta 'platosPrincipales es igual (=) al resultado de almuerzos.map' el console.log estaría haciendose desde la función dentro del .map una vez por cada elemento del array original 'almuerzos'. y se está imprimiendo son los objetos completos del array 'almuerzo'.
@@ADRHP No, no funciona así. de hecho estaría mál, ya que console.log() no retorna ningún valor. solo imprime por consola. no es una dato que puedas usar en alguna variable por ejemplo.
Si quieres más detalles con lo que no te queda claro pásame un correo ghazijj98@gmail.com y avisame por acá que lo enviaste. jajaja saludos!
Vengo departe de La Banana Rancia :3
Hola Raixbell! Excelente! Bienvenido al canal. Cualquier duda, aquí estamos para responderlas.
7:15
se escucha muy bajo
let platosPrincipales = almuerzos.map(almuerzos=>almuerzos.principal);
Sapeeeeeeee
no se oye nada ush ste man vive bajo el agua
Sorry! Lo nuevos videos tienen más sonido.
Excelente explicación. Muchas gracias.