Curso JavaScript: 18. Destructuración -
HTML-код
- Опубликовано: 27 ноя 2024
- En este video te explico la destrcuturación (#destructuring) en #JavaScript.
💛 Aprende JavaScript aprendejavascr...
📖 Mis notas sobre JavaScript jonmircha.com/...
📖 Mis notas sobre ECMAScript jonmircha.com/...
📦 Códigos: github.com/jon...
🔔 Suscríbete al canal ruclips.net/user/jo... 🤓
👉 Visita mi sitio web jonmircha.com/ 💻
🌮 ¿Me invítas un taco? www.paypal.me/...
📫 Suscríbete a mi lista de correo tinyletter.com...
sept 11 1969**sept 15 2023
gracias excelente curso
felicidades John Mircha
Gracias, saludos👋🏻😉
Pueden renombrar las variables en los objetos de la siguiente forma:
const persona = {
nombre: "Jon",
apellido: "MirCha"
edad: 35
}
const {nombre, apellido, edad: age} = persona;
console.log(nombre, apellido, age);
//-> Jon MirCha 35
Es un excelente dato!!
No seria una mala practica eso
@@johanposadaagudelo6103 no, ya que si tu ya tenias una variable con el mismo nombre, esto te puede ayudar a no tener conflictos
@@xiricuicho pregunta, es necesario poner las 2 keys anteriores? osea tan solo poner edad:age no seria suficiente?
@@astrixwr5662 si, pero sólo sí deseas obtener únicamente la edad, por otro lado, si lo que quieres es obtener una variable para cada propiedad es necesario te declares cada llave separadas por coma, Cómo se muestra en el ejemplo de arriba.
Muchas gracias profe siempre ayuda darle un console.log a tus videos
😉👋🏻
gracias muy claro el concepto cias excelente video.. destructuracion
👋🏻😉
AAAAh ahora entiendo porque cuando hacia peticiones de una API hacia la destructuración, solo que no conocia su nombre. Un gran aporte
😉👋🏻
SOS CAMPEON DEL MUNOD, SOS CAMPEON DEL MUNDO, SOS CAMPEON DEL MUNDO
Algo muy importante que falto mencionar, a diferencia de los objetos, la desestructuración de arreglos es en base a su posición, asi que si solo quieres, por ejemplo, el ultimo valor de tu arreglo, tienes que respetar las posiciones de los anteriores, algo asi:
const numeros = [1, 2, 3];
const [ , , tres] = numeros;
console.log(tres) // 3
de lo contrario, si haces algo como:
const [tres] = numeros;
console.log(tres) // 1
ya que toma la primer posición del arreglo.
😉👋🏻
Muy interesante Alfredo, te agradezco por el aporte!
Excelente video, apenas conocí tu canal y estoy viendo varios videos de tu temario para aclarar dudas, por favor, no dejes de trabajar en esto, eres de gran ayuda para la comunidad
Excelente clase profesor MirCha, desconocía totalmente de esto, recién voy por aquí, ya he visto algunas otras clases salteadas, y no he visto algún otro curso que deje las bases tan marcadas como lo haces vos, abrazo desde Argentina!!
👋🏻😉
Muy buena explicación, un vídeo muy interesante
😉👋🏻
Gracias Jon por esta clase sobre Destructuración!
😉
primera vez que escuchó el tema de destructuración :0
😉👍🏻
Gracias jon!!
Con gusto
Que crack , mil gracias por la claridad en tu explicación , saludos =)
😀👋🏻
Ahora si me quedo super claro este concepto!!!! Graciasss
Con mucho gusto
Genial contenido, vengo del futuro, del curso de react, cada vez que destructuravas no entendía ni hostia, entonces acudí a tu curso de javascript para poder regresar luego a react y poder entenderlo todo.
Gracias por todos tus contenidos.
Saludos desde Cuba
😉👍🏻
jon mircha el mejor maestro online un abrazo desde ARG!!
🙈🤗
Gracias!
😉👍🏻
GRACIAS por hacer mas facil la curva de aprendizaje de Javascript!
👋🏻😉
Buen curso, Voy a comentar cada video que valla viendo, Numero #18
Quiero agradecer por sus cursos. Apenas estoy videos en específico donde explica cosas que no conocía porque en otros lados no las mencionan pero que usted sí. Por ejemplo, la Destructuración no lo conocía.
También me vi sus videos de JS acerca de AJAX y aprendí mucho.
Excelentes videos y cursos. Gracias nuevamente.
😉✌🏻
Master! Gracias por el curso! , saludos !
Saludos
Es muy agradable revisar los comentarios, pues en ellos encuentro mensajes que motivan a continuar, llevo varios meses tratando de ser autodidacta pero cada curso que encontraba me aburría y eso que no se casi nada de este mundo jajaja solamente lo que enseñan en la U que es poco para lo que se necesita... Tanto me aburría que comencé a buscar teclados mecánicos y me desentendí de los cursos. Me concentre más en conseguir un teclado dividido de 40% lastimosamente son muy costosos jajaja, lo bueno fue que conseguí uno a mitad de precio de 80% y le quite 42 teclas jajaja, en fin, la historia continua y por fin me siento más motivado para aprender JS. De verdad mil gracias por tu contenido, nunca cambies🧙♂️...
Posdata...En cuando tenga mi primer empleado en el mundo del desarrollo te invito a tu Taco, no porque no confié en tu contenido, si no porque en el momento no tengo el recurso , bendiciones!!!
🙌🏻 Gracias por tus bendiciones
Muchas gracias jon, desde Colombia un fiel seguidor de sus contenidos, Dios lo bendiga por su gran labor.
Gracias por tus bendiciones 🙌🏻
Primero me hicieron usar la destructuración y luego la medio aprendí, con este video me quedó más que claro. Gracias por tan valioso material.
De nada aprendejavascript.org/
Vengo desde un curso de angular en el que he manejado el tema de la destructuracion de objetos, no entendía bien su funcionamiento, pero vaya que fácil lo he entendido contigo!! Gracias profe!
👍🏻😉
Buen video, lo explicó bien... curso recomendable
🤓👌🏻
Muchas gracias Jon, saludos desde Colombia quiero agradecerte por el tiempo que te tomas al crear el contenido aún bajo enfermedad, te prometo que apenas todo esto que nos enseñas comienze a dar frutos, daré mi aporte económico en reconocimiento a tu labor.
😉👋🏻
Muy bien curso, bien muy bien para este tiempo de estar encerrados por la pandemia!! Gracias por tomarte el tiempo y animo, para que sigas enseñando más!!
:)
Aprendí VueJS hace unas semanas terminé un curso, se me dificultaba saber como funcionaban los props, pero ahora entiendo como funciona y que es lo que realmente hace y fue mas sencillo de lo que se me dificultaba. Muchas gracias por todo el contenido!
POr eso es importante tener bases sólidas del lenguaje antes de pasar a Frameworks o librerías :)
@@jonmircha Es correcto! por eso decidí ver tu curso y creeme que todo esta claro y estoy aprendiendo mucho Gracias por compartir experiencias, tips y de todo
Gracias, 🥇
🤝
Nunca había escuchado de la destructuración, muy bien y gracias por la información.
Aparte de lo dicho, también se pueden tomar varias posiciones del array y hacer la destructuración en una sola variable:
const array = [1,2,3,4];
const [uno, ...elResto] = array;
console.log(elResto); //[2, 3, 4]
simplemente con los ... (3 puntos suspensivos) te toma los valores restantes del arreglo?
@@elargento1 Así es, la variable uno toma el valor 1 y puedes almacenar el resto, que en este caso es 2,3,4 en otra variable.
En ese caso la consola no imprimiría así?
// 1 [ 2, 3, 4 ]
Gracias por el video JON, muy bueno. Estuve mirando el link de mdn y es super interesante, el tema es donde meter tanta info, mi cerebro va a explotar..... quien se acuerda todo esto..... mamamaaaaaaaa mia.
A la par vere JS con React maestro, excelente explicación!!
Muchas gracias!
Nota: Al asignar variables con const [one, two, three] = numeros; serán declaradas como constantes, por lo tanto son inmutables (no modificables). Para este caso, obviamente one siempre será 1, pero en un caso general, si esas variables deban ser sobreescritas, entonces en vez de const usar let.
👍🏻
Recuerda q son datos compuestos los arreglos, por lo que por ejemplo en el caso del objeto puede ser una constante pero sus valores pueden cambiarse, no cambiarías la propiedad pero si su valor o hacer otras cosas con los valores de su propiedades
No lo conocía, pero ya se me ocurrieron varias formas de como usarlo, gracias por tu curso Jon.
Excelente
Muchas gracias, Jon por enseñarme, pero hay algo que quisiera que me contestes,
Cuando empezaste a aprender a programar, ¿cuál era tu objetivo inicial?
¿te apasionaba programar?¿hoy en día no te aburre?
Siempre me ha gustado diseñar y programar obvio que hay épocas de bache como en la vida misma, pero sí después de casi 20 años me sigue gustando
Muchas gracias!
👋🏻😉
Por aqui seguimos sin rendirnos, con el proposito de comentar cada video❤
😉👍🏻
Mejor imposible! mil gracias!
De nada!
Me encanto esta clase, gracias profesor.
Con mucho gusto
Dando un paseo por conceptos básicos =D jajaja gracias y saludos
😉
Muchas Gracias Jonathan!!!
De nada!
La verdad si me has aclarado muchas cosas
🤓👌🏻
Muy bien explicado, agradezco su vocación en la enseñanza de esta profesión
Hola, muchas gracias
excelente video no conocia acerca de la destructuracion
y no sabes como se usa en librerías y frameworks como React y Angular
Lo explicas muy bien! Me encanta!
😉🙌🏻
excelente muchas gracias por compartir conocimiento saludos desde bogota
Día 8 ( 13/07/2020): Buena explicación , ya tomé nota .
Excelente docente 👨🏫
Muchas gracias
Con gusto
Hice un ejemplo con funciones:
let stu1 = {
name: 'Luis',
student: true,
score1:100,
score2:90,
score3:60,
score4:85,
score5:0
};
let stu2 = {
name: 'Fernando',
student: true,
score1:50,
score2:45,
score3:90,
score4:0,
};
const sumFirstThreeScores = function({score1,score2,score3}){
return score1 + score2 + score3;
};
console.log(sumFirstThreeScores(stu1));
console.log(sumFirstThreeScores(stu2));
Me encanto tu ejercicio y lo realice, adicional a los objetos les puse otro atributo y luego llame el atributo par probar. Gracias por el ejercicio :)
console.log(stu2.name, sumaScore(stu2));
console.log (stu1.name, stu1.apellido ,sumaScore(stu1));
excelente amigo
@@MaxielJohannaCamargoGomez excelente amiga
Cuanto trabajo acabas de quitar con la destructuración. Se acabaron los corta pega. Muchas gracias Sr. Mircha
😉👍🏻 yo no, los avances de JS 🤭
Magnifico Curso!!!!! Graicas profe :)
De nada :) comparte para llegar a más gente
En el arreglo si se respeta el orden de la posición de los elementos es decir 0 -1 - 2 - 3 a la hora de poner nombres a las variables que estamos declarando.
sí
Clase 18, vista
gracias.
👋🏻😉
Súper bien explicado!!! Gracias 🙏🏻
Hola, muchas gracias
Fantástico el curso, saludos
Gracias, saludos
Gracias!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
😉👋🏻
Muy claro, saludos!!
excelente #cursodejavascript te felicito, sigue así
Gracias, saludos
Gracias!!!!!!!
Gracias por comentar
Excelente curso!
Muy bueno eso no lo sabia, gracias por el aporte. Con una consulta, ya hablando profesionalmente en donde podemos utilizar la destrucuración?
Uuu en un buen de lados, de hecho la mayoría de frameworks reactivos la usan para el paso de propiedades a sus componentes
interesante! no sabia :D
Gracias! 😊
Cool!
Epa genial no conocía esto de la destructracion pero me queda la duda si podemos cambiar el valor de la variable apellido destructurada.muchas gracias genial
Añadir también que no hace falta coger todas las propiedades del objeto, podemos coger únicamente solo la edad por ejemplo.
Super bien
🙏🙏🙏
👋🏻😉
Entonces el orden de las variables no altera el producto jaja, gracias man, todo se entiende.
🤓👍🏻
En el sentido del uso de la memoria de la máquina, con el arreglo [one, two, three] si quisiera eliminarlo o modificarlo para liberar memoria ¿sería imposible porque queda inaccesible?
Esto seria similar al desempaquetado de tuplas ?
Damos like y comentamos como siempre
😉👍🏻
¿Sería algo similar a lo que hace el operador de unpacking en python no?
algo así
😎😎😎😎😎
Una pregunta jonh , la destructuración en los arreglos , Tambien no importa el orden? Y , en los arreglos no importa si las variables que están en la destructuración , no tienen el mismo nombre que las de el arreglo??
Espero resuelvas mi duda , gracias por esta clase
El orden no importa, el nombre si
3 meses para saber Js py php y un poco de react... se podrá?
Ya pasaron los 3 meses, me podés decir como vas?
Y? cómo te fue?
Jaja bro para ser realistas estoy estudiando y me quita tiempo. También trabajo para pagar la u y también quita tiempo.. me demore mucho con la flojera y todo pero ya termine js. Bien repasado, junto con css avanzado para saber maquetacion. Ahora si me pondré a aprender base de datos, php o algo con más ganas me propongo hasta fin de año para poder presentarme a alguna empresa y encontrar trabajado en este rubro y acumular experiencia
@@josepongo7730 y como te fue
como podria guardar del objeto una sola variable la que yo desee utilizar , por ejemplo let {nombre,edad,apellido} = persona , como podria extraer el valor y guardarlo en una variable el valor de nombre?
💯
😉👋🏻
no es critica ojo, solo quiero q sepan que al poner en let {nombre, edad, apellido} = persona; . No va a aparecer en la consola de la página en es orden porque no lo estamos enviando en ese orden a la consola (en el console.log)
muy buen tema profe, pero seria bueno aplicarlo a algo mas practico(como se utiliza en un verdadero proyecto) o no se si mas a delante lo hará, de igual forma muchas gracias por la calidad de material
Más adelante hay bloques de ejercicios prácticos
@@jonmircha muchas gracias profe por su tiempo al responder, vamos paso a paso
👏👏👏🙏🙏🙏
👋🏻😉
Hola, gracias por el curso, no entiendo muy bien la utilidad en los array es como todo o nada, por digamos un ejemplo un arreglo de 100 indices comos se puede hay utilizar?
Espera a la tanda de ejercicios que hay más adelante y ahí entenderás su uso 😉
👋👋👋
😉👋🏻
es igual a desestructuración?
😅
@@jonmircha porque la risa.🤣🤣
Es desestructuración, destructuración está mal dicho xd
¿Cómo desestructurar un arreglo de objetos???
Primero destructuras el arreglo, es decir cada posición y luego las props de cada objeto
Asi esta en la mdn en español:
La sintaxis de asignación desestructurante ( destructuring assignment ) es una expresión que posibilita la extracción de datos de arrays, o de propiedades de objetos, en variables distintas.
link
developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Destructuring_assignment
por otro lado hiciste la desestructuración en el objeto usando let y no const.
estarías almacenando cada uno de las propiedades del objeto en variables independientes que luego puedes cambiar de valor,
pero con constantes no podrías cambiarles de valor siendo independientes, mas si podrías en el propio objeto y luego haciendo referencia de ellas en la desestructuracion, por lo que en un caso o en el otro es indistinto y se ajusta a lo que te parezca mas cómodo en el momento, no?
ojala me puedas responder mis dudas, yo con esperanza igual te las dejo jaja, bendiciones
Jon, tu entre cada video estás comentando el código viejo? Porque cada vez que quiero ingresar una propiedad nueva pero que ya he usado antes, me tira error porque ya definí ese identificador.
😮🤔
Excelente clase. Pero me surgió una duda ----> Cómo hacemos para destructurar un array con muuuchiiiisimos elementos? O un objeto con muchas más propiedades? los métodos de los objetos también se desestructuran? Agradecería una aclaración genio.
Tienes que destructurar propiedad por propiedad
Men, creo que hacer una pregunta como la de si se pueden destructurar los métodos es un poco al cuete... solo prueba si puedes hacerlo y listo, lo resuelves fácil, al ver tu pregunte probé hacerlo y comprobé que si se puede, así que gracias por plantear la duda de todas maneras.
Hola Profe ! hago una correccion constructiva. La definicion que diste de destructuracion no esta bien.
La definicion correcta seria "Es una expresion/forma de JS que permite asignar valores DE arreglos y PROPIEDADES de objetos en distintas VARIABLES."
La definicion que has dado es: "Es una nueva forma de asignar valores a arreglos y objetos" lo cual no es correcto, no asignas valores a objetos ni arreglos, sino que guardas los valores de estos mismos en variables. Saludos profe y recalco, es sin animo de ofender ni criticar, es constructivo este comentario
😅👋🏻
groso JM
Traducido al español ch1ngón sería: desbaratar; destructuración => desbaratar, osea, estas desbaratando un arreglo o un objeto en variables, está mas ching0n decir 'desbaratar', pónganse truchas mi gente y asígnenle un nombre mas perrón a lo que no le entienden, osea 'destructurenlo' o mas mejor dicho: desbaratenlo.
👋🏻😉
La desestructuración*
😂
hi
Esta muy raro ami no me impreime como a ti
El profe se parece este youtuber: ruclips.net/user/results?search_query=novapop2. No sera su hermano o su padre?