Desestruturao de arrays e objetos em JavaScript

Prévia do material em texto

Desestruturação de arrays e objetos em JavaScript 1
Desestruturação de arrays e 
objetos em JavaScript
A atribuição por desestruturação (destructuring assignment) foi introduzido para facilitar 
a manipulação e o acesso a elementos de arrays e propriedades de objetos no 
JavaScript. Usando a sintaxe de atribuição via desestruturação, podemos extrair dados 
de arrays ou objetos em variáveis distintas.
atribuição via desestruturação em arrays
Na variável numbers passamos um conjunto de dados que poderiam ser acessados da 
forma comum, passando a posição de cada dado.
const numbers = [1, 2, 3, 4, 5]
Exemplo:
Desestruturação de arrays e objetos em JavaScript 2
const num1 = numbers[0] 
const num2 = numbers[1] 
 
console.log(num1) //1 
console.log(num2) //2
Mas, dessa forma, ficamos limitados a acessar cada dado de forma individual. Mas e 
se quisermos extrair mais de uma valor na mesma declaração?
Para isso usamos a seguinte sintaxe:
const numbers = [1, 2, 3, 4, 5] 
 
const [num1, num2] = numbers 
 
console.log(num1) //1 
console.log(num2) //2
Dessa forma, podemos extrair os dois primeiros valores e atribuir as suas respectivas 
variávies na mesma linha. 
Também podemos ignorar algum valor que não temos interesse usando a virgula.
Nesse exemplo, vamos ignorar o valor 2 que está na posição 1
const numbers = [1, 2, 3, 4, 5] 
 
const [num1, ,num3] = numbers 
 
console.log(num1) //1 
console.log(num3) //3
Usando essa sintaxe, o valor da posição 1 foi ignorado.
Você também pode atribuir o restante dos valores em uma variável usando padrão rest 
(…)
Desestruturação de arrays e objetos em JavaScript 3
const numbers = [1, 2, 3, 4, 5] 
 
const [num1, ...numT] = numbers 
 
console.log(num1) //1 
console.log(numT) //[2, 3, 4, 5]
podemos usar a atribuição de desestruturação para alternar valores de variáveis:
let a = 3; 
let b = 6; 
 
[a,b] = [b,a]; 
 
console.log(a); //6 
console.log(b); //3
atribuição via desestruturação em objetos
A desestruturação em objetos funciona de forma similar a feita com arrays, a difereça é 
que precisamos passar um nome que exista como propriedade do objeto. 
Nesse exemplo, name é uma propriedade existente no objeto person , assim, nós 
extraimos apenas o name do objeto e fizemos com que ele se tornasse uma variável
const person = { name: "Leonardo", age: 21, tall: 170} 
 
const { name } = person 
 
console.log(name) //leonardo
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.
const person = { name: "Leonardo", age: 21, tall: 170} 
 
Desestruturação de arrays e objetos em JavaScript 4
const { name: firstName } = person 
 
console.log(firstName) //leonardo
const person = { 
 name: "Alice", 
 age: 30, 
 address: { 
 street: "123 Main St", 
 city: "New York", 
 country: "USA" 
 } 
}; 
 
var { name, address: { city, country } } = person; 
 
console.log(name); // "Alice" 
console.log(city); // "New York" 
console.log(country); // "USA"
var employee = { 
 id: 123, 
 name: "John Doe", 
 department: "IT", 
 experience: { 
 years: 5, 
 skills: ["JavaScript", "HTML", "CSS", "React"] 
 }, 
 projects: [ 
 { name: "Project A", duration: "6 months" }, 
 { name: "Project B", duration: "3 months" }, 
 { name: "Project C", duration: "9 months" } 
 ], 
 address: { 
 street: "456 Elm St", 
 city: "San Francisco", 
 country: "USA" 
 } 
}; 
 
Desestruturação de arrays e objetos em JavaScript 5
var { 
 name, 
 department, 
 experience: { years, skills }, 
 projects: [projectA, projectB, projectC], 
 address: { city: employeeCity, country } 
} = employee; 
 
console.log(name); // "John Doe" 
console.log(department); // "IT" 
console.log(years); // 5 
console.log(skills); // ["JavaScript", "HTML", "CSS", "React"] 
console.log(projectA); // { name: "Project A", duration: "6 months" } 
console.log(projectB); // { name: "Project B", duration: "3 months" } 
console.log(projectC); // { name: "Project C", duration: "9 months" } 
console.log(employeeCity); // "San Francisco" 
console.log(country); // "USA"