En este tutorial vamos a ver qué es el destructuring de objetos en JavaScript. Tras ver lo que es, veremos los posibles resultados de una operación de destructuring.
Ya hemos visto en otro tutorial lo que es el destructuring el JavaScript. Sin embargo, en este caso nos centraremos en el destructuring de objetos. Vamos a proponer el siguiente objeto a modo de ejemplo:
const usuario = {
nombre: 'Edu',
apellido: 'Lazaro',
edad: 35
}
Gracias al destructuring podemos extraer aquellas propiedad del objeto que queramos y asiganarlas a las varaibles que definamos:
const { nombre, edad } = usuario;
El orden en el que definamos las variables no importa demasiado; lo que sí importa es el nombre de las varaibles, que tendrá que ser equivalente al de las propiedades del objeto que queremos extraer. Por ejemplo, si ahora hacemos un console.log()
de las constantes nombre
y edad
, debería mostrarse en la consola tanto el nombre del usuario como su edad:
console.log(nombre); // 'Edu'
console.log(edad); // 35
En caso de que quieras asignar un nombre diferente a las constantes o a las variables, tendrás que realizar la asignación de la variables que quieres obtener al resultado de la operación de destructuring:
const { nick: nombre, edad } = usuario;
Como ves, hemos reemplazado la variable nombre
que hemos obtenido tras la operación de destructuring a la variable nick
. La variable nick
contendrá la propiedad nombre del objeto usuario
:
console.log(nick); // 'Edu'
Y esto ha sido todo.