Destructuring Assignment Use o Notion de gra
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 = vehicles[0];
const pessoa2 = vehicles[1]; const pessoa3 = vehicles[2];
Agora com o Destructuring
JavaScript
const nomes = ['joao', 'maria', 'josé']; const [pessoa1, pessoa2, pessoa3] = nomes;
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; console.
log(x); // one [Link](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 = [Link]; let ag
e = [Link]; let gender = [Link]; [Link](name); // Mary [Link](age);
// 32 [Link](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; [Link](name); // Mary
[Link](age); // 32 [Link](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, gender} = u
ser; [Link](name1); // undefined [Link](age); // 32 [Link](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, age:age1,
gender: gender1 } = user; [Link](name1); // Mary [Link](age1); // 32 consol
[Link](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; [Link](name); // Mary [Link](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; [Link](name); // John [Link](rea
d); // true [Link](playGame); // true