La destructuración o destructuring es una práctica muy utilizada en Javascript, llegó con ES6, y es una nueva forma de asignar valores sobretodo a arrays y objetos. Si estamos en el mundo de Javascript utilizando librerías o framewords como Angular, React o Vue, seguramente hayas utilizado este tipo de sintaxis en la cual asignas dinámicamente lo que viene en un array o un objeto a nuevas variables de una manera más ágil.
Veamos un ejm con un array.
Ejm
const numeros = [1, 2, 3]; // Sin usar destructuración let uno = numeros[0]; let dos = numeros[1]; let tres = numeros[2]; console.log(uno, dos, tres); // Usando destructuring const [one, two, three] = numeros; console.log(one, two, three);
Veamos otro ejm con un objeto.
Ejm
const persona = {
nombre: "Francisco",
apellido: "Paredes",
edad: 51,
};
// Destructuramos persona
const { nombre, apellido, edad } = persona;
console.log(nombre, apellido, edad);Para que la destructuración funcione en los objetos, es muy importante que la variable que estamos creando con la técnica de destructuring tenga el mismo nombre que la propiedad que pretendemos aislar en una dicha variable, de lo contrario marcará un error. El orden en que pongamos las variables con esta técnica es opcional mientras que entendamos que el nombre de la variable que estamos creando debe ser igual al de la propiedad de nuestro objeto.