DeDestructuring

Question 1

What is array destructuring?

Answer 1

Destructuring the array in JavaScript simply meansextracting multiple values from data stored in objects and arrays

Question 2

What is the syntax for array destructuring?

Answer 2

let array = [1,2,3];
const [a, b] = array;

Question 3

how can you skip over values in a destructuring assignment?

Answer 3

you can use multiple commas to skip over specific elements.
let array = [1,2,3];
const [a,, b] = array;

Question 4

How can you collect the rest of the values into a new array?

Answer 4

you can use the rest operator to collect the rest of the values into a new array.

let array = [1,2,3,4,5];
const [a, b, …rest] = array;

Question 5

How can you use the spread operator to create a new array from 2 or more existing arrays?

Answer 5

let array1 = [1,2,3,4,5];
let array2= [a,b,c,d];
const newArray = […array1, …array2];

Question 6

How can we deal with uncertainty of if an array has a value in a specific position?

Answer 6

We can set default parameters on destructuring assignments as well. If the array in question does not contain a value in that position, the default value will be used.

let double=[12,24,48];

const [two, four, eight, sixteen=NaN] = double;

Question 7

Object destructuring syntax

Answer 7

let Conor = {
age: 24,
name: ‘Conor’,
hot: true;
}

const {age, name}= Conor;
//age=== 24
//name===’Conor’

Question 8

how do we set new titles in an object destructuring?

Answer 8

let Conor = {
age: 24,
name: ‘Conor’,
hot: true;
}

const {age:yearsOnEarth, name:title}= Conor;
//yearsOnEarth=== 24
//title===’Conor’

Question 9

how would you get the city from this object:
let Conor = {
age: 24,
name: ‘Conor’,
hot: true,
location: {
country: ‘Thailand’,
city: ‘Chiang Mai’,
}
}

Answer 9

const {name, location: {city}} = Conor;

Question 10

how does destructuring work when you combine 2 objects?

Answer 10

when using destructuring to combine two objects, the first object is destructured and its properties are assigned to the new object and then the second object is destructured and assigned. If the first and second object contain any of the same keys, the value from the first object in the new object will be overwritten by the value in the second.

Question 11

What does the spread operator do?

Answer 11

Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

Question 12

Where can you use spread syntax?

Answer 12

1. In function calls
2. In array literals
3. In object literals

Question 13

result of: …“BANANAS”

Answer 13

B A N A N A S

Question 14

combine these objects using the spread operator:
const mainColors = {brightRed: “#e55039”, waterfallBlue: “#38ada9”};
const accentColors = {lightGrey: “#778ca3”, swanWhite: “#f7f1e3”};

Answer 14

const fullPalette = {…mainColors, …accentColors};

Question 15

If we want to use an object as an argument but only need a few of its properties, how can we use object destructuring to do that?

Answer 15

let Conor = {
age: 24,
name: ‘Conor’,
hot: true,
location: {
country: ‘Thailand’,
city: ‘Chiang Mai’,
}
}

function greetUser({name, location: {city}}) {
console.log(Greetings ${name}! How is the weather in ${city}?);
}

Question 16

Math.min() expects accepts any number of arguments. How can we use the spread operator to make it accept an array instead?

Answer 16

const temperatures = [76,72,68,79,54,65];
Math.min(…temperatures)
//the same as Math.min(76,72,68,79,54,65)

Question 17

How do you use spread to create a new array from existing arrays?

Answer 17

const parents = [“Lorie”, “Steve”];
const kids = [‘Jake’, “Annie”, “Jess”];

const fullFamily = […parents, …kids];
//[“Lorie”, “Steve”, “Jake”, “Annie”, “Jess”]

Question 18

How can you use the spread operator to copy an array?

Answer 18

const originals = [“Mona Lisa”, “American Gothic”, “The School of Athens”];
const copies = […originals];

Question 19

In some cases such as when writing react, it is important not to mutate arrays and objects directly. How can we use spread to get around this?

Answer 19

const todos = [
{user: “Brick”, completed: false, task: “Upload Video”},
{user: “Lilith”, completed: true, task: “Rob Bank”}
]

function addTodo(newTodo){
return […todos, {…newTodo, completed: false}]
}

const newTodos = addTodo({user: “Mordecai”, task: “Feed Bloodwing”});