What is Destructuring in JavaScript?
Learn what destructuring is in JavaScript, array vs object destructuring syntax, default values, renaming, nested patterns, and code examples.
Expected Interview Answer
Destructuring is an ES6 syntax that lets you unpack values from arrays or properties from objects into distinct variables in a single, concise expression. It replaces repetitive manual assignment like const name = user.name with a compact pattern that mirrors the shape of the data.
Array destructuring extracts values by position, so const [a, b] = arr assigns the first two elements regardless of their names, and you can skip elements or capture the rest with the spread operator. Object destructuring extracts values by property name, so const { name, age } = user pulls matching keys directly into variables, and you can rename them or supply default values inline. Destructuring works in function parameters too, letting you unpack an options object directly in the signature for cleaner APIs. It also nests arbitrarily deep, so you can pull values out of objects containing arrays containing further objects in one statement.
- Reduces repetitive property and index access code
- Supports default values and renaming inline
- Cleaner function signatures via parameter destructuring
- Works with nested structures in a single expression
- Pairs naturally with the rest/spread operators
AI Mentor Explanation
Destructuring is like a scorer pulling out only the strike rate and boundary count from a full match scorecard in one glance, instead of scanning the entire sheet line by line. If the scorecard doesn't list a particular stat, the scorer can pencil in a sensible default like zero instead of leaving a blank.
Step-by-Step Explanation
Step 1
Array destructuring by position
const [first, second] = array assigns values based on their index order in the array.
Step 2
Object destructuring by key
const { key1, key2 } = obj extracts values by matching property names, independent of order.
Step 3
Defaults and renaming
const { name: userName = 'Guest' } = obj supplies a fallback and a new local variable name in one expression.
Step 4
Nested destructuring
Patterns can mirror nested object or array shapes, pulling deeply nested values out in a single statement.
Step 5
Destructuring in parameters
Function signatures can destructure an options object directly, like function greet({ name, age }) {...}.
What Interviewer Expects
- Demonstrates both array and object destructuring syntax
- Knows how to set default values during destructuring
- Can rename a destructured variable inline
- Shows destructuring used in function parameters
- Understands nested destructuring for complex data shapes
Common Mistakes
- Confusing array destructuring's positional order with object destructuring's key matching
- Forgetting default values only apply when the value is undefined, not any falsy value
- Destructuring a property that doesn't exist without a default, getting undefined silently
- Not knowing you can rename while destructuring an object
- Overusing deeply nested destructuring, hurting readability
Best Answer (HR Friendly)
“Destructuring is a shortcut in JavaScript that lets you pull specific pieces of data out of an object or array in one line, instead of writing several separate lines to grab each value. It makes code shorter and easier to read when working with structured data like a user profile.”
Code Example
const [first, second, ...rest] = [10, 20, 30, 40];
console.log(first, second, rest); // 10 20 [30, 40]
const user = { name: 'Ada', age: 30 };
const { name, age, country = 'Unknown' } = user;
console.log(name, age, country); // Ada 30 Unknown
function greet({ name: userName = 'Guest' } = {}) {
console.log(`Hello, ${userName}!`);
}
greet({ name: 'Grace' }); // Hello, Grace!
greet(); // Hello, Guest!Follow-up Questions
- How does default value assignment work during destructuring?
- How do you swap two variables using array destructuring?
- How does destructuring interact with the rest operator?
- Can you destructure directly inside a function parameter list?
- How do you destructure deeply nested objects safely?
MCQ Practice
1. In array destructuring, how are values assigned?
Array destructuring assigns values based on their positional index in the array, not by name.
2. When does a default value apply during destructuring?
Default values in destructuring only kick in when the extracted value is strictly undefined, not for other falsy values like 0 or ''.
3. What does const { name: userName } = obj do?
This syntax destructures the name property but stores it in a local variable called userName instead.
Flash Cards
What is destructuring? — ES6 syntax to unpack array values or object properties into individual variables in one expression.
How does array destructuring differ from object destructuring? — Arrays destructure by position/index; objects destructure by matching property name.
When does a destructuring default value apply? — Only when the extracted value is strictly undefined.
Can you destructure in a function's parameter list? — Yes, e.g. function greet({ name, age }) {...} unpacks an options object directly in the signature.