Destructuring Theory
Destructuring assignment unpacks values from arrays by position and properties from objects by name into distinct variables, reducing boilerplate and improving readability.
What it is
Array destructuring assigns elements to variables based on their index position. You can skip elements with empty commas and provide default values for missing indices.
Object destructuring extracts properties by matching property names. Variables can be renamed with the colon syntax and given defaults when a property is undefined.
Destructuring works in function parameters, letting you extract needed values directly from arguments without intermediate variables. This is especially common for configuration objects and React props.
Interview framing: define Destructuring in one sentence, then explain one concrete runtime behavior and one common pitfall with a short code example.
How it works
- Step 1: the engine evaluates the right-hand side expression to get the source value (array or object).
- Step 2: for arrays, elements are matched by index position; for objects, properties are matched by name.
- Step 3: if a destructured variable has a default value and the matched value is undefined, the default is used instead.
- Step 4: nested patterns reach into inner structures, and rest elements collect whatever remains.
Common mistakes
Confusing object rename syntax with defaults
In { name: alias }, the colon renames the variable. Developers sometimes confuse this with { name = default }, which sets a default value.
Fix: Remember: colon renames (prop: newName), equals defaults (prop = fallback). You can combine them: { prop: newName = fallback }.
Destructuring null or undefined
Attempting to destructure null or undefined throws a TypeError because the engine cannot read properties from non-object values.
Fix: Guard with a fallback: const { x } = obj ?? {} or provide a default parameter in functions.
Forgetting parentheses for assignment without declaration
Writing { a, b } = obj without let/const is parsed as a block statement, causing a syntax error.
Fix: Wrap in parentheses: ({ a, b } = obj). The parens force expression parsing.
Interview questions
Common interview prompts with concise model answers.
What is the difference between array and object destructuring?
Array destructuring matches by position (index), while object destructuring matches by property name. Arrays use square brackets, objects use curly braces.
const [a, b] = [1, 2]; // by position
const { x, y } = { x: 1, y: 2 }; // by nameHow do default values work in destructuring?
Defaults activate only when the destructured value is undefined. A null value does not trigger the default.
const { a = 10 } = { a: undefined }; // a = 10
const { b = 10 } = { b: null }; // b = nullCan you swap two variables using destructuring?
Yes. Array destructuring allows swapping without a temporary variable: [a, b] = [b, a].
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1How do you destructure nested objects?
Use nested curly braces matching the object shape. The intermediate property name acts as a path, not a variable.
const user = { address: { city: "NYC" } };
const { address: { city } } = user;
console.log(city); // "NYC"
// 'address' is NOT a variable hereRelated concepts
Continue with these concepts to strengthen your mental model.