Scribd
Carregar
9 visualizações

JavascriptAvançado Destructuring Assignment

Este documento explica como usar a ferramenta de Destructuring Assignment no JavaScript para facilitar a extração de dados de arrays e objetos de forma concisa. Ele mostra exemplos de como desestruturar arrays e objetos para isolar somente os dados desejados em variáveis.

Enviado por

chacara.vidaedescanso
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
9 visualizações

JavascriptAvançado Destructuring Assignment

Este documento explica como usar a ferramenta de Destructuring Assignment no JavaScript para facilitar a extração de dados de arrays e objetos de forma concisa. Ele mostra exemplos de como desestruturar arrays e objetos para isolar somente os dados desejados em variáveis.

Enviado por

chacara.vidaedescanso
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 4

Materiais de… / ...

/ Destructuring … Criado com o

Destructuring Assignment

Essa ferramenta do JavaScript nos ajuda a desestruturar objetos e arrays.


Como assim ?

Basicamente podemos retirar de dentro de um array ou objeto somente o que queremos, de forma
simples e fácil.

Vamos ver na prática.

Arrays

Antigamente, quando queríamos retirar uma informação de uma array, fazíamos da seguinte
forma:

JavaScript

const nomes = ['joao', 'maria', 'josé']; // mode antigo const pessoa1 = vehicle
s[0]; const pessoa2 = vehicles[1]; const pessoa3 = vehicles[2];

Agora com o Destructuring

JavaScript

const nomes = ['joao', 'maria', 'josé']; const [pessoa1, pessoa2, pessoa3] = no


mes;
Ou seja, ele criou automaticamente 3 variáveis, e em cada uma, ele guardou uma posição do
nosso array.

Mas e se eu não quisesse guardar tudo ? Podemos fazer desse jeito.

JavaScript

const nomes = ['joao', 'maria', 'josé']; const [pessoa1,, pessoa3] = nomes;

Dessa forma, ele vai só criar 2 variáveis, uma com o nome joao e outra com o nome josé.

Podemos juntar o Destructuring Assignment ao Spread Operator também.

JavaScript

const numbers = ['one', 'two', 'three', 'four']; const [x, ...y] = newArray; co
nsole.log(x); // one console.log(y); // ["two", "three", "four"]

Ele criou uma variável x com somente o primeiro valor do array, e os demais itens do array
colocamos dentro da variável y com o auxílio do spread operator .

Objetos

Antigamente, quando queríamos tirar informações de um Objeto, fazíamos da seguinte forma:

JavaScript

const user = { name: 'Mary', age: 32, gender: 'female' } let name = user.name;
let age = user.age; let gender = user.gender; console.log(name); // Mary consol
e.log(age); // 32 console.log(gender); // female
Já com o Destructuring Assignment conseguimos facilitar esse processo:

JavaScript

const user = { name: 'Mary', age: 32, gender: 'female' } //Destructuring


Assignment na prática let { name, age, gender } = user; console.log(name); //
Mary console.log(age); // 32 console.log(gender); // female

Ou seja, eu criei 3 variáveis e guardei os valores do meu objeto nelas.

DETALHE IMPORTANTE : O nome da variável criada, tem que ser SEMPRE o mesmo da chave no
nosso objeto.

Exemplo:

JavaScript

const user = { name: 'Mary', age: 32, gender: 'female' } let {name1, age, gende
r} = user; console.log(name1); // undefined console.log(age); // 32 console.log
(gender); // female

Se você quer criar uma variável com o nome diferente da chave do Objeto, você tem que fazer
assim:

JavaScript

const user = { name: 'Mary', age: 32, gender: 'female' } let { name: name1, ag
e:age1, gender: gender1 } = user; console.log(name1); // Mary console.log(age
1); // 32 console.log(gender1); // female

Aqui, ele pegou o valor de dentro do objeto e criou novas variáveis com os nomes desejados.
Também podemos utilizar o spread operator para nos ajudar por aqui:

JavaScript

const user = { name: 'Mary', age: 32, gender: 'female' } let { name, ...rest }
= person; console.log(name); // Mary console.log(rest); // {age: 32, gender:
"female"}

Também podemos navegar mais profundamente nos objetos para obter os dados que queremos e
gravá-los em uma variável.

JavaScript

const user = { name: 'John', age: 31, hobbies: { read: true, playGame: true } }
const {name, hobbies: {read, playGame}} = user; console.log(name); // John cons
ole.log(read); // true console.log(playGame); // true

Você também pode gostar