Curso de JavaScript
Dale vida a la web.
Aprende a programar, crea interacciones y construye proyectos reales.
La desestructuración extrae varias propiedades de un objeto en variables individuales, en una sola línea, en vez de escribir objeto.propiedad repetidamente.
Explicación
La desestructuración copia propiedades de un objeto hacia variables nuevas:
const { clave } = objeto;Crea una variable con el mismo nombre que la propiedad, y le asigna su valor directamente.
const { a, b } = objeto;Extrae varias propiedades a la vez, separándolas por comas dentro de las llaves.
const { clave: nuevoNombre } = objeto;Extrae una propiedad pero la guarda con otro nombre de variable, usando dos puntos.
Reto rápido
Agrega una tercera variable extraída con desestructuración (const { autor: creador } = curso;) y muéstrala con console.log.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
La desestructuración no modifica el objeto original: solo copia los valores de esas propiedades hacia nuevas variables independientes.
Dato extra
También puedes desestructurar directamente los parámetros de una función, por ejemplo function mostrar({ titulo, autor }) {...}, para no tener que escribir curso.titulo y curso.autor dentro de la función.
Error común
Escribir mal el nombre de la propiedad al desestructurar (const { titlo } = curso; en vez de const { titulo } = curso;): JavaScript no lanza un error, simplemente titlo queda como undefined, porque esa propiedad no existe en el objeto.
Siguiente paso
Ya sabes crear objetos, darles comportamiento con métodos y extraer sus datos con desestructuración. En el siguiente módulo vas a usar todo esto para manipular el DOM directamente: seleccionar, modificar y crear elementos de la página.
Ir a la siguiente lección