What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
La desestructuración en JavaScript permite extraer valores de arrays o propiedades de objetos y asignarlos a variables mediante un patrón. Los arrays se leen por posición; los objetos, por nombre de propiedad. Con esa diferencia clara, puedes usar renombrado, valores por defecto y ...rest sin alterar el dato original.
Qué es la desestructuración en JavaScript
MDN la define como una sintaxis de JavaScript que permite desempaquetar valores de arrays o propiedades de objetos en variables distintas. En lugar de acceder a cada valor por separado, escribes un patrón que indica qué necesitas extraer. La sintaxis está ampliamente disponible en los navegadores desde agosto de 2016, según MDN Web Docs (página modificada el 10 de agosto de 2026).
As an Amazon Associate I earn from qualifying purchases.
De acceso manual a patrón
Estas instrucciones obtienen las mismas propiedades, pero la segunda forma las reúne en una sola declaración:
const point = { x: 3, y: 7 };
const x = point.x;
const y = point.y;
const { x, y } = point;Las llaves se parecen a las de un literal de objeto, pero aquí aparecen en el lado que recibe los valores: el patrón declara variables a partir de propiedades de point.
#1 Best Overall
Desestructuración de arrays e iterables: importa la posición
En un patrón de array, cada variable corresponde a un lugar del iterable. El nombre de la variable no necesita coincidir con ningún nombre del dato:
const colors = ["rojo", "verde", "azul"];
const [first, second] = colors;
// first === "rojo"
// second === "verde"Si no necesitas una posición, déjala vacía entre comas. Si la fuente no tiene suficientes elementos, las variables correspondientes quedan en undefined.
const values = [10, 20, 30];
const [first, , third] = values;
// first === 10
// third === 30El patrón de array requiere un iterable, como un array. Un objeto ordinario con propiedades 0, 1 y length no basta por tener claves numéricas: debe poder iterarse.
Free tools Windows power users keep installed
One-click scans. No signup required.
Rank #2
Desestructuración de objetos: importa el nombre de propiedad
En un patrón de objeto, se extrae una propiedad por su nombre, sin importar el orden en que aparezca en el objeto:
const user = { id: 42, name: "Ana" };
const { id, name } = user;Renombrar la variable local
Usa dos puntos para asignar una propiedad a una variable local con otro nombre. En name: displayName, name identifica la propiedad de origen y displayName es el nombre de la variable; el objeto no se modifica.
const { name: displayName } = user;
// displayName === "Ana"Extraer propiedades anidadas
Puedes anidar patrones para llegar a una propiedad interior:
const account = { profile: { name: "Ana" } };
const { profile: { name } } = account;
// name === "Ana"En este patrón se crea name, no una variable llamada profile. Si el patrón empieza a ocultar qué estructura de datos se espera, extraer primero profile y luego name en otra instrucción puede resultar más legible.
Valores por defecto y datos opcionales
Un valor por defecto se usa cuando el valor extraído es undefined, ya sea porque la propiedad falta o porque su valor es explícitamente undefined. No reemplaza null. La expresión de respaldo solo se evalúa si hace falta.
const { x = 1 } = { x: undefined };
// x === 1
const { x: y = 1 } = { x: null };
// y === nullTambién puedes dar un valor inicial a una posición de array:
Rank #4
const [size = "mediano"] = [];
// size === "mediano"Desestructurar parámetros de función
Un parámetro puede usar un patrón directamente para recibir las propiedades que necesita la función. Si también quieres permitir que se omita el argumento completo, asigna un objeto vacío por defecto al parámetro:
function draw({ size = "big" } = {}) {
return size;
}
draw(); // "big"
draw({}); // "big"
draw({ size: "small" }); // "small"El valor por defecto de size cubre una propiedad ausente o undefined; el = {} exterior cubre una llamada sin argumento. Sin ese valor exterior, desestructurar un argumento undefined o null produce un TypeError. Un valor predeterminado para la propiedad no evita ese error porque el patrón ni siquiera puede leer el objeto.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Usar ...rest para recoger lo que queda
El operador rest en un patrón recoge los elementos o propiedades que no se asignaron antes. Debe ir al final del patrón:
const [first, ...remaining] = ["rojo", "verde", "azul"];
// remaining es ["verde", "azul"]
const record = { id: 7, status: "activo", owner: "Ana" };
const { id, ...details } = record;
// details es { status: "activo", owner: "Ana" }En arrays, remaining es un array nuevo con los elementos restantes. En objetos, details es un objeto nuevo con las propiedades propias enumerables restantes. En ambos casos la copia es superficial: si un valor recogido es un objeto o array, la referencia interna se comparte con la fuente.
Errores frecuentes y cómo evitarlos
- Usar llaves para posiciones o corchetes para propiedades: el patrón de array usa corchetes y posiciones; el de objeto usa llaves y nombres de propiedad.
- Suponer que un valor por defecto reemplaza
null: solo reemplazaundefined; comprueba o tratanullpor separado si es posible en tus datos. - Desestructurar una fuente no válida: el patrón de array necesita un iterable. El patrón de objeto no puede desestructurar
nullniundefined. - Poner elementos después de rest:
...restdebe ser el último elemento del patrón. - Confundir renombrado con modificación:
{ name: displayName }crea un enlace local llamadodisplayName; no cambia la propiedadnamedel objeto.
Reasignar variables con un patrón de objeto
Si las variables ya están declaradas, encierra la asignación entre paréntesis:
let x, y;
const point = { x: 3, y: 7 };
({ x, y } = point);Sin los paréntesis, las llaves al comienzo de una instrucción pueden interpretarse como el inicio de un bloque, no como un patrón de asignación.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
