Destructuring

Unpacks values from an array or properties from an object into separate variables.

Part of: JavaScript Coding without HTML and CSS — Module 36

Understanding Destructuring in JavaScript

What it does: x becomes 5 and y becomes 6, based on their order. city and zip must match the property names in place. let [a, b] = array unpacks values using square brackets. Destructuring never uses round brackets - only [] or {}. The first variable gets the first array value, and so on. Destructuring unpacks several values into variables at once. The = connects the destructuring pattern to the array or object. Array destructuring assigns values by their position in the array.

Common mistakes: Array destructuring uses square brackets [], not round brackets. The array being destructured needs [], not ().

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Destructuring to a class →

This module's key terms are also in a printable crossword (Modules 31–40) and word search (Modules 21–52).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Does array destructuring use square brackets?

YesNo

Matches

let (a, b) = [1, 2];

↓

Wrong - array destructuring uses [], not ()

Applying

Meanings

Term

destructuring

Meaning

Unpacks values from an array or properties from an object into separate variables.

Practice

let [a, b] = [1, 2];

Testing

Gaps

let a, b] = [1, 2];

Check Answer

Spots

1let (a, b) = [1, 2];

2console.log(a);

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. Does array destructuring use square brackets?

A. Yes ✓

B. No

let [a, b] = array unpacks values using square brackets.

2. Does object destructuring use curly braces?

A. Yes ✓

B. No

let {name, age} = obj unpacks values using curly braces.

3. Is () valid for destructuring an array or object?

A. Yes

B. No ✓

Destructuring never uses round brackets - only [] or {}.

4. Do object destructuring variable names need to match the keys?

A. Yes ✓

B. No

The variable names in {} must match the object's property names.

5. Does array destructuring assign values by their position?

A. No

B. Yes ✓

The first variable gets the first array value, and so on.

Match the Pairs

let [a, b] = [1, 2]; → Unpacks the array into two separate variables a and b

let {name, age} = person; → Unpacks the name and age properties into variables

Unpacks values from an array by their position → [x, y] = [5, 6]

Unpacks properties from an object into matching variables → {city, zip} = place

let (a, b) = [1, 2]; → Wrong - array destructuring uses [], not ()

let (name, age) = person; → Wrong - object destructuring uses {}, not ()

Key Term

destructuring

Unpacks values from an array or properties from an object into separate variables.

Fill in the Blanks

1. let [a, b] = [1, 2];

Hint: Type the symbol that opens array destructuring.

2. let [i, j] = [3, 4];

Hint: Type the symbol that opens the array being destructured.

3. let {name, age} = person;

Hint: Type the symbol that opens object destructuring.

4. let {name, age} = person;

Hint: Type the symbol that closes object destructuring.

5. let [x, y] = [5, 6];

Hint: Type the symbol used to assign the array's values.

Spot the Error

Question 1

A let (a, b) = [1, 2];

B console.log(a);

C console.log(b);

Line A — Array destructuring uses square brackets [], not round brackets.

Question 2

A console.log(c);

B let [c, d] = (3, 4);

C console.log(d);

Line B — The array being destructured needs [], not ().

Question 3

A console.log(name);

B console.log(age);

C let (name, age) = person;

Line C — Object destructuring uses curly braces {}, not round brackets.

Question 4

A console.log(city);

B let {city, zip] = place;

C console.log(zip);

Line B — Object destructuring must open and close with {} to match.

Question 5

A let [e, f] = [7, 8];

B console.log(e);

C console.log(f)

Line C — This line is missing a semicolon, but that's not required in JS.

Student with a class code? Join your class →