Atribuio via desestruturao (destructuring assignment)

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.

See full compatibility
Learn more

A sintaxe de atribuio via desestruturao (destructuring assignment) uma expresso JavaScript que possibilita extrair dados de arrays ou objetos em variveis distintas.

Sintaxe

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

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

({ a, b } = { a: 1, b: 2 });
console.log(a); // 1
console.log(b); // 2

// ES2016 - no implementado em Firefox 47a01
({ a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 });

Descrio

As expresses de objeto e matriz literais fornecem uma maneira fcil de criar pacotes ad hoc de dados .

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

A atribuio via desestruturao usa sintaxe similar, mas no lado esquerdo da atribuio so definidos quais elementos devem ser extrados da varivel de origem.

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

Esse recurso semelhante aos recursos presentes em linguagens como Perl e Python.

Desestruturao de array

Atribuio bsica de varivel

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

var [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"

Atribuio separada da declarao

Uma varivel pode ter seu valor atribudo via desestruturao separadamente da declarao dela.

var a, b;

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

Valores padro

Uma varivel pode ser atribuda de um padro, no caso em que o valor retirado do array undefined.

var a, b;

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

Trocando variveis

Os valores de duas variveis podem ser trocados em uma expresso de desestruturao.

Sem atribuio via desestruturao, trocar dois valores requer uma varivel temporria (ou, em algumas linguagens de baixo nvel, o Algoritmo XOR Swap).

var a = 1;
var b = 3;

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

Analisando um array retornado de uma funo

Sempre foi possvel retornar uma matriz de uma funo. A desestruturao pode tornar mais conciso o trabalho com um valor de retorno do tipo array.

Neste exemplo, f() retorna os valores [1, 2] como sada, que podem ser analisados em uma nica linha com desestruturao.

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

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

Ignorando alguns valores retornados

Voc pode ignorar valores retornados que voc no tem interesse:

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

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

Voc tambm pode ignorar todos os valores retornados:

[, ,] = f();

Atribuindo o resto de um array para uma varivel

Ao desestruturar um array, voc pode atribuir a parte restante deste em uma virivel usando o padro rest:

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

Extraindo valores do resultado de uma expresso regular

Quando o mtodo de expresso regular exec() encontra um resultado, ele retorna um array que contm primeiro toda a poro resultante da string e depois cada uma das pores da string resultante envolvidas por parnteses na expresso regular. A atribuio via desestruturao lhe permite extrair as partes desses array facilmente, ignorando a poro resultante completa se no precisar.

var url = "https://developer.mozilla.org/pt-BR/Web/JavaScript";

var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
console.log(parsedURL); // ["https://developer.mozilla.org/pt-BR/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]

var [, protocol, fullhost, fullpath] = parsedURL;

console.log(protocol); // "https"

Desestruturao de objeto

Atribuio bsica

var o = { p: 42, q: true };
var { p, q } = o;

console.log(p); // 42
console.log(q); // true

Atribuio sem declarao

Uma varivel pode ter seu valor atribudo via desestruturao separadamente da sua declarao.

var a, b;

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

Nota: Os parnteses ( ... ) ao redor da declarao de atribuio uma sintaxe necessria quando se utiliza a atribuio via desestruturao de objeto literal sem uma declarao.

{a, b} = {a:1, b:2} no uma sintaxe stand-alone vlida, pois {a, b} no lado esquerdo considarada um bloco, no um objeto literal.

No entanto, ({a, b} = {a:1, b:2}) valida, assim como var {a, b} = {a:1, b:2}

Atribuio para variveis com novos nomes

Uma varivel pode ser extrada de um objeto e atribuda a uma varivel com um nome diferente da propriedade do objeto.

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

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

Valores padro

Uma varivel pode ser atribuda de um padro, no caso em que o valor retirado do objeto undefined.

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

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

Definindo um valor padro de parmetro de funo

Verso ES5

function drawES5Chart(options) {
  options = options === undefined ? {} : options;
  var size = options.size === undefined ? "big" : options.size;
  var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;
  var radius = options.radius === undefined ? 25 : options.radius;
  console.log(size, cords, radius);
  // now finally do some chart drawing
}

drawES5Chart({
  cords: { x: 18, y: 30 },
  radius: 30,
});

Verso ES2015

function drawES2015Chart({
  size = "big",
  cords = { x: 0, y: 0 },
  radius = 25,
} = {}) {
  console.log(size, cords, radius);
  // do some chart drawing
}

drawES2015Chart({
  cords: { x: 18, y: 30 },
  radius: 30,
});

Objeto aninhado e desestruturao de array

var metadata = {
  title: "Scratchpad",
  translations: [
    {
      locale: "de",
      localization_tags: [],
      last_edit: "2014-04-14T08:43:37",
      url: "/de/docs/Tools/Scratchpad",
      title: "JavaScript-Umgebung",
    },
  ],
  url: "/pt-BR/docs/Tools/Scratchpad",
};

var {
  title: englishTitle,
  translations: [{ title: localeTitle }],
} = metadata;

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

For de iterao e desestruturao

var 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 (var {
  name: n,
  family: { father: f },
} of people) {
  console.log("Name: " + n + ", Father: " + f);
}

// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"

Extraindo campos de objetos passados como parmetro de funo

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

function whois({ displayName: displayName, fullName: { firstName: name } }) {
  console.log(displayName + " is " + name);
}

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

console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"

Isso extrai o id, displayName e firstName do objeto user e os imprime na tela.

Nomes computados de propriedade de objeto e desestruturao

Nomes computados de propriedades, como em objetos literais, podem ser usados com desestruturao.

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

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

Especificaes

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

Compatibilidade com navegadores

Notas especficas do Firefox

O Firefox forneceu uma extenso no-padronizada de linguagem em JS1.7 para desestruturao. Esta extenso foi removida no Gecko 40. Consulte Erro do Firefox 1083498.
A partir do Gecko 41 e para cumprir com a especificao ES2015, padres de desestruturao com parnteses, como ([a, b]) = [1, 2] or ({a, b}) = { a: 1, b: 2 }, agora so considerados invlidos e lanaro um SyntaxError. Veja a postagem no blog de Jeff Walden e Erro do Firefox 1146136 para mais detalhes.

Veja tambm

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 16 de mar. de 2025 by MDN contributors.

View this page on GitHub Report a problem with this content

Atribuio via desestruturao (destructuring assignment)

In this article

Verso ES5

Verso ES2015

Help improve MDN