What is Destructuring in JavaScript?
Learn JavaScript destructuring for arrays and objects, including default values, renaming, nested patterns and interview-ready examples with code.
Expected Interview Answer
Destructuring is an ES6 syntax that unpacks values from arrays or properties from objects into distinct variables in a single, concise statement, instead of accessing each one by index or key manually.
Array destructuring pulls values by position ([a, b] = arr), while object destructuring pulls them by property name ({name, age} = obj). It supports default values for missing entries, renaming ({name: userName}), nested patterns, and combining with the rest operator to gather leftovers. It is widely used to extract function parameters, swap variables without a temp, and pull specific fields out of returned objects or API responses.
- Cleaner, shorter code for extracting values
- Set default values for missing properties inline
- Swap variables without a temporary variable
- Extract only the fields you need from objects/APIs
- Combine with rest to capture remaining items
AI Mentor Explanation
Destructuring is like reading a team sheet and immediately writing each name onto its own labelled jersey — opener, keeper, captain — in one pass, rather than looking up the roster line by line. You pull the exact roles you need out of the full squad list in a single move.
Step-by-Step Explanation
Step 1
Destructure an array
const [x, y] = [1, 2] assigns by position: x is 1, y is 2.
Step 2
Destructure an object
const { name, age } = user assigns by matching property name.
Step 3
Add default values
const { role = 'guest' } = user uses the default when the property is missing.
Step 4
Rename while unpacking
const { name: userName } = user stores the value in userName.
Step 5
Combine with rest
const [first, ...others] = arr keeps the leftover items in others.
What Interviewer Expects
- Distinction between array (by position) and object (by name) destructuring
- Knowing how to set default values
- Ability to rename variables during destructuring
- A practical use case like function parameters or variable swap
- Awareness of nested destructuring
Common Mistakes
- Mixing up positional array vs. named object destructuring
- Forgetting to wrap object destructuring in parentheses when not declaring
- Assuming property names can be reordered like array positions
- Not providing defaults, causing undefined for missing keys
- Incorrect syntax when renaming a destructured property
Best Answer (HR Friendly)
“Destructuring is a shorthand for pulling values out of arrays or objects and putting them into their own variables in one line. It makes code shorter and clearer, and lets you grab just the pieces of data you actually need.”
Code Example
// Array: by position
const [first, second] = [10, 20];
console.log(first, second); // 10 20
// Object: by name, with default and rename
const user = { name: 'Ada', age: 30 };
const { name: userName, age, role = 'guest' } = user;
console.log(userName, age, role); // Ada 30 guest
// Swap without a temp variable
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1
// In function parameters
function greet({ name }) {
return `Hi ${name}`;
}
console.log(greet(user)); // Hi AdaFollow-up Questions
- How do you set default values in destructuring?
- How do you rename a variable while destructuring an object?
- How can you swap two variables using destructuring?
- How does nested destructuring work?
- Why do you need parentheses when destructuring into existing variables?
MCQ Practice
1. Array destructuring assigns values based on what?
Array destructuring matches variables to elements by their position, not by name.
2. What does const { role = 'guest' } = {} produce for role?
When the property is missing, the default value 'guest' is used.
3. Which correctly renames a destructured property?
The colon syntax { name: n } assigns the value of the name property to a new variable n.
Flash Cards
What is destructuring? — ES6 syntax to unpack array values or object properties into distinct variables.
Array vs object destructuring? — Array is by position ([a, b]); object is by property name ({ x, y }).
How to set a default? — const { role = 'guest' } = obj uses the default when the property is missing.
How to rename? — const { name: userName } = obj stores name's value in userName.