JavaScript 6 Destructuring Use Cases (Nested, Default) Quiz
Tackle 30 questions on nested object/array destructuring, defaults, renaming bindings, destructuring parameters, and skipping positions.
30 Questions
~60 minutes
1
Question 1
Why is nested object destructuring useful with API responses?
A
It lets you pluck deep properties directly without repetitive dot chains
B
It automatically validates JSON schema
C
It forces immutable state
D
It converts objects to arrays
2
Question 2
Which syntax accesses a nested property while defining a local alias?
A
const { profile: { email: contactEmail } } = user
B
const contactEmail = user.profile
C
const user = profile.email
D
const { profile.email } = user
3
Question 3
What logs?
javascript
const data = { stats: { points: 42 } }
const { stats: { points } } = data
console.log(points)A
42
B
undefined
C
{ points: 42 }
D
Throws ReferenceError
4
Question 4
What happens if a middle object in a nested destructuring chain is undefined?
A
A TypeError occurs because the pattern tries to read a property of undefined
B
JavaScript silently ignores the property
C
The property becomes null
D
The runtime fills it with an empty object automatically
5
Question 5
What logs?
javascript
const config = { theme: { colors: { primary: '#f00' } } }
const { theme: { colors: { secondary = '#00f' } } } = config
console.log(secondary)A
#00f
B
#f00
C
undefined
D
Throws TypeError
6
Question 6
Why does nested array destructuring work well with coordinate tuples?
A
It extracts inner array values into named slots in a single line
B
It sorts the coordinates
C
It mutates the tuple into objects
D
It validates numeric ranges automatically
7
Question 7
How can you destructure a matrix to get the center item?
A
const [ , [ , center ] ] = matrix
B
const { center } = matrix[1][1]
C
const center = matrix.apply(1,1)
D
const [center] = matrix[1][1]
8
Question 8
What logs?
javascript
const pairs = [['A', 1], ['B', 2]]
const [ , [label, value] ] = pairs
console.log(label, value)A
B 2
B
A 1
C
undefined undefined
D
Throws TypeError
9
Question 9
What happens when skipping entries with commas in array patterns?
A
Each comma advances one position, effectively ignoring that element
B
Commas duplicate the value
C
Skipping removes the value from the original array
D
The array becomes sparse
10
Question 10
What logs?
javascript
const coords = [1, [2, 3]]
const [x, [y, z = 0]] = coords
console.log(x, y, z)A
1 2 3
B
1 2 0
C
undefined undefined undefined
D
Throws TypeError
11
Question 11
When do destructuring defaults apply?
A
Only when the property evaluates to undefined
B
Whenever the property is falsy
C
Whenever a property is missing or null
D
On every assignment regardless of value
12
Question 12
Why might you set a default for a nested property?
A
To prevent TypeErrors when a child object is missing by providing fallback objects or values
B
To convert the property into a getter
C
To force strict mode
D
To automatically deep clone data
13
Question 13
What logs?
javascript
const settings = {}
const { theme: { mode = 'light' } = {} } = settings
console.log(mode)A
light
B
undefined
C
{}
D
Throws TypeError
14
Question 14
What risk occurs when default values are expensive to compute?
A
They execute whenever the property is undefined, potentially wasting time
B
They execute even when the property exists
C
They disable garbage collection
D
They convert numbers to strings
15
Question 15
What logs?
javascript
const getUser = () => ({ name: 'Kai' })
const { name = getUser().name } = { name: undefined }
console.log(name)A
Kai
B
undefined
C
Throws ReferenceError
D
null
16
Question 16
What logs?
javascript
const report = { id: 10 }
const { id: reportId } = report
console.log(reportId)A
10
B
undefined
C
{ id: 10 }
D
Throws TypeError
17
Question 17
Why is renaming beneficial when destructuring external data?
A
It avoids local naming collisions and documents variable purpose
B
It enforces strict equality
C
It makes properties read-only
D
It converts camelCase to snake_case automatically
18
Question 18
Which syntax destructures while renaming two properties?
A
const { title: heading, description: details } = post
B
const heading = post.title:details
C
const { heading -> title } = post
D
const post = { heading: title }
19
Question 19
What logs?
javascript
const info = { a: 1, b: 2 }
const { a: first = 0, c: third = 3 } = info
console.log(first, third)A
1 3
B
1 undefined
C
0 3
D
Throws TypeError
20
Question 20
What logs?
javascript
function greet({ name, role = 'guest' }) {
console.log(`${name}-${role}`)
}
greet({ name: 'Jin' })A
Jin-guest
B
Jin-undefined
C
-guest
D
Throws TypeError
21
Question 21
Why is parameter destructuring helpful in utility functions?
A
It documents required options and provides defaults inline
B
It prevents extra properties from being passed
C
It speeds up execution automatically
D
It enforces TypeScript types at runtime
22
Question 22
Which pattern guards against undefined options objects?
A
function init({ retries = 3 } = {}) { ... }
B
function init({ retries = 3 } = null) { ... }
C
function init({ retries = 3 }?) { ... }
D
function init(retries = { } = 3) { ... }
23
Question 23
What logs?
javascript
const connect = ({ host, port: p = 80 } = {}) => `${host ?? 'localhost'}:${p}`
console.log(connect({ host: 'api' }))A
api:80
B
localhost:80
C
api:undefined
D
Throws TypeError
24
Question 24
What logs?
javascript
const items = ['alpha', 'beta', 'gamma']
const [first, , third] = items
console.log(first, third)A
alpha gamma
B
alpha beta
C
beta gamma
D
undefined undefined
25
Question 25
Why is skipping entries useful when processing data rows?
A
You can ignore unused columns without introducing throwaway variables
B
It deletes columns from the dataset
C
It sorts rows automatically
D
It converts arrays into objects
26
Question 26
How do rest elements pair with skipping?
A
You can skip leading positions, then capture the remaining values with ...rest
B
Rest must appear before skipped slots
C
Skipping is disallowed when rest exists
D
Rest automatically sorts remaining values
27
Question 27
What logs?
javascript
const nums = [10, 20, 30, 40]
const [first, , ...others] = nums
console.log(first, others)A
10 [30, 40]
B
10 [20, 30, 40]
C
20 [30, 40]
D
undefined []
28
Question 28
What logs?
javascript
const [first = 'A', second = 'B'] = [undefined, null]
console.log(first, second)A
A null
B
A B
C
undefined null
D
Throws TypeError
29
Question 29
Why is combining destructuring with template literals expressive?
A
You immediately reference extracted variables inside strings, improving readability
B
It auto-translates text
C
It enforces localization rules
D
It converts strings to numbers
30
Question 30
How does destructuring improve React/Node codebases?
A
Components and utilities can accept flexible props/options while keeping local variables explicit and guarded with defaults
B
It removes the need for state management
C
It auto-generates TypeScript types
D
It prevents all runtime errors