🪚Desestructuración

La desestructuración en JavaScript es una forma conveniente de extraer valores de arreglos o propiedades de objetos y asignarlos a variables.

La desestructuración de arreglos te permite extraer valores de un arreglo y asignarlos a variables de manera ordenada.

// Ejemplo de desestructuración de un arreglo
const frutas = ["🍎", "🍌", "🍇"];
const [manzana, banana, uva] = frutas;

console.log(manzana); // "🍎"
console.log(platano);  // "🍌"
console.log(uva);     // "🍇"

Aquí estamos declarando un arreglo llamado frutas que contiene tres elementos: una manzana ("🍎"), un platano ("🍌") y una uva ("🍇").

Estamos utilizando la sintaxis de desestructuración para extraer los valores del array frutas y asignarlos a las variables manzana, platano y uva. Veamos qué pasa exactamente:

• manzana toma el valor del primer elemento del arreglo frutas, que es "🍎".

• platano toma el valor del segundo elemento del arreglo frutas, que es "🍌".

• uva toma el valor del tercer elemento del arreglo frutas, que es "🍇".

const manzana = frutas[0];
const banana = frutas[1];
const uva = frutas[2];

📦 Desestructuración de Objetos

La desestructuración de objetos te permite extraer propiedades de un objeto y asignarlas a variables con el mismo nombre que las propiedades.

// Ejemplo de desestructuración de un objeto
const persona = {
  nombre: "Laura",
  edad: 25,
  ciudad: "Madrid"
};
const { nombre, edad, ciudad } = persona;

console.log(nombre); // "Laura"
console.log(edad);   // 25
console.log(ciudad); // "Madrid"

🔄 Asignar Nuevos Nombres a las Variables

// Ejemplo de asignación de nuevos nombres
const usuario = {
  nombre: "Laura",
  edad: 25
};
const { nombre: nombreUsuario, edad: edadUsuario } = usuario;

console.log(nombreUsuario); // "Laura"
console.log(edadUsuario);   // 25

🆓 Valores por Defecto

Puedes establecer valores por defecto para las variables en caso de que las propiedades no existan en el objeto.

// Ejemplo con valores por defecto
const producto = {
  nombre: "Laptop"
};
const { nombre, precio = 1000 } = producto;

console.log(nombre); // "Laptop"
console.log(precio); // 1000 (valor por defecto)

❓ Pregunta: ¿El Objeto producto Cambia?

No, el objeto producto no cambia. La desestructuración con valores por defecto solo afecta a las variables que se crean durante la desestructuración, no modifica el objeto original. El objeto producto sigue siendo el mismo después de la desestructuración.

🔄 Desestructuración Anidada

// Ejemplo de desestructuración anidada
const persona = {
  nombre: "Laura",
  direccion: {
    ciudad: "Madrid",
    pais: "España"
  }
};
const { nombre, direccion: { ciudad, pais } } = persona;

console.log(nombre);  // "Laura"
console.log(ciudad);  // "Madrid"
console.log(pais);    // "España"

📦 Desestructuración de Parámetros

// Ejemplo con parámetros opcionales y valores por defecto
function crearUsuario({ nombre, edad, activo = true } = {}) {
  console.log(`Nombre: ${nombre}`);
  console.log(`Edad: ${edad}`);
  console.log(`Activo: ${activo}`);
}

crearUsuario({ nombre: "Laura", edad: 25 }); // Nombre: Laura, Edad: 25, Activo: true
crearUsuario(); // Sin parámetros, usando valores por defecto