4 ‐ Deconstrucción de variables - Jabes-Gonzalez/Checkpoint-8 GitHub Wiki
La deconstrucción de variables (o destructuring) es una característica introducida en ES6 que permite extraer valores de arrays, objetos, strings, maps y otros iterables, asignándolos a variables individuales de manera concisa y legible. Esta técnica es ampliamente utilizada en el desarrollo moderno de JavaScript por su claridad, eficiencia y versatilidad, es una sintaxis especial que permite “desempaquetar” valores de estructuras de datos (arrays, objetos, etc.) en variables independientes, simplificando la asignación y el acceso a datos.
Deconstrucción de Arrays
Permite extraer valores de un array y asignarlos a variables en una sola línea.
Ejemplo básico:
const numeros = [10, 20, 30];
const [a, b, c] = numeros;
console.log(a); // 10
console.log(b); // 20
console.log(c); // 30
Extrae los valores del array en variables individuales.
Saltando valores:
const colores = ["rojo", "verde", "azul", "amarillo"];
const [primero, , tercero] = colores;
console.log(primero); // "rojo"
console.log(tercero); // "azul"
Se omite el segundo elemento usando una coma vacía.
Valores por defecto:
const [x = 5, y = 7] = [1];
console.log(x); // 1
console.log(y); // 7
Si el valor no existe, se asigna el valor por defecto.
Operador rest (...):
const [head, ...resto] = [1, 2, 3, 4];
console.log(head); // 1
console.log(resto); // [2, 3, 4]
Captura el resto de los elementos en un nuevo array.
Intercambio de variables:
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1
Permite intercambiar valores sin variable temporal.
Deconstrucción de Objetos
Permite extraer propiedades de un objeto y asignarlas a variables con el mismo nombre.
Ejemplo básico:
const persona = { nombre: "Ana", edad: 28, ciudad: "Madrid" };
const { nombre, edad } = persona;
console.log(nombre); // "Ana"
console.log(edad); // 28
Extrae propiedades directamente en variables.
Asignar a variables con nombre diferente (alias):
const user = { id: 42, activo: true };
const { id: identificador, activo: status } = user;
console.log(identificador); // 42
console.log(status); // true
Permite renombrar variables al extraer propiedades.
Valores por defecto:
const { nombre, pais = "España" } = { nombre: "Luis" };
console.log(nombre); // "Luis"
console.log(pais); // "España"
Asigna un valor por defecto si la propiedad no existe.
Extraer propiedades anidadas:
const usuario = { info: { nombre: "Sara", edad: 25 } };
const { info: { nombre, edad } } = usuario;
console.log(nombre); // "Sara"
console.log(edad); // 25
Permite acceder a propiedades dentro de objetos anidados.
Deconstrucción en Funciones
Permite extraer valores directamente de los parámetros de una función, facilitando la lectura y el acceso a datos.
Parámetros de objeto:
function mostrarUsuario({ nombre, edad }) {
console.log(nombre, edad);
}
const usuario = { nombre: "Ana", edad: 30 };
mostrarUsuario(usuario); // "Ana 30"
Acceso directo a propiedades del objeto recibido.
Parámetros de array:
function sumar([a, b]) {
return a + b;
}
console.log(sumar([3, 5])); // 8
Acceso directo a elementos del array recibido.
Deconstrucción de Strings y Otros Iterables
También es posible deconstruir strings y otros iterables como maps y sets.
Ejemplo con string:
const nombre = "Juan";
const [letra1, letra2] = nombre;
console.log(letra1); // "J"
console.log(letra2); // "u"
Cada carácter es asignado a una variable.
Ejemplo con Map:
const frutas = new Map([
["manzana", 100],
["naranja", 200]
]);
for (const [fruta, cantidad] of frutas) {
console.log(fruta, cantidad);
}
Desempaqueta clave y valor en cada iteración.
Deconstrucción Anidada y Compleja
Se pueden combinar deconstrucciones de arrays y objetos, incluso en estructuras anidadas.
const datos = {
usuario: {
nombre: "Ana",
direcciones: ["Madrid", "Barcelona"]
}
};
const {
usuario: {
nombre,
direcciones: [primeraCiudad]
}
} = datos;
console.log(nombre); // "Ana"
console.log(primeraCiudad); // "Madrid"
Acceso a propiedades y elementos anidados en una sola línea.
Beneficios y Buenas Prácticas
- Código más limpio y legible: Menos líneas para extraer datos.
- Evita errores de referencia: No necesitas acceder repetidamente a la estructura original.
- Ideal para trabajar con APIs y frameworks modernos.
- Permite asignar valores por defecto y renombrar variables fácilmente.
Errores Comunes y Advertencias
- Si el valor a deconstruir es undefined o null, lanzará un error al intentar deconstruir un objeto.
- En arrays, si hay menos elementos que variables, las variables restantes serán undefined.
- En objetos, si la propiedad no existe, la variable será undefined salvo que se asigne un valor por defecto.
- No mezcles destructuring de objetos y arrays en la misma expresión a menos que sea una estructura anidada compatible.
- Si el nombre de la variable no coincide con la propiedad, el valor será undefined a menos que uses alias.
La deconstrucción de variables es una herramienta poderosa y moderna en JavaScript que aporta claridad, eficiencia y flexibilidad al manejar datos complejos. Su uso es fundamental en el desarrollo profesional y en la escritura de código limpio y mantenible.
Destructuring en Objetos: Patrones Avanzados
Alias de Propiedades
Puedes extraer una propiedad y asignarla a una variable con un nombre diferente:
const person = { name: 'John', age: 30 };
const { name: fullName, age: years } = person;
console.log(fullName); // 'John'
console.log(years); // 30
Esto es útil para evitar conflictos de nombres o para mayor claridad en el contexto de uso.
Valores por Defecto
Si la propiedad no existe, puedes asignar un valor por defecto:
const { city = 'Desconocida' } = person;
console.log(city); // 'Desconocida'
Evita errores cuando los datos pueden ser incompletos.
Destructuring Anidado
Extrae propiedades de objetos dentro de objetos:
const user = { info: { nombre: 'Ana', edad: 28 } };
const { info: { nombre, edad } } = user;
console.log(nombre); // 'Ana'
console.log(edad); // 28
Muy útil para datos estructurados o respuestas de APIs anidadas.
Destructuring en Arrays: Patrones Avanzados
Destructuring Múltiple y Anidado
Puedes deconstruir arrays dentro de arrays:
const [first, [second], third](/Jabes-Gonzalez/Checkpoint-8/wiki/second],-third) = ['apple', ['banana'], 'orange'](/Jabes-Gonzalez/Checkpoint-8/wiki/'banana'],-'orange');
console.log(first); // 'apple'
console.log(second); // 'banana'
console.log(third); // 'orange'
Ideal para manipular datos complejos, como matrices o resultados de consultas anidadas.
Valores por Defecto en Arrays
const [a = 1, b = 2, c = 3] = [10];
console.log(a, b, c); // 10 2 3
Rest Operator en Arrays
const [head, ...tail] = [1, 2, 3, 4];
console.log(head); // 1
console.log(tail); // [2, 3, 4]
Permite capturar el resto de los elementos en una sola variable.
Destructuring en Parámetros de Función
Objetos como Parámetros
function crearUsuario({ nombre, edad = 18 }) {
return `${nombre} tiene ${edad} años`;
}
console.log(crearUsuario({ nombre: 'Luis' })); // 'Luis tiene 18 años'
Facilita la definición de funciones con muchos parámetros opcionales.
Arrays como Parámetros
function sumar([a, b]) {
return a + b;
}
console.log(sumar([2, 3])); // 5
Retorno de Funciones y Destructuring
Cuando una función retorna un objeto o array, puedes extraer directamente los valores que te interesan:
function getPerson() {
return { name: 'Pepe', age: 26, hobbies: ['chess', 'running'] };
}
const { name, hobbies } = getPerson();
console.log(name); // 'Pepe'
console.log(hobbies); // ['chess', 'running']
Hace el código más limpio y enfocado en los datos relevantes.
Destructuring Múltiple y Combinado
Puedes combinar destructuring de objetos y arrays en una sola expresión:
const datos = {
usuario: { nombre: 'Ana', direcciones: ['Madrid', 'Barcelona'] }
};
const {
usuario: { nombre, direcciones: [primeraCiudad] }
} = datos;
console.log(nombre); // 'Ana'
console.log(primeraCiudad); // 'Madrid'
Permite acceder a datos profundamente anidados de forma directa.