Destructuring
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Does array destructuring use square brackets?
2. Does object destructuring use curly braces?
3. Is () valid for destructuring an array or object?
4. Do object destructuring variable names need to match the keys?
5. Does array destructuring assign values by their position?
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1let [a, b] = [1, 2]; | A[x, y] = [5, 6] | |
| 2let {name, age} = person; | B{city, zip} = place | |
| 3Unpacks values from an array by their position | CUnpacks the array into two separate variables a and b | |
| 4Unpacks properties from an object into matching variables | DUnpacks the name and age properties into variables | |
| 5let (a, b) = [1, 2]; | EWrong - array destructuring uses [], not () | |
| 6let (name, age) = person; | FWrong - object destructuring uses {}, not () |
C
Definitions
destructuring
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
let _a, b] = [1, 2];
2.
let [i, j] = _3, 4];
3.
let _name, age} = person;
4.
let {name, age_ = person;
5.
let [x, y] _ [5, 6];
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
let (a, b) = [1, 2];
B
console.log(a);
C
console.log(b);
Question 2
A
console.log(c);
B
let [c, d] = (3, 4);
C
console.log(d);
Question 3
A
console.log(name);
B
console.log(age);
C
let (name, age) = person;
Question 4
A
console.log(city);
B
let {city, zip] = place;
C
console.log(zip);
Question 5
A
let [e, f] = [7, 8];
B
console.log(e);
C
console.log(f)
Answer Key
Destructuring
Section A: Quick Questions
Q1
A — Yes
Q2
A — Yes
Q3
B — No
Q4
A — Yes
Q5
B — Yes
Section B: Match the Pairs
Q1
let [a, b] = [1, 2]; → Unpacks the array into two separate variables a and b
Q2
let {name, age} = person; → Unpacks the name and age properties into variables
Q3
Unpacks values from an array by their position → [x, y] = [5, 6]
Q4
Unpacks properties from an object into matching variables → {city, zip} = place
Q5
let (a, b) = [1, 2]; → Wrong - array destructuring uses [], not ()
Q6
let (name, age) = person; → Wrong - object destructuring uses {}, not ()
Section C: Definitions
Q1
destructuring — Unpacks values from an array or properties from an object into separate variables.Section D: Fill in the Blanks
Q1
let [a, b] = [1, 2];Q2
let [i, j] = [3, 4];Q3
let {name, age} = person;Q4
let {name, age} = person;Q5
let [x, y] = [5, 6];Section E: Spot the Error
Q1
A — Array destructuring uses square brackets [], not round brackets.
Q2
B — The array being destructured needs [], not ().
Q3
C — Object destructuring uses curly braces {}, not round brackets.
Q4
B — Object destructuring must open and close with {} to match.
Q5
C — This line is missing a semicolon, but that's not required in JS.