18/03/2024, 21:46 Atribuição via desestruturação (destructuring assignment) - JavaScript | MDN

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

Atribuição via desestruturação (destructuring assignment)

A sintaxe de atribuição via desestruturação (destructuring assignment) é uma expressão JavaScript que possibilita extrair dados de
arrays ou objetos em variáveis distintas.

Sintaxe
JS

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 - não implementado em Firefox 47a01

({ a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 });

Descrição
As expressões de objeto e matriz literais fornecem uma maneira fácil de criar pacotes ad hoc de dados .
JS

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

A atribuição via desestruturação usa sintaxe similar, mas no lado esquerdo da atribuição são definidos quais elementos devem ser
extraídos da variável de origem.
JS

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.

Desestruturação de array
Atribuição básica de variável
JS

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

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment 1/7
18/03/2024, 21:46 Atribuição via desestruturação (destructuring assignment) - JavaScript | MDN
var [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"

Atribuição separada da declaração

Uma variável pode ter seu valor atribuído via desestruturação separadamente da declaração dela.
JS

var a, b;

[a, b] = [1, 2];

console.log(a); // 1
console.log(b); // 2

Valores padrão
Uma variável pode ser atribuída de um padrão, no caso em que o valor retirado do array é undefined.
JS

var a, b;

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

Trocando variáveis
Os valores de duas variáveis podem ser trocados em uma expressão de desestruturação.
Sem atribuição via desestruturação, trocar dois valores requer uma variável temporária (ou, em algumas linguagens de baixo nível, o
Algoritmo XOR Swap ).
JS

var a = 1;
var b = 3;

[a, b] = [b, a];

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

Analisando um array retornado de uma função

Sempre foi possível retornar uma matriz de uma função. A desestruturação pode tornar mais conciso o trabalho com um valor de retorno
do tipo array.
Neste exemplo, f() retorna os valores [1, 2] como saída, que podem ser analisados em uma única linha com desestruturação.
JS

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

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

Ignorando alguns valores retornados

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment 2/7
18/03/2024, 21:46 Atribuição via desestruturação (destructuring assignment) - JavaScript | MDN

Você pode ignorar valores retornados que você não tem interesse:
JS

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

var [a, , b] = f();

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

Você também pode ignorar todos os valores retornados:

JS

[, ,] = f();

Atribuindo o resto de um array para uma variável

Ao desestruturar um array, você pode atribuir a parte restante deste em uma viáriável usando o padrão rest:
JS

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

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

Extraindo valores do resultado de uma expressão regular

Quando o método de expressão regular exec() encontra um resultado, ele retorna um array que contém primeiro toda a porção resultante
da string e depois cada uma das porções da string resultante envolvidas por parênteses na expressão regular. A atribuição via
desestruturação lhe permite extrair as partes desses array facilmente, ignorando a porção resultante completa se não precisar.
JS

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"

Desestruturação de objeto
Atribuição básica
JS

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

var { p, q } = o;

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

Atribuição sem declaração

Uma variável pode ter seu valor atribuído via desestruturação separadamente da sua declaração.
JS

var a, b;

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

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment 3/7
18/03/2024, 21:46 Atribuição via desestruturação (destructuring assignment) - JavaScript | MDN

Nota: Os parênteses ( ... ) ao redor da declaração de atribuição é uma sintaxe necessária quando se utiliza a atribuição via
desestruturação de objeto literal sem uma declaração.
{a, b} = {a:1, b:2} não é uma sintaxe stand-alone válida, pois {a, b} no lado esquerdo é considarada um bloco, não um objeto

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

Atribuição para variáveis com novos nomes

Uma variável pode ser extraída de um objeto e atribuída a uma variável com um nome diferente da propriedade do objeto.
JS

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

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

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

Valores padrão
Uma variável pode ser atribuída de um padrão, no caso em que o valor retirado do objeto é undefined.
JS

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

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

Definindo um valor padrão de parâmetro de função

Versão ES5
JS

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,
});

Versão ES2015
JS

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 },

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment 4/7
18/03/2024, 21:46 Atribuição via desestruturação (destructuring assignment) - JavaScript | MDN
radius: 30,
});

Objeto aninhado e desestruturação de array

JS

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 iteração e desestruturação

JS

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 parâmetro de função

JS

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment 5/7
18/03/2024, 21:46 Atribuição via desestruturação (destructuring assignment) - JavaScript | MDN
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 desestruturação
Nomes computados de propriedades, como em objetos literais, podem ser usados com desestruturação.
JS

let key = "z";

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

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

Especificações
Specification
ECMAScript Language Specification
# sec-destructuring-assignment
ECMAScript Language Specification
# sec-destructuring-binding-patterns

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
diordnA rof xoferiF
diordnA emorhC

diordnA arepO
emorhC

xoferiF

arepO

irafaS
egdE

Destructuring Chrome 49 Edge 14 Firefox 41 Opera 36 Safari 8 Chrome 49 Firefox 41 Oper

assignment Android for Andro
Android

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment 6/7
18/03/2024, 21:46 Atribuição via desestruturação (destructuring assignment) - JavaScript | MDN

diordnA rof xoferiF

diordnA emorhC

diordnA arepO
emorhC

xoferiF

arepO

irafaS
egdE
Computed Chrome 49 Edge 14 Firefox 41 Opera 36 Safari 10 Chrome 49 Firefox for 41 Oper
property Android Android Andro
names
Chrome 49 Edge 16 Firefox 41 Opera 36 Safari 9.1 Chrome 49 Firefox for 41 Oper
Rest in arrays Android Android Andro

Rest in Chrome 60 Edge 79 Firefox 55 Opera 47 Safari 11.1 Chrome 60 Firefox for 55 Oper
objects Android Android Andro
Tip: you can click/tap on a cell for more information.
Full support See implementation notes.

Notas específicas do Firefox

O Firefox forneceu uma extensão não-padronizada de linguagem em JS1.7 para desestruturação. Esta extensão foi removida no
Gecko 40. Consulte Erro do Firefox 1083498 .
A partir do Gecko 41 e para cumprir com a especificação ES2015, padrões de desestruturação com parênteses, como ([a, b]) = [1,
2] or ({a, b}) = { a: 1, b: 2 } , agora são considerados inválidos e lançarão um SyntaxError (en-US). Veja a postagem no blog de Jeff

Walden e Erro do Firefox 1146136 para mais detalhes.

Veja também
Operadores de Atribuição (en-US)
"ES6 in Depth: Destructuring" on hacks.mozilla.org (em inglês)

Help improve MDN

Was this page helpful to you?
Yes No
Learn how to contribute.
This page was last modified on 8 de nov. de 2023 by MDN contributors.

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment 7/7