What Is Destructuring Assignment in JavaScript?
Learn JavaScript destructuring assignment for arrays and objects, with defaults, renaming, rest patterns, and examples.
Expected Interview Answer
Destructuring assignment is a JavaScript syntax that unpacks values from arrays or properties from objects into distinct variables in a single expression, using array-literal-like or object-literal-like patterns on the left side of an assignment instead of accessing each value individually.
Array destructuring, `const [a, b] = arr`, assigns by position — the first element to `a`, the second to `b` — and supports skipping elements with extra commas and collecting the remainder with a rest pattern, `const [first, ...rest] = arr`. Object destructuring, `const { name, age } = obj`, assigns by matching property key names, and can rename with `{ name: userName }`, provide default values with `{ age = 18 }` for when the property is missing, and pull nested values with `{ address: { city } }`. Destructuring is used constantly in function parameters — `function greet({ name, age = 18 }) {}` — to make a function's expected shape self-documenting, and in module imports, `import { useState } from "react"`, which is object destructuring applied to the exported namespace. It is purely a syntactic convenience for extraction; it does not change the underlying data, and it throws only if you try to destructure a property from null or undefined at the top level.
- Extracts multiple values in one concise statement instead of repeated dot/bracket access
- Function parameter destructuring self-documents the expected object shape
- Supports default values and renaming inline, reducing boilerplate
- Enables clean swapping and rest/spread patterns for arrays and objects
AI Mentor Explanation
Destructuring is like a selector pulling specific named players straight out of a squad list — "give me the captain and the wicketkeeper" — instead of scanning the whole roster and assigning each one manually by index. If a named role is missing, a default reserve can be assigned automatically, and any player not explicitly named can be swept into a “remaining squad” group. This is exactly how `const { captain, keeper, ...rest } = squad` extracts named properties directly by matching key, defaults included. It replaces a series of separate lookups with one declarative unpacking statement.
Step-by-Step Explanation
Step 1
Choose a pattern shape
Use `[a, b]` for positional array unpacking or `{ key1, key2 }` for named object unpacking.
Step 2
Assign the pattern
Place the pattern on the left of `=`, the array/object to unpack on the right: `const { name } = user`.
Step 3
Add defaults or renames as needed
Use `{ age = 18 }` for a default when missing, or `{ name: userName }` to bind under a different variable name.
Step 4
Use rest to capture the remainder
`const { id, ...rest } = obj` or `const [first, ...others] = arr` collects everything not explicitly named.
What Interviewer Expects
- Clear distinction between array (positional) and object (by-key) destructuring
- Knowledge of default values and renaming syntax
- Awareness of the rest pattern for collecting remaining elements/properties
- A practical example, such as function parameter destructuring or module imports
Common Mistakes
- Confusing array destructuring (positional) with object destructuring (by property name)
- Forgetting that destructuring a property from null/undefined throws a TypeError
- Not knowing default values only apply when the property is undefined, not null
- Overusing deeply nested destructuring patterns that hurt readability
Best Answer (HR Friendly)
“Destructuring lets you pull specific values out of an array or object directly into their own variables in one line, instead of accessing each one separately. It is commonly used to cleanly extract a few named fields from a function's input object, and it is also what you are doing every time you write an import statement like importing useState from React.”
Code Example
// Array destructuring
const coords = [10, 20, 30]
const [x, y, ...restCoords] = coords
console.log(x, y, restCoords) // 10 20 [30]
// Object destructuring with rename + default
const user = { name: 'Ada', role: 'engineer' }
const { name: userName, age = 30, ...otherFields } = user
console.log(userName, age, otherFields) // Ada 30 { role: 'engineer' }
// Function parameter destructuring
function greet({ name, age = 18 }) {
return `Hi ${name}, age ${age}`
}
console.log(greet({ name: 'Sam' })) // Hi Sam, age 18Follow-up Questions
- How does destructuring a nested object property work, e.g. `{ address: { city } }`?
- Why does `const { x } = null` throw, but `const { x } = undefined` also throws?
- How is destructuring used in ES module import statements?
- How would you swap two variables using array destructuring without a temp variable?
MCQ Practice
1. What does `const [a, b] = [1, 2, 3]` assign to `b`?
Array destructuring assigns by position, so b gets the second element.
2. When does a default value in destructuring apply?
Destructuring defaults trigger specifically on undefined, not on null or falsy values.
3. What does `const { id, ...rest } = obj` do?
The rest pattern gathers any properties not explicitly destructured into a new object.
Flash Cards
Array vs object destructuring? — Array is positional (by index); object is by matching property key name.
When do defaults apply? — Only when the value is undefined, not null or other falsy values.
What does rest (...) do in destructuring? — Collects remaining unmatched elements/properties into a new array/object.
Common real-world use? — Function parameter destructuring and ES module named imports.