La desestructuracin

Baseline Widely available

This feature is well established and works across many devices and browser versions. Its been available across browsers since agosto de 2016.

Learn more
See full compatibility

La sintaxis de desestructuracin es una expresin de JavaScript que permite desempacar valores de arreglos o propiedades de objetos en distintas variables.

Prubalo

let a, b, rest;
[a, b] = [10, 20];

console.log(a);
// Expected output: 10

console.log(b);
// Expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// Expected output: Array [30, 40, 50]

Sintaxis

let a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20

// Propuesta de etapa 4 (terminada)
({ a, b, ...rest } = { a: 10, b: 20, c: 30, d: 40 });
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

Descripcin

Las expresiones de objetos y arreglos literales proporcionan una manera fcil de crear paquetes de datos ad hoc.

const x = [1, 2, 3, 4, 5];

La desestructuracin utiliza una sintaxis similar, pero en el lado izquierdo de la asignacin para definir qu valores desempacar de la variable origen.

const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log(y); // 1
console.log(z); // 2

Esta capacidad es similar a las caractersticas presentes en lenguajes como Perl y Python.

Ejemplos

Desestructuracin de arreglos

Asignacin bsica de variables

const foo = ["one", "two", "three"];

const [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

Asignacin separada de la declaracin

A una variable se le puede asignar su valor mediante una desestructuracin separada de la declaracin de la variable.

let a, b;

[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

Valores predeterminados

A una variable se le puede asignar un valor predeterminado, en el caso de que el valor desempacado del arreglo sea undefined.

let a, b;

[a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7

Intercambio de variables

Los valores de dos variables se pueden intercambiar en una expresin de desestructuracin.

Sin desestructurar la asignacin, intercambiar dos valores requiere una variable temporal (o, en algunos lenguajes de bajo nivel, el algoritmo del truco XOR-swap).

let a = 1;
let b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

const arr = [1, 2, 3];
[arr[2], arr[1]] = [arr[1], arr[2]];
console.log(arr); // [1,3,2]

Analizar un arreglo devuelto por una funcin

Siempre ha sido posible devolver un arreglo desde una funcin. La desestructuracin puede hacer que trabajar con un valor de retorno de arreglo sea ms conciso.

En este ejemplo, f() devuelve los valores [1, 2] como su salida, que se puede procesar en una sola lnea con desestructuracin.

function f() {
  return [1, 2];
}

let a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2

Ignorar algunos valores devueltos

Puedes ignorar los valores de retorno que no te interesan:

function f() {
  return [1, 2, 3];
}

const [a, , b] = f();
console.log(a); // 1
console.log(b); // 3

const [c] = f();
console.log(c); // 1

Tambin puedes ignorar todos los valores devueltos:

[, ,] = f();

Asignar el resto de un arreglo a una variable

Al desestructurar un arreglo, puedes desempacar y asignar la parte restante a una variable usando el patrn rest o:

const [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]

Ten en cuenta que se lanzar un SyntaxError si se usa una coma final en el lado derecho con un elemento rest o:

const [a, ...b,] = [1, 2, 3];

// SyntaxError: el elemento rest no puede tener una coma al final
// Siempre considera usar el operador rest como ltimo elemento

Desempacar valores coincidentes con una expresin regular

Cuando el mtodo de expresin regular exec() encuentra una coincidencia, devuelve un arreglo que contiene primero toda la parte coincidente de la cadena y luego las partes de la cadena que coinciden con cada grupo entre parntesis en la expresin regular. La desestructuracin te permite desempacar fcilmente las partes de este arreglo, ignorando la coincidencia completa si no es necesaria.

function parseProtocol(url) {
  const parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
  if (!parsedURL) {
    return false;
  }
  console.log(parsedURL);
  // ["https://developer.mozilla.org/es/Web/JavaScript",
      "https", "developer.mozilla.org", "es/Web/JavaScript"]

  const [, protocol, fullhost, fullpath] = parsedURL;
  return protocol;
}

console.log(parseProtocol('https://developer.mozilla.org/es/Web/JavaScript'));
// "https"

Desestructuracin de objetos

Asignacin bsica

const user = {
  id: 42,
  is_verified: true,
};

const { id, is_verified } = user;

console.log(id); // 42
console.log(is_verified); // true

Asignacin sin declaracin

A una variable se le puede asignar su valor con desestructuracin separada de su declaracin.

let a, b;

({ a, b } = { a: 1, b: 2 });

Nota: Los parntesis (...) alrededor de la declaracin de asignacin son obligatorios cuando se usa la desestructuracin de un objeto literal sin una declaracin.

{a, b} = {a: 1, b: 2} no es una sintaxis independiente vlida, debido a que {a, b} en el lado izquierdo se considera un bloque y no un objeto literal.

Sin embargo, ({a, b} = {a: 1, b: 2}) es vlido, al igual que const {a, b} = {a: 1, b: 2}

tu expresin ( ... ) debe estar precedida por un punto y coma o se puede usar para ejecutar una funcin en la lnea anterior.

Asignar a nuevos nombres de variable

Una propiedad se puede desempacar de un objeto y asignar a una variable con un nombre diferente al de la propiedad del objeto.

const o = { p: 42, q: true };
const { p: foo, q: bar } = o;

console.log(foo); // 42
console.log(bar); // true

Aqu, por ejemplo, const {p: foo} = o toma del objeto o la propiedad llamada p y la asigna a una variable local llamada foo.

Valores predeterminados

A una variable se le puede asignar un valor predeterminado, en el caso de que el valor desempacado del objeto sea undefined.

const { a = 10, b = 5 } = { a: 3 };

console.log(a); // 3
console.log(b); // 5

Asignar nombres a nuevas variables y proporcionar valores predeterminados

Una propiedad puede ser ambas

Desempacada de un objeto y asignada a una variable con un nombre diferente.
Se le asigna un valor predeterminado en caso de que el valor desempacado sea undefined.

const { a: aa = 10, b: bb = 5 } = { a: 3 };

console.log(aa); // 3
console.log(bb); // 5

Desempacar campos de objetos pasados como parmetro de funcin

const user = {
  id: 42,
  displayName: "jdoe",
  fullName: {
    firstName: "John",
    lastName: "Doe",
  },
};

function userId({ id }) {
  return id;
}

function whois({ displayName, fullName: { firstName: name } }) {
  return `${displayName} es ${name}`;
}

console.log(userId(user)); // 42
console.log(whois(user)); // "jdoe es John"

Esto desempaca el id, displayName y firstName del objeto user y los imprime.

Establecer el valor predeterminado de un parmetro de funcin

function drawChart({
  size = "big",
  coords = { x: 0, y: 0 },
  radius = 25,
} = {}) {
  console.log(size, coords, radius);
  // haz un dibujo de grfico
}

drawChart({
  coords: { x: 18, y: 30 },
  radius: 30,
});

Nota: En la firma de la funcin para drawChart anterior, el lado izquierdo desestructurado se asigna a un objeto literal vaco en el lado derecho: {size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}. Tambin podras haber escrito la funcin sin la asignacin del lado derecho. Sin embargo, si omites la asignacin del lado derecho, la funcin buscar al menos un argumento para ser proporcionado cuando se invoca, mientras que en su forma actual, simplemente puedes llamar a drawChart() sin proporcionar ningn parmetro. El diseo actual es til si deseas poder llamar a la funcin sin proporcionar ningn parmetro, el otro puede ser til cuando deseas asegurarte de que se pase un objeto a la funcin.

Desestructuracin de arreglos y objetos anidados

const metadata = {
  title: "Scratchpad",
  translations: [
    {
      locale: "de",
      localization_tags: [],
      last_edit: "2020-08-29T08:43:37",
      url: "/de/docs/Tools/Scratchpad",
      title: "JavaScript-Umgebung",
    },
  ],
  url: "/es/docs/Tools/Scratchpad",
};

let {
  title: englishTitle, // renombrar
  translations: [
    {
      title: localeTitle, // renombrar
    },
  ],
} = metadata;

console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"

Iteracin "`for...of`" y desestructuracin

const people = [
  {
    name: "Mike Smith",
    family: {
      mother: "Jane Smith",
      father: "Harry Smith",
      sister: "Samantha Smith",
    },
    age: 35,
  },
  {
    name: "Tom Jones",
    family: {
      mother: "Norah Jones",
      father: "Richard Jones",
      brother: "Howard Jones",
    },
    age: 25,
  },
];

for (const {
  name: n,
  family: { father: f },
} of people) {
  console.log("Nombre: " + n + ", Padre: " + f);
}

// "Nombre: Mike Smith, Padre: Harry Smith"
// "Nombre: Tom Jones, Padre: Richard Jones"

Nombres de propiedades de objetos calculados y desestructuracin

Los nombres de propiedad calculados, como en un Objeto literal, se pueden usar con la desestructuracin.

let key = "z";
let { [key]: foo } = { z: "bar" };

console.log(foo); // "bar"

`Rest` en la desestructuracin de objetos

La propuesta Propiedades rest/propagacin para ECMAScript (etapa 4) agrega la sintaxis rest para desestructurar. Las propiedades de rest recopilan las claves de propiedades enumerables restantes que an no han sido seleccionadas por el patrn de desestructuracin.

let { a, b, ...rest } = { a: 10, b: 20, c: 30, d: 40 };
a; // 10
b; // 20
rest; // { c: 30, d: 40 }

Identificador de JavaScript no vlido como nombre de propiedad

La desestructuracin se puede utilizar con nombres de propiedad que no son identificadores vlidos en JavaScript proporcionando un identificador alternativo que sea vlido.

const foo = { "fizz-buzz": true };
const { "fizz-buzz": fizzBuzz } = foo;

console.log(fizzBuzz); // "true"

Desestructuracin combinada de arreglos y objetos

La desestructuracin de arreglos y objetos se puede combinar. Supongamos que deseas manipular el tercer elemento del siguiente arreglo props, y luego deseas la propiedad name en el objeto, puedes hacer lo siguiente:

const props = [
  { id: 1, name: "Fizz" },
  { id: 2, name: "Buzz" },
  { id: 3, name: "FizzBuzz" },
];

const [, , { name }] = props;

console.log(name); // "FizzBuzz"

Se busca la cadena de prototipos al desestructurar el objeto

Al deconstruir un objeto, si no se accede a una propiedad en s misma, continuar buscando a lo largo de la cadena de prototipos.

let obj = { self: "123" };
obj.__proto__.prot = "456";
const { self, prot } = obj;
// self "123"
// prot "456" (Acceso a la cadena de prototipos)

Especificaciones

Specification
ECMAScript 2027 LanguageSpecification # sec-destructuring-assignment
ECMAScript 2027 LanguageSpecification # sec-destructuring-binding-patterns

Compatibilidad con navegadores

Ve tambin

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 29 may 2026 by MDN contributors.

View this page on GitHub Report a problem with this content

La desestructuracin

In this article

Asignacin bsica de variables

Asignacin separada de la declaracin

Valores predeterminados

Intercambio de variables

Analizar un arreglo devuelto por una funcin

Ignorar algunos valores devueltos

Asignar el resto de un arreglo a una variable

Desempacar valores coincidentes con una expresin regular

Asignacin bsica

Asignacin sin declaracin

Asignar a nuevos nombres de variable

Valores predeterminados

Asignar nombres a nuevas variables y proporcionar valores predeterminados

Desempacar campos de objetos pasados como parmetro de funcin

Establecer el valor predeterminado de un parmetro de funcin

Desestructuracin de arreglos y objetos anidados

Iteracin "for...of" y desestructuracin

Nombres de propiedades de objetos calculados y desestructuracin

Rest en la desestructuracin de objetos

Identificador de JavaScript no vlido como nombre de propiedad

Desestructuracin combinada de arreglos y objetos

Se busca la cadena de prototipos al desestructurar el objeto

Help improve MDN

Iteracin "`for...of`" y desestructuracin

`Rest` en la desestructuracin de objetos